paleBlue = rgba(0, 23, 255, 0.29)
lightRed = rgba(255, 6, 76, 0.48)
lighterRed = lighten(red, 5%)
border-lightRed = rgb(254, 134, 168)

color-lightRed = rgba(255, 6, 76, 0.48)

color-white = #ffffff
color-default = #424242

material_design_colors = {
  default: {
    "0": #424242
  },
  white: {
    "0": #ffffff
  },
  red: {
    "0": #e51c23,
    "50": #fde0dc,
    "100": #f9bdbb,
    "200": #f69988,
    "300": #f36c60,
    "400": #e84e40,
    "500": #e51c23,
    "600": #dd191d,
    "700": #d01716,
    "800": #c41411,
    "900": #b0120a,
    "A100": #ff7997,
    "A200": #ff5177,
    "A400": #ff2d6f,
    "A700": #e00032
  },
  pink:{
    "0": #e91e63,
    "50": #fce4ec,
    "100": #f8bbd0,
    "200": #f48fb1,
    "300": #f06292,
    "400": #ec407a,
    "500": #e91e63,
    "600": #d81b60,
    "700": #c2185b,
    "800": #ad1457,
    "900": #880e4f,
    "A100": #ff80ab,
    "A200": #ff4081,
    "A400": #f50057,
    "A700": #c51162
  },
  purple:{
    "0": #9c27b0,
    "50":  #f3e5f5,
    "100": #e1bee7,
    "200": #ce93d8,
    "300": #ba68c8,
    "400": #ab47bc,
    "500": #9c27b0,
    "600": #8e24aa,
    "700": #7b1fa2,
    "800": #6a1b9a,
    "900": #4a148c,
    "A100": #ea80fc,
    "A200": #e040fb,
    "A400": #d500f9,
    "A700": #aa00ff
  },
  deep-purple : {
    "0": #673ab7,
    "50": #ede7f6,
    "100": #ede7f6,
    "200": #b39ddb,
    "300": #9575cd,
    "400": #7e57c2,
    "500": #673ab7,
    "600": #5e35b1,
    "700": #512da8,
    "800": #4527a0,
    "900": #311b92,
    "A100": #b388ff,
    "A200": #7c4dff,
    "A400": #651fff,
    "A700": #6200ea
  },
  indigo: {
    "0": #3f51b5,
    "50": #e8eaf6,
    "100": #c5cae9,
    "200": #9fa8da,
    "300": #7986cb,
    "400": #5c6bc0,
    "500": #3f51b5,
    "600": #3949ab,
    "700": #303f9f,
    "800": #283593,
    "900": #1a237e,
    "A100": #8c9eff,
    "A200": #536dfe,
    "A400": #3d5afe,
    "A700": #304ffe
  },
  blue: {
    "0": #5677fc,
    "50": #e7e9fd,
    "100": #d0d9ff,
    "200": #afbfff,
    "300": #91a7ff,
    "400": #738ffe,
    "500": #5677fc,
    "600": #4e6cef,
    "700": #455ede,
    "800": #3b50ce,
    "900": #2a36b1,
    "A100": #a6baff,
    "A200": #6889ff,
    "A400": #4d73ff,
    "A700": #4d69ff

  },
  light-blue: {
    "0": #03a9f4,
    "50": #e1f5fe,
    "100": #b3e5fc,
    "200": #81d4fa,
    "300": #4fc3f7,
    "400": #29b6f6,
    "500": #03a9f4,
    "600": #039be5,
    "700": #0288d1,
    "800": #0277bd,
    "900": #01579b,
    "A100": #80d8ff,
    "A200": #40c4ff,
    "A400": #00b0ff,
    "A700": #0091ea
  },
  cyan: {
    "0": #00bcd4,
    "50": #e0f7fa,
    "100": #b2ebf2,
    "200": #80deea,
    "300": #4dd0e1,
    "400": #26c6da,
    "500": #00bcd4,
    "600": #00acc1,
    "700": #0097a7,
    "800": #00838f,
    "900": #006064,
    "A100": #84ffff,
    "A200": #18ffff,
    "A400": #00e5ff,
    "A700": #00b8d4
  },
  teal: {
    "0": #009688,
    "50": #e0f2f1,
    "100": #b2dfdb,
    "200": #80cbc4,
    "300": #4db6ac,
    "400": #26a69a,
    "500": #009688,
    "600": #00897b,
    "700": #00796b,
    "800": #00695c,
    "900": #004d40,
    "A100": #a7ffeb,
    "A200": #64ffda,
    "A400": #1de9b6,
    "A700": #00bfa5
  },
  green: {
    "0": #259b24,
    "50": #d0f8ce,
    "100": #a3e9a4,
    "200": #72d572,
    "300": #42bd41,
    "400": #2baf2b,
    "500": #259b24,
    "600": #0a8f08,
    "700": #0a7e07,
    "800": #056f00,
    "900": #0d5302,
    "A100": #a2f78d,
    "A200": #5af158,
    "A400": #14e715,
    "A700": #12c700
  },
  light-green: {
    "0": #8bc34a,
    "50": #f1f8e9,
    "100": #dcedc8,
    "200": #c5e1a5,
    "300": #aed581,
    "400": #9ccc65,
    "500": #8bc34a,
    "600": #7cb342,
    "700": #689f38,
    "800": #558b2f,
    "900": #33691e,
    "A100": #ccff90,
    "A200": #b2ff59,
    "A400": #76ff03,
    "A700": #64dd17
  },
  lime: {
    "0": #cddc39,
    "50": #f9fbe7,
    "100": #f0f4c3,
    "200": #e6ee9c,
    "300": #dce775,
    "400": #d4e157,
    "500": #cddc39,
    "600": #c0ca33,
    "700": #afb42b,
    "800": #9e9d24,
    "900": #827717,
    "A100": #f4ff81,
    "A200": #eeff41,
    "A400": #c6ff00,
    "A700": #aeea00
  },
  yellow: {
    "0": #ffeb3b,
    "50": #fffde7,
    "100": #fff9c4,
    "200": #fff59d,
    "300": #fff176,
    "400": #ffee58,
    "500": #ffeb3b,
    "600": #fdd835,
    "700": #fbc02d,
    "800": #f9a825,
    "900": #f57f17,
    "A100": #ffff8d,
    "A200": #ffff00,
    "A400": #ffea00,
    "A700": #ffd600
  },
  amber: {
    "0": #ffc107,
    "50": #fff8e1,
    "100": #ffecb3,
    "200": #ffe082,
    "300": #ffd54f,
    "400": #ffca28,
    "500": #ffc107,
    "600": #ffb300,
    "700": #ffa000,
    "800": #ff8f00,
    "900": #ff6f00,
    "A100": #ffe57f,
    "A200": #ffd740,
    "A400": #ffc400,
    "A700": #ffab00
  },
  orange: {
    "0": #ff9800,
    "50": #fff3e0,
    "100": #ffe0b2,
    "200": #ffcc80,
    "300": #ffb74d,
    "400": #ffa726,
    "500": #ff9800,
    "600": #fb8c00,
    "700": #f57c00,
    "800": #ef6c00,
    "900": #e65100,
    "A100": #ffd180,
    "A200": #ffab40,
    "A400": #ff9100,
    "A700": #ff6d00
  },
  deep-orange: {
    "0": #ff5722,
    "50": #fbe9e7,
    "100": #ffccbc,
    "200": #ffab91,
    "300": #ff8a65,
    "400": #ff7043,
    "500": #ff5722,
    "600": #f4511e,
    "700": #e64a19,
    "800": #d84315,
    "900": #bf360c,
    "A100": #ff9e80,
    "A200": #ff6e40,
    "A400": #ff3d00,
    "A700": #dd2c00
  },
  brown: {
    "0": #795548,
    "50": #efebe9,
    "100": #d7ccc8,
    "200": #bcaaa4,
    "300": #a1887f,
    "400": #8d6e63,
    "500": #795548,
    "600": #6d4c41,
    "700": #5d4037,
    "800": #4e342e,
    "900": #3e2723
  },
  grey: {
    "0": #9e9e9e,
    "50": #fafafa,
    "50": #fafafa,
    "100": #f5f5f5,
    "200": #eeeeee,
    "300": #e0e0e0,
    "400": #bdbdbd,
    "500": #9e9e9e,
    "600": #757575,
    "700": #616161,
    "800": #424242,
    "900": #212121,
    "1000": #000000
  },
  blue-grey: {
    "0": #607d8b,
    "50": #eceff1,
    "50": #eceff1,
    "100": #cfd8dc,
    "200": #b0bec5,
    "300": #90a4ae,
    "400": #78909c,
    "500": #607d8b,
    "600": #546e7a,
    "700": #455a64,
    "800": #37474f,
    "900": #263238
  }
}



create-secondary-material-button(color-name, color-number, hex)
    .y-btn-{color-name}-{color-number}
        background-color hex
        background hex
        color white
        &:hover
            background-color lighten(hex, 10%)
            background lighten(hex, 10%)
            color white

create-primary-material-button(color-name, color-number, hex)



    .y-btn-{color-name}
        background-color hex
        background hex
        color white
        &:hover
            background-color lighten(hex, 10%)
            background lighten(hex, 10%)
            color white





for color-name, color-numbers in material_design_colors
  for number, hex in color-numbers

    create-primary-material-button(color-name, number, hex)
    create-secondary-material-button(color-name, number, hex)