beta-scss/src/variables.scss

$colors: (
  "transparent": transparent,
  "black": #22292f,
  "grey-darkest": #3d4852,
  "grey-darker": #606f7b,
  "grey-dark": #8795a1,
  "grey": #b8c2cc,
  "grey-light": #dae1e7,
  "grey-lighter": #f1f5f8,
  "grey-lightest": #f8fafc,
  "white": #ffffff,
  "red-darkest": #3b0d0c,
  "red-darker": #621b18,
  "red-dark": #cc1f1a,
  "red": #f44040,
  "red-light": #f75f51,
  "red-lighter": #f9acaa,
  "red-lightest": #ffd8d4,
  "orange-darkest": #c64411,
  "orange-darker": #d86501,
  "orange-dark": #f27e19,
  "orange": #ff9334,
  "orange-light": #faad63,
  "orange-lighter": #fcd9b6,
  "orange-lightest": #fff5eb,
  "yellow-darkest": #453411,
  "yellow-darker": #684f1d,
  "yellow-dark": #f2d024,
  "yellow": #ffed4a,
  "yellow-light": #fff382,
  "yellow-lighter": #fff9c2,
  "yellow-lightest": #fcfbeb,
  "teal-darkest": #0d3331,
  "teal-darker": #006875,
  "teal-dark": #017887,
  "teal": #019bae,
  "teal-light": #3bbcc7,
  "teal-lighter": #c0f1f5,
  "teal-lightest": #e8fffe,
  "green-darkest": #0f2f21,
  "green-darker": #1a4731,
  "green-dark": #1f9d55,
  "green": #11b776,
  "green-light": #51d88a,
  "green-lighter": #a2f5bf,
  "green-lightest": #e3fcec,
  "blue-darkest": #12283a,
  "blue-darker": #1c3d5a,
  "blue-dark": #2779bd,
  "blue": #3490dc,
  "blue-light": #6cb2eb,
  "blue-lighter": #bcdefa,
  "blue-lightest": #eff8ff,
  "indigo-darkest": #191e38,
  "indigo-darker": #2f365f,
  "indigo-dark": #5661b3,
  "indigo": #6574cd,
  "indigo-light": #7886d7,
  "indigo-lighter": #b2b7ff,
  "indigo-lightest": #e6e8ff,
  "purple-darkest": #21183c,
  "purple-darker": #382b5f,
  "purple-dark": #794acf,
  "purple": #9561e2,
  "purple-light": #a779e9,
  "purple-lighter": #d6bbfc,
  "purple-lightest": #f3ebff,
  "pink-darkest": #451225,
  "pink-darker": #6f213f,
  "pink-dark": #eb5286,
  "pink": #f66d9b,
  "pink-light": #fa7ea8,
  "pink-lighter": #ffbbca,
  "pink-lightest": #ffebef
);

$border-styles: (
  "solid": solid,
  "dashed": dashed,
  "dotted": dotted,
  "none": none
);

$border-width-default: 1px;
$border-widths: (
  "0": 0,
  "1\\/8": 0.125rem,
  "1\\/4": 0.25rem,
  "1\\/2": 0.5rem,
  "3\\/4": 0.75rem,
  "1": 1rem
);

$gaps: (
  "0": 0,
  "1\\/8": 0.125rem,
  "1\\/4": 0.25rem,
  "1\\/2": 0.5rem,
  "3\\/4": 0.75rem,
  "1": 1rem
);

$vertical-aligns: (
  "baseline": baseline,
  "top": top,
  "middle": middle,
  "bottom": bottom,
  "text-top": text-top,
  "text-bottom": text-bottom
);

$text-aligns: (
  "left": left,
  "center": center,
  "right": right,
  "justify": justify
);

$cursors: (
  "auto": auto,
  "default": default,
  "pointer": pointer,
  "wait": wait,
  "move": move,
  "not-allowed": not-allowed
);

$text-decorations: (
  "underline": underline,
  "line-through": line-through,
  "no-underline": none
);

$displays: (
  "inline": inline,
  "block": block,
  "inline-block": inline-block,
  "none": none,
  "flex": flex,
  "inline-flex": inline-flex,
  "grid": grid,
  "inline-grid": inline-grid
);

