css-atoms/src/stylus/atoms.config.styl

A legal way of doing inline css

// Config to allow overwrite properties of base classes

// Globals
// ==================================================
$default-separator = '--';

// Border
// ==================================================
$border-separator = $default-separator;
$border-list = {
  default: 1px solid #dfdfdf,
  thick: 3px solid #dfdfdf,
  none: none !important
};

// Background
// ==================================================
$background-separator = $default-separator;

// Border Color
// ==================================================
$border-color-separator = $default-separator;
$border-color-list = {
  default: #dfdfdf,
  accent: #43c86f,
  white: #fff
};

// Border Radius
// ==================================================
$radius-separator = $default-separator;
$radius-list = {
  none: 0 !important,
  tiny: 2px,
  small: 3px,
  medium: 4px
};

// Cursor
// ==================================================
$cursor-separator = $default-separator;
$cursor-list = {
  move: move,
  pointer: pointer,
  default: default
};

// Color
// ==================================================
$color-separator = $default-separator;
$color-list = {
  inherit: inherit,
  accent: #43c86f,
  muted: #787878
};

// Font Size
// ==================================================
$font-size-separator = $default-separator;
$font-size-list = {
  tiny: 10px,
  small: 12px,
  medium: 16px,
  large: 21px,
  default: 14px,
  inherit: inherit
};

// Font Weight
// ==================================================
$font-weight-separator = $default-separator;
$font-weight-list = {
  light: 300,
  semi-bold: 600,
  bold: 700,
  normal: 400
};

// Flexbox
// ==================================================
$flex-order-separator = $default-separator;
$flex-order-list = {
  '0': 0,
  '1': 1,
  '2': 2,
  last: 9999
};

// Layout
// ==================================================
$overflow-separator = $default-separator;

// Margin
// ==================================================
$margin-separator = $default-separator;
$margin-list = {
  tiny: 2px,
  small: 5px,
  medium: 10px,
  large: 15px,
  auto: auto,
  none: 0 !important
};

// Padding
// ==================================================
$padding-separator = $default-separator;
$padding-list = {
  tiny: 2px,
  small: 5px,
  medium: 10px,
  large: 15px,
  none: 0 !important
};

// Text Align
// ==================================================
$text-align-separator = $default-separator;

// Text Decoration
// ==================================================
$text-decoration-separator = $default-separator;
$text-decoration-list = {
  'underline': underline,
  'none': none
};

// Vertical Align
// ==================================================
$vertical-align-separator = $default-separator;

// Width
// ==================================================
$width-separator = $default-separator;
$width-list = {
  '100': 100%,
  '50': 50%,
  'inherit': inherit
};

// Max-Width
// ==================================================
$max-width-separator = $default-separator;
$max-width-list = {
  '100': 100%,
  '50': 50%
};

// Height
// ==================================================
$height-separator = $default-separator;
$height-list = {
  '100': 100%,
  '50': 50%,
  'inherit': inherit
};

// Z Index
// ==================================================
$z-index-separator = $default-separator;
$z-index-list = {
  negative: -1,
  '1': 1,
  '50': 50,
  '100': 100
};