livingstyleguide 2.0.0.pre.2 → 2.0.0.pre.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA1:
-  metadata.gz: 449f49344b6ba3da4f7f40904374e6e1475c1ab8
-  data.tar.gz: 2fe7b4c46f9051d9843bc6a9c50736739cf0ac57
+  metadata.gz: a121cfdb20c0610f7812247a4566ae7143f97ca4
+  data.tar.gz: 83af58f208d28380bfb9e38546c6c1612313e407
 SHA512:
-  metadata.gz: 14246bdf8204e3cb21e7fce5365812db0a67f8526e30664c9f7a3cba422bde47087b243495a62ee257b1c36c90bdd65f117d399f63a0fb2f9e90f5d556056927
-  data.tar.gz: 8dd2a4c1892812ab483c0dade82fa4d2e921a837cab489bf8742d7d32f99d822fd25389c887e5289dead692028d81298bb10e1c63179783b99f55366de3b4ad9
+  metadata.gz: c41a5dd16192b78f8c42e2ceb2753d8e83ef9e32e767495bd68fa0f22ce0a6674f4eb82d8aa63a0dd2f208a75e03265cb175b8152d2b55f986c7b53ce1e467cb
+  data.tar.gz: 399f81fd8d0a3e4d358d65294790e8cf21ed8713c8d3bc721d2fc671d8609ef149f355b75f363933cb983a27fb31477ed31937ecc35d4961db93f955e5887c32

data/lib/livingstyleguide/commands/colors.rb

@@ -1,28 +1,34 @@
+require "digest/sha1"
+
 LivingStyleGuide.command :colors do |arguments, options, content|
-  colors = content.split(/\n+/).map{ |l| l.strip.split(/\s+/) }
+  colors = content.split(/\n+/).map{ |l| l.strip.split(/(?<![,\(])\s+(?!\))/) }
   columns = colors.map{ |l| l.size }.max
   colors = colors.flatten
 
+  def color_class(color)
+    "lsg--color-" + Digest::SHA1.hexdigest(color)[0..7]
+  end
+
   document.scss << <<-SCSS