$visibles: (
  "visible": visible,
  "invisible": hidden
);

$flex-directions: (
  "row": row,
  "row-reverse": row-reverse,
  "col": column,
  "col-reverse": column-reverse
);

$flex-wraps: (
  "no-wrap": nowrap,
  "wrap": wrap,
  "wrap-reverse": wrap-reverse
);

$align-items: (
  "start": flex-start,
  "center": center,
  "end": flex-end,
  "stretch": stretch,
  "baseline": baseline
);

$align-contents: (
  "start": flex-start,
  "center": center,
  "end": flex-end,
  "stretch": stretch,
  "between": space-between,
  "around": space-around
);

$align-selfs: (
  "auto": auto,
  "start": flex-start,
  "center": center,
  "end": flex-end,
  "stretch": stretch
);

$justify-contents: (
  "start": flex-start,
  "center": center,
  "end": flex-end,
  "between": space-between,
  "around": space-around
);

$flexs: (
  "auto": 1 1 auto,
  "initial": initial,
  "1": 1 1 0%,
  "2": 2 2 0%,
  "3": 3 3 0%,
  "none": none
);

$floats: (
  "right": right,
  "left": left,
  "none": none
);

$overflows: (
  "auto": auto,
  "hidden": hidden,
  "visible": visible,
  "scroll": scroll
);

$pointer-events: (
  "none": none,
  "auto": auto
);

$positions: (
  "static": static,
  "fixed": fixed,
  "absolute": absolute,
  "relative": relative,
  "sticky": sticky
);

$position-sizes: (
  "0": 0,
  "1\\/4": 0.25rem,
  "1\\/2": 0.5rem,
  "3\\/4": 0.75rem,
  "1": 1rem,
  "5\\/4": 1.25rem,
  "3\\/2": 1.5rem,
  "7\\/4": 1.75rem,
  "2": 2rem,
  "5\\/2": 2.5rem,
  "3": 3rem,
  "4": 4rem,
  "auto": auto
);

$font-styles: (
  "italic": italic,
  "normal": normal,
  "oblique": oblique
);

$text-transforms: (
  "capitalize": capitalize,
  "lowercase": lowercase,
  // "none": none,
    "uppercase": uppercase
);

$white-spaces: (
  "normal": normal,
  "no-wrap": nowrap,
  "pre": pre,
  "pre-line": pre-line,
  "pre-wrap": pre-wrap
);

$opacities: (
  "100": 1,
  "75": 0.75,
  "50": 0.5,
  "25": 0.25,
  "0": 0
);

$z-indexs: (
  "0": 0,
  "10": 10,
  "20": 20,
  "30": 30,
  "40": 40,
  "50": 50,
  "60": 60,
  "70": 70,
  "80": 80,
  "90": 90,
  "100": 100,
  "auto": auto
);

$font-sizes: (
  "1\\/2": calc(1rem / 2),
  "3\\/4": calc(3rem / 4),
  "7\\/8": calc(7rem / 8),
  "1": 1rem,
  "9\\/8": calc(9rem / 8),
  "5\\/4": calc(5rem / 4),
  "3\\/2": calc(3rem / 2),
  "7\\/4": calc(7rem / 4),
  "2": 2rem,
  "3": 3rem
);

$font-weights: (
  "lightest": 100,
  "lighter": 200,
  "light": 300,
  "normal": 400,
  "bold": 500,
  "bolder": 600,
  "boldest": 700
);

$margins: (
  "0": 0,
  "1\\/5": calc(1rem / 5),
  "1\\/4": calc(1rem / 4),
  "1\\/3": calc(1rem / 3),
  "2\\/5": calc(2rem / 5),
  "1\\/2": calc(1rem / 2),
  "3\\/5": calc(3rem / 5),
  "2\\/3": calc(2rem / 3),
  "3\\/4": calc(3rem / 4),
  "4\\/5": calc(4rem / 5),
  "1": 1rem,
  "5\\/4": calc(5rem / 4),
  "3\\/2": calc(3rem / 2),
  "7\\/4": calc(7rem / 4),
  "2": 2rem,
  "5\\/2": calc(5rem / 2),
  "3": 3rem,
  "4": 4rem,
  "auto": auto
);

