milnode/src/stylus/_colors.styl

Vue.js Component Framework, build on top of vuetify

// Color pack
// See $colors from https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/stylus/settings/_colors.styl
// See global-color() from https://github.com/vuetifyjs/vuetify/blob/master/packages/vuetify/src/stylus/generic/_colors.styl

global-color-with-theme($color_name, $color_value_light, $color_value_dark)
  .theme--light
    .{$color_name}
      background-color $color_value_light !important
      border-color: $color_value_light !important

    .{$color_name}--text
      color $color_value_light !important
      caret-color: $color_value_light !important
  .theme--dark
    .{$color_name}
      background-color $color_value_dark !important
      border-color: $color_value_dark !important

    .{$color_name}--text
      color $color_value_dark !important
      caret-color: $color_value_dark !important

global-color-accent-with-theme($color_name, $color_value_light, $color_value_dark, $color_type)
  .theme--light
    .{$color_name}
      &.{$color_type}
        background-color $color_value_light !important
        border-color: $color_value_light !important

    .{$color_name}--text
      &.text--{$color_type}
        color: $color_value_light !important
        caret-color: $color_value_light !important
  .theme--dark
    .{$color_name}
      &.{$color_type}
        background-color $color_value_dark !important
        border-color: $color_value_dark !important

    .{$color_name}--text
      &.text--{$color_type}
        color: $color_value_dark !important
        caret-color: $color_value_dark !important

for $color_name, $color_color in $colors
  if $color_color != 'shades'
    global-color($color_name, $color_color.base)
    global-color-accent-with-theme($color_name, $color_color.lighten-5, $color_color.darken-4, 'lighten-5')
    global-color-accent-with-theme($color_name, $color_color.lighten-4, $color_color.darken-4, 'lighten-4')
    global-color-accent-with-theme($color_name, $color_color.lighten-3, $color_color.darken-3, 'lighten-3')
    global-color-accent-with-theme($color_name, $color_color.lighten-2, $color_color.darken-2, 'lighten-2')
    global-color-accent-with-theme($color_name, $color_color.lighten-1, $color_color.darken-1, 'lighten-1')
    global-color-accent-with-theme($color_name, $color_color.darken-1, $color_color.lighten-2, 'darken-1')
    global-color-accent-with-theme($color_name, $color_color.darken-2, $color_color.lighten-3, 'darken-2')
    global-color-accent-with-theme($color_name, $color_color.darken-3, $color_color.lighten-4, 'darken-3')
    global-color-accent-with-theme($color_name, $color_color.darken-4, $color_color.lighten-5, 'darken-4')

global-color-with-theme('black', #000000, #FFFFFF)
global-color-with-theme('white', #FFFFFF, #000000)