index.less

@import "./styles/base.less";

@brownish: #cc7833;
@redish: #da4939;
@lightgreen: #a5c261;
@darkgreen: #429965;
@lightblue: #6e9cbe;
@yellowish: #e8bf6a;
@greenish: #519f50;
@purpleish: saturate(darken(rgb(204,206,255), 1), 3);

.syntax--comment {
  font-style: italic;
}

.syntax--entity {
  // Ruby Slim : classes of div like .column
  &.syntax--name.syntax--tag,
  &.syntax--other.syntax--attribute-name {
    color: @yellowish;
  }

  &.syntax--name.syntax--tag,
  // Class name in "class TheClass" definition
  &.syntax--name.syntax--type {
    text-decoration: none;
  }
  &.syntax--other.syntax--inherited-class {
    color: darken(@yellowish, 15)
  }
}

.syntax--keyword {
  color: @brownish;

  &.syntax--control {
    color: @brownish;
  }

  &.syntax--operator {
    color: #999;
  }

  // Language keywords : initialize raise private attr_reader etc.
  &.syntax--other.syntax--special-method {
    color: @brownish;
  }

  // &.syntax--other.syntax--unit {
  //   color: @orange;
  // }
}

.syntax--string {
  // Text inside strings
  color: @lightgreen;

  // All text inside the regexps
  &.syntax--regexp {
    color: @darkgreen;
  }

  &.syntax--other.syntax--link {
    color: @red;
  }

  // Ruby code inside a string
  .syntax--source {
    color: @darkgreen;
  }
}

// In ruby that is "true" or "false" or "nil"
// Also ":" for hashes keys, symbols
.syntax--constant {
  color: darken(@lightblue, 10);

  &.syntax--numeric {
    color: @lightgreen;
  }

  // Ruby symbols (only the text inside)
  &.syntax--other.syntax--symbol {
    color: @lightblue;
  }

  // CAPS constants
  // Also, classes names passed as arguments.syntax-- Ex: include ThisClass
  &.syntax--other.syntax--variable {
    color: lighten(@redish, 20);
  }

  &.syntax--character.syntax--escape {
    color: purple;
  }

  &.syntax--other.syntax--color {
    color: @lightblue;
  }
}


// Comments ! Of course ! :-)
.syntax--comment {
  color: darken(@syntax-text-color, 32);
  font-style: italic;

  // The signs before comments : # or // or /*
  &.syntax--punctuation.syntax--definition {
    color: darken(@syntax-text-color, 42);
  }
}


.syntax--punctuation {
  // Ruby < symbol class inheritance
  &.syntax--inheritance {
    &.syntax--variable {
      color: @brownish;
    }
  }

  &.syntax--definition {
    // Quotes surrounding a string
    &.syntax--string {
      color: darken(@lightgreen, 15);
    }

    // Parenthesis surrounding a function's params
    &.syntax--parameters {
      color: darken(@syntax-text-color, 20);
    }

    // Ruby << symbol for inheritance like in "class << self"
    &.syntax--variable {
      color: @brownish;
    }
  }

  // Ruby embed code in a Slim template
  // Example : #id This embed #{ ruby_code(42) } informations !
  &.syntax--section.syntax--embedded {
    color: @redish;
  }
}

// The | character in a lambda's params for instance
.syntax--variable {
  color: @redish;

  // The instance variable name
  &.syntax--instance,
  // The @ sign before the instance variable name
  .syntax--punctuation.syntax--variable {
    color: @purpleish;
  }

  // The | character in lambda's params
  &.syntax--punctuation.syntax--separator {
    color: darken(@syntax-text-color, 20);
  }

  // Block params, between the two pipes, like |variable|
  &.syntax--other.syntax--block {
    color: @syntax-text-color;
  }

  &.syntax--interpolation {
    color: @purpleish;
  }

  &.syntax--parameter.syntax--function {
    color: @syntax-text-color;
  }

  &.syntax--language.syntax--self {
    color: darken(@syntax-text-color, 20);
  }
}

.syntax--support {
  // Ruby constants in caps
  // Class names
  &.syntax--class {
    color: lighten(@redish, 15);
  }

  // Method calls like "render", "content_for", etc. in rails' views
  // or select gsub etc. in ruby code
  //
  // Somewhere in the CSS there is an !important on .syntax--support.syntax--function
  // I can't find it but it overwrite this rule
  &.syntax--function {
    color: @syntax-text-color !important;
  }
}

.syntax--support.syntax--function.syntax--kernel.syntax--ruby {
  color: @purpleish;
}