$paddings: (
  "0": 0,
  "1\\/5": calc(1rem / 5),
  "1\\/4": calc(1rem / 4),
  "1\\/3": calc(1rem / 3),
  "2\\/5": calc(2rem / 5),
  "1\\/2": calc(1rem / 2),
  "3\\/5": calc(3rem / 5),
  "2\\/3": calc(2rem / 3),
  "3\\/4": calc(3rem / 4),
  "4\\/5": calc(4rem / 5),
  "1": 1rem,
  "5\\/4": calc(5rem / 4),
  "3\\/2": calc(3rem / 2),
  "7\\/4": calc(7rem / 4),
  "2": 2rem,
  "5\\/2": calc(5rem / 2),
  "3": 3rem,
  "4": 4rem,
  "auto": auto
);

$line-heights: (
  "1\\/2": 0.5rem,
  "3\\/4": 0.75rem,
  "1": 1rem,
  "3\\/2": 1.5rem,
  "2": 2rem,
  "5\\/2": 2.5rem,
  "3": 3rem
);

$border-radius-default: 0.25rem;
$border-radius: (
  "0": 0,
  "1\\/8": 0.125rem,
  "1\\/2": 0.5rem,
  "3\\/4": 0.75rem,
  "1": 1rem,
  "full": 9999px
);

$degres: (
  "0": 0,
  "90": 90,
  "180": 180,
  "270": 270
);

$orders: (
  "first": -1,
  "last": 999,
  "none": 0,
  "1": 1,
  "2": 2,
  "3": 3,
  "4": 4,
  "5": 5
);

$grows: (
  "grow": 1,
  "grow-none": 0
);

$shrinks: (
  "shrink": 1,
  "shrink-none": 0
);

$shadows: (
  "large": "0 4px 8px 0 rgba(0, 0, 0, 0.12), 0 2px 4px 0 rgba(0, 0, 0, 0.08)",
  "larger":
    "0 15px 30px 0 rgba(0, 0, 0, 0.11), 0 5px 15px 0 rgba(0, 0, 0, 0.08)",
  "inner": "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
  "outline": "0 0 0 3px rgba(0, 0, 0, 0.1)",
  "none": "none"
);

$twelve-columns: (
  "1\\/12": calc(1 * 100% / 12),
  "2\\/12": calc(2 * 100% / 12),
  "3\\/12": calc(3 * 100% / 12),
  "4\\/12": calc(4 * 100% / 12),
  "5\\/12": calc(5 * 100% / 12),
  "6\\/12": calc(6 * 100% / 12),
  "7\\/12": calc(7 * 100% / 12),
  "8\\/12": calc(8 * 100% / 12),
  "9\\/12": calc(9 * 100% / 12),
  "10\\/12": calc(10 * 100% / 12),
  "11\\/12": calc(11 * 100% / 12),
  "12\\/12": 100%
);

$heights: (
  "0": 0,
  "auto": auto,
  "inherit": inherit,
  "full": 100%,
  "screen": 100vh
);

$widths: (
  "0": 0,
  "auto": auto,
  "inherit": inherit,
  "full": 100%,
  "screen": 100vw
);

$breakpoints: (
  "sm": 640px,
  "md": 768px,
  "lg": 1024px,
  "xl": 1280px,
  "xxl": 1536px
);

$table-collapse: (
  "collapse": collapse,
  "seperate": seperate
);

$table-layout: (
  "auto": auto,
  "fixed": fixed
);

$variants: (
  "hover": hover,
  "disabled": disabled,
  "visited": visited,
  "focus": focus,
  "first": first-child,
  "last": last-child
);

// user overridable variables
$responsive-columns: 2, 3, 4, 6, 8, 10, 12 !default;
$columns: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 !default;
$grid-columns: 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 'auto';
$grid-rows: 1, 2, 3, 4, 5, 6, 'auto';

$grid-flows: (
  "row": row,
  "col": column,
  "row-dense": row dense,
  "col-dense": column dense
);

$autos: (
  "auto": auto,
  "min": min-content,
  "max": max-content,
  "fr": minmax(0, 1fr)
);