-    $lsg--variables: () !default;
-    $lsg--variables: join(
-      $lsg--variables, (#{
-        colors.reject{ |c| c == '-' }.map do |variable|
-          %Q("#{variable}": #{variable})
+    $lsg--colors: () !default;
+    $lsg--colors: join(
+      $lsg--colors, (#{
+        colors.reject{ |c| c == '-' }.map do |color|
+          %Q("#{color_class(color)}": #{color})
         end.join(', ')
       })
     );
   SCSS
 
-  colors_html = colors.map do |variable|
-    if variable == "-"
+  colors_html = colors.map do |color|
+    if color == "-"
       %Q(<li class="lsg--color-swatch -lsg-empty"></li>\n)
     else
-      unless variable =~ /^(#[0-9a-f]{3,6}|[a-z]+)$/
-        source = %Q(<span class="lsg--color-swatch-source">#{variable}</span>)
+      unless color =~ /^(#[0-9a-f]{3,6}|[a-z]+)$/
+        source = %Q(<span class="lsg--color-swatch-source">#{color}</span>)
       end
-      value = %Q(<span class="lsg--color-swatch-value #{variable}"></span>)
-      %Q(<li class="lsg--color-swatch #{variable}">#{source}#{value}</li>\n)
+      value = %Q(<span class="lsg--color-swatch-value #{color_class(color)}"></span>)
+      %Q(<li class="lsg--color-swatch #{color_class(color)}">#{source}#{value}</li>\n)
     end
   end.join("\n")
   %(<ul class="lsg--color-swatches -lsg-#{columns}-columns">\n#{colors_html}\n</ul>\n)

data/lib/livingstyleguide/commands/css.rb

@@ -6,6 +6,8 @@ LivingStyleGuide.command :css do |arguments, options, css|
     end
     document.depend_on file
     document.scss << %Q(@import "#{file}";\n)
+  elsif options[:scope] == "global"
+    document.scss << css
   else
     scope = "#" + document.id.gsub(/[\/\.]/, '\\\\\0')
     scoped_css = css.gsub(/(?<=\}|\A|;)[^@\};]+?(?=\{)/) do |selector|

data/lib/livingstyleguide/commands/sass.rb

@@ -8,8 +8,11 @@ LivingStyleGuide.command :scss do |arguments, options, scss|
     end
     document.depend_on file
     document.scss << %Q(@import "#{file}";\n)
+  elsif options[:scope] == "global"
+    document.scss << scss
   else
-    document.scss << "##{document.id.gsub(/[\/\.]/, '\\\\\0')} {\n#{scss}\n}\n"
+    id = document.id.gsub(/[\/\.]/, '\\\\\0')
+    document.scss << "##{id} {\n#{scss}\n}\n"
   end
   nil
 end
@@ -17,14 +20,10 @@ end
 LivingStyleGuide.command :sass do |arguments, options, sass|
   file = arguments.first
   if file
-    if document.file
-      file = File.join(File.dirname(document.file), file)
-    end
-    document.depend_on file
-    document.scss << %Q(@import "#{file}";\n)
+    scss(arguments, options, nil)
   else
-    scss = Sass::Engine.new(sass).to_tree.to_scss
-    document.scss << "##{document.id.gsub(/[\/\.]/, '\\\\\0')} {\n#{scss}\n}\n"
+    converted = Sass::Engine.new(sass).to_tree.to_scss
+    scss(arguments, options, converted)
   end
   nil
 end

data/lib/livingstyleguide/version.rb

@@ -1,3 +1,3 @@
 module LivingStyleGuide
-  VERSION = "2.0.0.pre.2"
+  VERSION = "2.0.0.pre.3"
 end

data/stylesheets/_livingstyleguide.scss

@@ -101,5 +101,4 @@ $lsg--button-width: $lsg--button-height !default;
 @import "livingstyleguide/color-swatches";
 @import "livingstyleguide/toggle-code";
 @import "livingstyleguide/before";
-@import "livingstyleguide/variables";
 @import "livingstyleguide/search-box";

data/stylesheets/livingstyleguide/_color-swatches.scss

@@ -117,3 +117,39 @@
     width: $size;
   }
 }
+
+$lsg--colors: () !default;
+
+@each $color-class, $value in $lsg--colors {
+  $value: null !default;
+
+  @if $value != null {
+    .#{$color-class} {
+      @if (lightness($value) < 50%) {
+        @if (lightness($lsg--background-color) > lightness($lsg--color)) {
+          color: $lsg--background-color;
+        }
+        @else {
+          color: $lsg--color;
+        }
+      }
+      @else {
+        @if (lightness($lsg--background-color) > lightness($lsg--color)) {
+          color: $lsg--color;
+        }
+        @else {
+          color: $lsg--background-color;
+        }
+      }
+
+      &::before {
+        background-color: $value;
+      }
+
+      &::after {
+        @extend %lsg--code !optional;
+        content: "#{inspect($value)}";
+      }
+    }
+  }
+}

data/stylesheets/livingstyleguide/_functions.scss

@@ -6,26 +6,3 @@
       $color-b 0)
     repeat 0 0/#{$size} #{$size};
 }
-
-@function lsg--str-replace($string, $search, $replace: "") {
-  $index: str-index($string, $search);
-
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace +
-            lsg--str-replace(
-              str-slice($string, $index + str-length($search)),
-              $search, $replace
-            );
-  }
-
-  @return $string;
-}
-
-$lsg--escapes: ("(": "\\(", ")": "\\)", "$": "\\$", "#": "\\#");
-
-@function lsg--escape-selector($selector) {
-  @each $before, $after in $lsg--escapes {
-    $selector: lsg--str-replace($selector, $before, $after);
-  }
-  @return $selector;
-}

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: livingstyleguide
 version: !ruby/object:Gem::Version
-  version: 2.0.0.pre.2
+  version: 2.0.0.pre.3
 platform: ruby
 authors:
 - Nico Hagenburger
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2016-05-12 00:00:00.000000000 Z
+date: 2016-05-13 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: minisyntax
@@ -274,7 +274,6 @@ files:
 - stylesheets/livingstyleguide/_reset.scss
 - stylesheets/livingstyleguide/_search-box.scss
 - stylesheets/livingstyleguide/_toggle-code.scss
-- stylesheets/livingstyleguide/_variables.scss
 homepage: http://livingstyleguide.org
 licenses: []
 metadata: {}

data/stylesheets/livingstyleguide/_variables.scss

@@ -1,39 +0,0 @@
-$lsg--variables: () !default;
-
-@each $variable, $value in $lsg--variables {
-  $value: null !default;
-
-  @if $value != null {
-    $selector: lsg--escape-selector($variable);
-
-    .#{$selector} {
-      @if type-of($value) == color {
-        @if (lightness($value) < 50%) {
-          @if (lightness($lsg--background-color) > lightness($lsg--color)) {
-            color: $lsg--background-color;
-          }
-          @else {
-            color: $lsg--color;
-          }
-        }
-        @else {
-          @if (lightness($lsg--background-color) > lightness($lsg--color)) {
-            color: $lsg--color;
-          }
-          @else {
-            color: $lsg--background-color;
-          }
-        }
-
-        &::before {
-          background-color: $value;
-        }
-      }
-
-      &::after {
-        @extend %lsg--code !optional;
-        content: "#{inspect($value)}";
-      }
-    }
-  }
-}