@codacy/ui-components 0.60.8 → 0.60.10

package/lib/theme/theme.js

@@ -1,101 +1,171 @@
 import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-import { themeColors, pulseThemeColors } from './colors';
-import { rgba } from 'polished';
+import { codacyThemeColors, pulseThemeColors } from './';
+import { rgba } from 'polished'; // Types
+
+// *** Theme Standard Values ***********************
+var fontStack = function fontStack(fonts) {
+  return fonts.map(function (font) {
+    return font.includes(' ') ? "\"".concat(font, "\"") : font;
+  }).join(', ');
+};
+
 var remScale = 16;
 var gridSize = 0.5;
 /* rem */
 
-export var codacyTheme = {
+var borderWidths = ['1px', '0.125rem', '0.25rem'];
+var fonts = {
+  normal: fontStack(['Clear Sans', 'arial', 'system-ui', 'sans-serif']),
+  display: fontStack(['Clear Sans', 'arial', 'system-ui', 'sans-serif']),
+  monospace: fontStack(['ui-monospace', 'monospace'])
+};
+var fontSizes = [
+/** fontSize-00 */
+'0.625rem', // 10px
+
+/** fontSize-01 */
+'0.75rem', // 12px
+
+/** fontSize-02 */
+'0.875rem', // 14px
+
+/** fontSize-03 */
+'1rem', // 16px
+
+/** fontSize-04 */
+'1.125rem', // 18px
+
+/** fontSize-05 */
+'1.3125rem', // 21px
+
+/** fontSize-06 */
+'1.65rem', // 26.4px
+
+/** fontSize-07 */
+'2.25rem' // 36px
+];
+var space = [
+/** space-00 */
+'0',
+/** space-01 */
+"".concat(gridSize * 0.5, "rem"), // 4px
+
+/** space-02 */
+"".concat(gridSize, "rem"), // 8px
+
+/** space-03 */
+"".concat(gridSize * 1.5, "rem"), // 12px
+
+/** space-04 */
+"".concat(gridSize * 2, "rem"), // 16px
+
+/** space-05 */
+"".concat(gridSize * 3, "rem"), // 24px
+
+/** space-06 */
+"".concat(gridSize * 4, "rem"), // 32px
+
+/** space-07 */
+"".concat(gridSize * 5, "rem"), // 40px
+
+/** space-08 */
+"".concat(gridSize * 6, "rem"), // 48px
+
+/** space-09 */
+"".concat(gridSize * 8, "rem") // 64px
+];
+var sizes = [
+/** size-00 */
+"".concat(gridSize * 9, "rem"), // 72px
+
+/** size-01 */
+"".concat(gridSize * 19, "rem"), // 152px
+
+/** size-02 */
+"".concat(gridSize * 31, "rem"), // 248px
+
+/** size-03 */
+"".concat(gridSize * 44.5, "rem"), // 356px
+
+/** size-04 */
+"".concat(gridSize * 56.5, "rem") // 452px
+];
+var radii = ['0.125rem'
+/* 2px */
+, '0.25rem'
+/* 4px */
+, '0.5rem'
+/* 8px */
+];
+
+var shadowsFx = function shadowsFx(scheme) {
+  return ["0 0.0625rem 0.125rem ".concat(rgba(scheme['neutral-600'], 0.2)), "0 0.125rem 0.375rem ".concat(rgba(scheme['neutral-600'], 0.3)), "0 0.125rem 0.375rem ".concat(rgba(scheme['neutral-600'], 0.2), ", 0 0.125rem 0.5rem ").concat(rgba(scheme['neutral-600'], 0.1)), "0 0.25rem 0.5rem ".concat(rgba(scheme['neutral-600'], 0.2), ", 0 0.25rem 0.75rem ").concat(rgba(scheme['neutral-600'], 0.1)), "0 0.75rem 1rem ".concat(rgba(scheme['neutral-600'], 0.2), ", 0 0.75rem 1.5rem ").concat(rgba(scheme['neutral-600'], 0.1))];
+};
+
+var transitions = ['0.2s ease-in-out', '0.35s ease-in-out', '0.75s ease-in-out'];
+var breakpoints = ['85.1rem'
+/* > 1360px */
+, '90.1rem'
+/* > 1440px */
+, '105.1rem'
+/* > 1680px */
+];
+var lineHeights = ['1.1875rem', '1.9375rem', '2.75rem'];
+var fontWeights = ['200', '400', '700'];
+var letterSpacings = ['normal'];
+var baseTheme = {
   gridSize: gridSize,
   remScale: remScale,
-  colors: themeColors,
-  borderSize: ['1px', '2px'],
-  borderRadius: ['0.125rem', '0.25rem'],
-  baseLineHeight: '1.1875rem',
-  // 19px
-  fonts: {
-    normal: fontStack(['Clear Sans', 'arial', 'sans-serif'])
-  },
-  fontSizes: ['0.625rem', // 0: 10px
-  '0.75rem', // 1: 12px
-  '0.875rem', // 2: 14px
-  '1rem', // 3: 16px
-  '1.125rem', // 4: 18px
-  '1.3125rem', // 5: 21px
-  '1.65rem', // 6: 26.4px
-  '2.25rem' // 7: 36px
-  ],
-  space: [
-  /** space-00 */
-  '0',
-  /** space-01 */
-  "".concat(gridSize * 0.5, "rem"), // 4px
-
-  /** space-02 */
-  "".concat(gridSize, "rem"), // 8px // fm. space-1
-
-  /** space-03 */
-  "".concat(gridSize * 1.5, "rem"), // 12px
-
-  /** space-04 */
-  "".concat(gridSize * 2, "rem"), // 16px // fm. space-2
-
-  /** space-05 */
-  "".concat(gridSize * 3, "rem"), // 24px // fm. space-3
-
-  /** space-06 */
-  "".concat(gridSize * 4, "rem"), // 32px // fm. space-4
-
-  /** space-07 */
-  "".concat(gridSize * 5, "rem"), // 40px
-
-  /** space-08 */
-  "".concat(gridSize * 6, "rem"), // 48px // fm. space-5
-
-  /** space-09 */
-  "".concat(gridSize * 8, "rem") // 64px // fm. space-6
-  ],
+  borderWidths: borderWidths,
+  fonts: fonts,
+  fontSizes: fontSizes,
+  fontWeights: Object.assign(fontWeights, {
+    light: fontWeights[0],
+    normal: fontWeights[1],
+    bold: fontWeights[2]
+  }),
+  lineHeights: lineHeights,
+  space: space,
+  sizes: sizes,
+  radii: radii,
+  transitions: Object.assign(transitions, {
+    fast: transitions[0],
+    normal: transitions[1],
+    slow: transitions[2]
+  }),
+  breakpoints: breakpoints,
+  letterSpacings: letterSpacings,
   controlSize: {
-    xs: "".concat(gridSize * 9, "rem"),
-    // 72px
-    sm: "".concat(gridSize * 19, "rem"),
-    // 152px
-    md: "".concat(gridSize * 31, "rem"),
-    // 248px
-    lg: "".concat(gridSize * 44.5, "rem"),
-    // 356px
-    xl: "".concat(gridSize * 56.5, "rem") // 452px
-
+    xs: sizes[0],
+    sm: sizes[1],
+    md: sizes[2],
+    lg: sizes[3],
+    xl: sizes[4]
   },
-  shadows: ["0 0.0625rem 0.125rem ".concat(rgba(themeColors['neutral-500'], 0.25)), "0 0.125rem 0.375rem ".concat(rgba(themeColors['neutral-500'], 0.35))],
-  transitions: {
-    fast: '0.2s ease-in-out',
-    normal: '0.35s ease-in-out',
-    slow: '0.75s ease-in-out'
-  },
-  breakpoints: ['85.1rem'
-  /* > 1360px */
-  , '90.1rem'
-  /* > 1440px */
-  , '105.1rem'
-  /* > 1680px */
-  ]
-};
-export var pulseTheme = _objectSpread(_objectSpread({}, codacyTheme), {}, {
-  colors: pulseThemeColors
-});
-/** @deprecated Use codacyTheme instead */
-
-export var theme = codacyTheme;
-
-function fontStack(fonts) {
-  return fonts.map(function (font) {
-    return font.includes(' ') ? "\"".concat(font, "\"") : font;
-  }).join(', ');
-}
+  // --- Deprecated ones; delete after updating SPA
+  baseLineHeight: lineHeights[0],
+  borderSize: borderWidths,
+  borderRadius: radii
+}; // Helper functions
 
 export var transition = function transition(properties, speed) {
+  var refTheme = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : baseTheme;
   return properties.map(function (p) {
-    return "".concat(p, " ").concat(theme.transitions[speed || 'normal']);
+    return "".concat(p, " ").concat(refTheme.transitions[speed || 'normal']);
   }).join(', ');
-};
+};
+export var generateTheme = function generateTheme(scheme) {
+  return _objectSpread(_objectSpread({}, baseTheme), {}, {
+    colors: scheme,
+    borders: borderWidths.map(function (w) {
+      return "solid ".concat(w, " ").concat(scheme['ui-border']);
+    }),
+    shadows: shadowsFx(scheme)
+  });
+}; // Themes
+
+export var codacyTheme = generateTheme(codacyThemeColors);
+export var pulseTheme = generateTheme(pulseThemeColors);
+/** @deprecated Use codacyTheme instead */
+
+export var theme = codacyTheme;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codacy/ui-components",
-  "version": "0.60.8",
+  "version": "0.60.10",
   "description": "",
   "license": "ISC",
   "author": "",
