nuke-biz-custom-feedback/src/styles/variable.js

custom-feedback

'use strict';

export default function VariableMix(theme) {
  const Core = theme.Core;
  const ComponentCustomStyle = theme.CustomFeedback;


  // / @namespace size/icon
  const IconBottomMargin = Core.s5;
  // / size
  // / @namespace size/icon
  const IconSize = 38;

  // / icon
  // / @namespace statement/success
  const IconSuccessColor = Core['color-success-2'];
  // / icon
  // / @namespace statement/error
  const IconErrorColor = Core['color-error-2'];
  // / icon
  // / @namespace statement/warning
  const IconWarningColor = Core['color-warning-2'];

  const SuccessColor = Core['color-success-2'];
  const InfoColor = Core['color-brand1-6'];
  // / text
  // / @namespace statement/error
  const ErrorColor = Core['color-error-2'];
  // / text
  // / @namespace statement/warning
  const WarningColor = Core['color-warning-2'];

  const Variables = {
    'icon-bottom-margin': IconBottomMargin,
    'icon-size': IconSize,
    'icon-success-color': IconSuccessColor,
    'icon-error-color': IconErrorColor,
    'icon-warning-color': IconWarningColor,
    'title-font-size': Core['font-size-body-1'],
    'success-bg-color': 'rgba(76,175,80,0.15)',
    'success-title-color': SuccessColor,
    'info-bg-color': 'rgba(56,191,198,0.15)',
    'info-title-color': InfoColor,
    'content-padding-left': Core.s2,
    'padding-tb': Core.s2,
    'padding-lr': Core.s4,
    'warning-title-color': WarningColor,
    'warning-bg-color': 'rgba(254,204,5,0.15)',
    'error-title-color': ErrorColor,
    'error-bg-color': 'rgba(244,67,54,0.15)',
    'message-font-size': Core['font-size-caption'],
    'message-color': Core['color-text1-4'],
    'message-margin-top': Core.s1,
    'message-line-height': 32,
  };
  return { ...Variables, ...ComponentCustomStyle };
}