@@ -63,8 +63,8 @@
     "@types/resize-observer-browser": "^0.1.6",
     "@types/styled-system": "^5.1.10",
     "@types/styled-system__should-forward-prop": "^5.1.2",
-    "@typescript-eslint/eslint-plugin": "^2.34.0",
-    "@typescript-eslint/parser": "^2.34.0",
+    "@typescript-eslint/eslint-plugin": "^4.1.1",
+    "@typescript-eslint/parser": "^4.1.1",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.2.1",
     "babel-plugin-emotion": "^10.0.33",

package/lib/theme/colors.js

@@ -1,185 +0,0 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
-var baseColors = {
-  // BLUE
-  'blue-900': '#0052CC',
-  'blue-800': '#2562EA',
-  'blue-700': '#286CFC',
-  'blue-600': '#3E7AFF',
-  'blue-500': '#6695FF',
-  'blue-400': '#94B4FF',
-  'blue-300': '#B9CDFD',
-  'blue-200': '#D0DDFE',
-  'blue-100': '#DDE6FF',
-  'blue-50': '#EBF1FF',
-
-  /** @deprecated Use black-50 instead */
-  'blue-0': '#F9FBFF',
-  // TURQUOISE
-  'turquoise-700': '#176267',
-  'turquoise-600': '#2E7D82',
-  'turquoise-500': '#2D8E94',
-  'turquoise-400': '#35ABB2',
-  'turquoise-300': '#72C8CF',
-  'turquoise-200': '#B6E4E7',
-  'turquoise-100': '#EAF6F6',
-  'turquoise-80': '#F7F8FA',
-  // BLACK
-  'black-700': '#172B4D',
-  'black-600': '#1D3660',
-  'black-500': '#354B71',
-  'black-400': '#4C6083',
-  'black-300': '#7E90B2',
-  'black-200': '#B6C6E0',
-  'black-100': '#C9D8EF',
-  'black-80': '#E5ECF5',
-  'black-60': '#F2F5FD',
-  'black-50': '#F5F8FE',
-  // WHITE
-  white: '#FFFFFF',
-  // PURPLE
-  'purple-100': '#FAF7FD',
-  'purple-200': '#DECDF4',
-  'purple-300': '#C3A3EB',
-  'purple-400': '#A77AE1',
-  'purple-500': '#8C50D8',
-  'purple-600': '#712DC8',
-  'purple-700': '#5A239E',
-  'purple-800': '#421A75',
-  'purple-900': '#2A114B',
-  // REDS
-  'red-400': '#C92C22',
-  'red-300': '#E04440',
-  'red-200': '#EF5454',
-  'red-100': '#F58B8B',
-  'red-50': '#FFE6E6',
-  // GREENS
-  'green-300': '#1B7E37',
-  'green-200': '#25B14D',
-  'green-100': '#4CBE6C',
-  'green-80': '#92D8A6',
-  'green-50': '#E6F4EA',
-  // ORANGES
-  'orange-200': '#EE6002',
-  'orange-100': '#FFA101',
-  'orange-50': '#FFF2DF'
-};
-var functionalColors = {
-  'brand-primary': baseColors['blue-700'],
-  'accent-primary': baseColors['blue-700'],
-  'accent-primary-hover': baseColors['blue-800'],
-  'accent-primary-focus': baseColors['blue-800'],
-  'accent-primary-active': baseColors['blue-900'],
-  'accent-primary-disabled': baseColors['blue-400'],
-  'accent-subtle': baseColors['black-300'],
-  'accent-subtle-hover': baseColors['black-400'],
-  'accent-subtle-focus': baseColors['black-400'],
-  'accent-subtle-active': baseColors['black-500'],
-  'accent-subtle-disabled': baseColors['black-100'],
-  'accent-success': baseColors['green-100'],
-  'accent-success-hover': baseColors['green-200'],
-  'accent-success-focus': baseColors['green-200'],
-  'accent-success-active': baseColors['green-300'],
-  'accent-success-disabled': baseColors['green-80'],
-  'accent-danger': baseColors['red-200'],
-  'accent-danger-hover': baseColors['red-300'],
-  'accent-danger-focus': baseColors['red-300'],
-  'accent-danger-active': baseColors['red-400'],
-  'accent-danger-disabled': baseColors['red-100'],
-  'accent-warning': baseColors['orange-100'],
-  'accent-info': baseColors['blue-600'],
-  'accent-attention': baseColors['purple-400'],
-  'text-primary': baseColors['black-700'],
-  'text-secondary': baseColors['black-400'],
-  'text-complementary': baseColors['black-300'],
-  'text-invert': baseColors['white'],
-  'text-placeholder': baseColors['black-200'],
-  'text-info': baseColors['blue-800'],
-  'text-success': baseColors['green-300'],
-  'text-warning': baseColors['orange-200'],
-  'text-danger': baseColors['red-400'],
-  'text-attention': baseColors['purple-600'],
-  'background-primary': baseColors['white'],
-  'background-secondary': baseColors['black-50'],
-  'background-info': baseColors['blue-50'],
-  'background-success': baseColors['green-50'],
-  'background-warning': baseColors['orange-50'],
-  'background-danger': baseColors['red-50'],
-  'background-attention': baseColors['purple-100'],
-  'background-neutral': baseColors['black-80'],
-  'control-border': baseColors['blue-300'],
-  'control-background': baseColors['white'],
-  'control-active-background': baseColors['black-60'],
-  'control-active-border': baseColors['blue-700'],
-  'control-invalid-border': baseColors['red-200'],
-  'control-disabled': baseColors['blue-100'],
-  'ui-border': baseColors['black-80'],
-  'ui-navbar': baseColors['black-700'],
-  'ui-navbar-text': baseColors['black-100'],
-  'icon-primary': baseColors['black-200'],
-  'icon-info': baseColors['blue-700'],
-  'icon-success': baseColors['green-200'],
-  'icon-warning': baseColors['orange-100'],
-  'icon-danger': baseColors['red-200'],
-  // NEUTRAL
-  'neutral-900': baseColors['black-700'],
-  'neutral-800': baseColors['black-600'],
-  'neutral-700': baseColors['black-500'],
-  'neutral-600': baseColors['black-400'],
-  'neutral-500': baseColors['black-300'],
-  'neutral-400': baseColors['black-200'],
-  'neutral-300': baseColors['black-100'],
-  'neutral-200': baseColors['black-80'],
-  'neutral-100': baseColors['black-60'],
-  'neutral-50': baseColors['black-50'],
-  'neutral-0': baseColors['white']
-};
-
-var functionalPulseColors = _objectSpread(_objectSpread({}, functionalColors), {}, {
-  'brand-primary': baseColors['turquoise-500'],
-  'accent-primary': baseColors['turquoise-500'],
-  'accent-primary-hover': baseColors['turquoise-600'],
-  'accent-primary-focus': baseColors['turquoise-600'],
-  'accent-primary-active': baseColors['turquoise-700'],
-  'accent-primary-disabled': baseColors['turquoise-200'],
-  'accent-subtle': baseColors['black-300'],
-  'accent-subtle-hover': baseColors['black-400'],
-  'accent-subtle-focus': baseColors['black-400'],
-  'accent-subtle-active': baseColors['black-500'],
-  'accent-subtle-disabled': baseColors['black-100'],
-  'accent-info': baseColors['turquoise-400'],
-  'text-primary': baseColors['black-700'],
-  'text-secondary': baseColors['black-400'],
-  'text-complementary': baseColors['black-300'],
-  'text-invert': baseColors['white'],
-  'text-placeholder': baseColors['black-200'],
-  'text-info': baseColors['turquoise-600'],
-  'text-success': baseColors['green-300'],
-  'text-warning': baseColors['orange-200'],
-  'text-danger': baseColors['red-400'],
-  'text-attention': baseColors['purple-600'],
-  'background-primary': baseColors['white'],
-  'background-secondary': baseColors['black-50'],
-  'background-info': baseColors['turquoise-80'],
-  'background-success': baseColors['green-50'],
-  'background-warning': baseColors['orange-50'],
-  'background-danger': baseColors['red-50'],
-  'background-attention': baseColors['purple-100'],
-  'background-neutral': baseColors['black-80'],
-  'control-border': baseColors['black-200'],
-  'control-background': baseColors['white'],
-  'control-active-background': baseColors['white'],
-  'control-active-border': baseColors['turquoise-400'],
-  'control-invalid-border': baseColors['red-300'],
-  'control-disabled': baseColors['black-80'],
-  'ui-border': baseColors['black-80'],
-  'ui-navbar': baseColors['turquoise-80'],
-  'ui-navbar-text': baseColors['black-500'],
-  'icon-primary': baseColors['black-300'],
-  'icon-info': baseColors['turquoise-400']
-});
-
-var themeColors = _objectSpread(_objectSpread({}, baseColors), functionalColors);
-
-var pulseThemeColors = _objectSpread(_objectSpread({}, baseColors), functionalPulseColors);
-
-export { themeColors, pulseThemeColors };