chroma-sass 1.0.0.beta.3 → 1.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/README.md +6 -3
- data/chroma-sass.gemspec +2 -2
- data/sass/_chroma.scss +1 -0
- data/sass/chroma/_colour.scss +1 -1
- data/sass/chroma/_functions.scss +52 -0
- data/sass/chroma/_internals.scss +4 -1
- data/sass/chroma/_skin.scss +71 -0
- data/sass/chroma/_variables.scss +2 -0
- metadata +7 -6
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f8985848e269073f03fd0cd6ddf52227cbed3dc9
|
4
|
+
data.tar.gz: 72cde7143265b4cfe705ec41e32f8dd1541366bd
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: b67c868cd3824776ee517a14d2ab52b8ccf315401194af5c3e319884ea506e1440d6e24d22acf5a0689b0cc9eeeb0a3e2f0cd52a5659e59201c57d62bbb42222
|
7
|
+
data.tar.gz: 42b4faa8bfbf1aefa8b4a8a57cb8419d71242aef39c6ab07299813f6a7f3e16ef45c904d574152dad74f4284ed6ed2a3611b97bca183b64c1bed3c29605c84b8
|
data/README.md
CHANGED
@@ -4,8 +4,7 @@ Chroma is a Sass library that manages a project's color names, color variations,
|
|
4
4
|
|
5
5
|
## USAGE
|
6
6
|
|
7
|
-
Betters docs are coming, but here's some documentation in the form of example
|
8
|
-
code.
|
7
|
+
~~Betters docs are coming, but~~ Better docs are now available at http://johnalbin.github.io/chroma/ and here's some quick documentation in the form of example code.
|
9
8
|
|
10
9
|
```scss
|
11
10
|
@import "chroma";
|
@@ -82,7 +81,7 @@ gem install chroma-sass
|
|
82
81
|
If you are using Bundler (and you should!) then you can add it to an existing project by editing the project's Gemfile and adding this line:
|
83
82
|
|
84
83
|
```ruby
|
85
|
-
gem 'chroma-sass', '~> 1.0.0
|
84
|
+
gem 'chroma-sass', '~> 1.0.0'
|
86
85
|
```
|
87
86
|
|
88
87
|
If you are using Compass, edit your project's config.rb and add this line:
|
@@ -101,6 +100,10 @@ You can then start using Chroma in your Sass files. Just add this line to one of
|
|
101
100
|
|
102
101
|
* Sass 3.4.0 or later
|
103
102
|
|
103
|
+
Note: libsass 3.2.5 or earlier does not work with chroma-sass due to a bug in
|
104
|
+
libsass. ☹ libsass 3.3.0 should fix the bug, but it has not been tested. See
|
105
|
+
https://github.com/JohnAlbin/chroma/issues/10
|
106
|
+
|
104
107
|
## LICENSE
|
105
108
|
|
106
109
|
Available under the GPL v2 license. See [LICENSE.txt](https://github.com/JohnAlbin/chroma/blob/master/LICENSE.txt).
|
data/chroma-sass.gemspec
CHANGED
@@ -9,8 +9,8 @@ Gem::Specification.new do |spec|
|
|
9
9
|
spec.homepage = 'http://github.com/JohnAlbin/chroma'
|
10
10
|
spec.rubyforge_project =
|
11
11
|
|
12
|
-
spec.version = '1.0.0
|
13
|
-
spec.date = '2015-08-
|
12
|
+
spec.version = '1.0.0'
|
13
|
+
spec.date = '2015-08-31'
|
14
14
|
spec.licenses = ['GPL-2']
|
15
15
|
|
16
16
|
spec.authors = ['John Albin Wilkins']
|
data/sass/_chroma.scss
CHANGED
data/sass/chroma/_colour.scss
CHANGED
@@ -60,7 +60,7 @@ $_chroma-spelling: 'colour';
|
|
60
60
|
//
|
61
61
|
// See `add-colors()` for the documentation.
|
62
62
|
//
|
63
|
-
// Style guide:
|
63
|
+
// Style guide: colour.add-colours
|
64
64
|
@function add-colours($scheme, $colours: null) {
|
65
65
|
@return add-colors($scheme, $colours);
|
66
66
|
}
|
data/sass/chroma/_functions.scss
CHANGED
@@ -2,6 +2,8 @@
|
|
2
2
|
//
|
3
3
|
// The main module for Chroma.
|
4
4
|
//
|
5
|
+
// Weight: -1
|
6
|
+
//
|
5
7
|
// Style guide: functions
|
6
8
|
|
7
9
|
// Import the global variables and internal functions needed by all of Chroma.
|
@@ -311,3 +313,53 @@ $chroma: _chroma-init();
|
|
311
313
|
|
312
314
|
@return $chroma;
|
313
315
|
}
|
316
|
+
|
317
|
+
// define-skin($scheme, $selector)
|
318
|
+
//
|
319
|
+
// Defines that the specified color scheme can be used as a skin when the
|
320
|
+
// given parent selector matches our HTML. See the `skin()` mixin.
|
321
|
+
//
|
322
|
+
// Usage:
|
323
|
+
// ```scss
|
324
|
+
// $chroma: define-skin('scheme1', '.is-scheme1-skin');
|
325
|
+
// ```
|
326
|
+
//
|
327
|
+
// $scheme - Name of the color scheme to use when the `$selector` matches our
|
328
|
+
// HTML.
|
329
|
+
// $selector - A CSS parent selector that triggers the use of the defined
|
330
|
+
// `$scheme` instead of the default color scheme. We recommend using
|
331
|
+
// a simple CSS selector like `.is-CUSTOMNAME-skin`.
|
332
|
+
//
|
333
|
+
// Style guide: skin.define-skin
|
334
|
+
@function define-skin($scheme, $selector) {
|
335
|
+
$skins: map-merge(
|
336
|
+
map-get($chroma, 'skins'),
|
337
|
+
($scheme: $selector)
|
338
|
+
);
|
339
|
+
|
340
|
+
@return map-merge(
|
341
|
+
$chroma,
|
342
|
+
('skins': $skins)
|
343
|
+
);
|
344
|
+
}
|
345
|
+
|
346
|
+
// define-skins($skins)
|
347
|
+
//
|
348
|
+
// Helper function to define multiple skins at once.
|
349
|
+
//
|
350
|
+
// Usage:
|
351
|
+
// ```scss
|
352
|
+
// $chroma: define-skins((
|
353
|
+
// 'scheme1': '.is-scheme1-skin',
|
354
|
+
// 'scheme2': '.is-scheme2-skin',
|
355
|
+
// 'scheme3': 'html > body.this-works-but-is.way.too.specific.IMHO',
|
356
|
+
// ));
|
357
|
+
// ```
|
358
|
+
//
|
359
|
+
// $skins - A list of color schemes and their
|
360
|
+
@function define-skins($skins) {
|
361
|
+
@each $scheme, $selector in $skins {
|
362
|
+
$chroma: define-skin($scheme, $selector) !global;
|
363
|
+
}
|
364
|
+
@return $chroma;
|
365
|
+
}
|
data/sass/chroma/_internals.scss
CHANGED
@@ -3,6 +3,8 @@
|
|
3
3
|
// Helper functions that query the internal data structure in $chroma. These are
|
4
4
|
// not part of the public API and are subject to change at any time.
|
5
5
|
//
|
6
|
+
// Weight: 10
|
7
|
+
//
|
6
8
|
// Style guide: internals
|
7
9
|
|
8
10
|
// Import the global variables needed by all of Chroma.
|
@@ -69,7 +71,7 @@
|
|
69
71
|
// _chroma-init()
|
70
72
|
//
|
71
73
|
// Private function that sets up the initial data structure of the $chroma
|
72
|
-
// variable.
|
74
|
+
// variable. Can be called repeatedly without damaging existing data.
|
73
75
|
//
|
74
76
|
// Style guide: internals._chroma-init
|
75
77
|
@function _chroma-init() {
|
@@ -81,6 +83,7 @@
|
|
81
83
|
'parent': false,
|
82
84
|
),
|
83
85
|
),
|
86
|
+
'skins': (),
|
84
87
|
'names': (),
|
85
88
|
);
|
86
89
|
}
|
@@ -0,0 +1,71 @@
|
|
1
|
+
// Skin module
|
2
|
+
//
|
3
|
+
// A "Skin" module for Chroma.
|
4
|
+
//
|
5
|
+
// Sometimes design and engineering requirements mean that we need to:
|
6
|
+
// - output the colors for default color scheme and one or more additional color
|
7
|
+
// schemes into the same CSS file
|
8
|
+
// - and to control which color scheme is used via a "global" CSS class name set
|
9
|
+
// on the web pages's `html` or `body` element.
|
10
|
+
//
|
11
|
+
// For example, the `.my-complexion` component may output a blue text color on
|
12
|
+
// most pages, but on pages with a `<html class="skin-wicked-witch">`, the
|
13
|
+
// `.my-complexion` component will output a green text color.
|
14
|
+
//
|
15
|
+
// The Skin module will help with this requirement.
|
16
|
+
//
|
17
|
+
// After defining your color schemes and their colors, you can define one or
|
18
|
+
// more of those schemes as skins while providing the proper CSS parent selector
|
19
|
+
// to use for that skin.
|
20
|
+
//
|
21
|
+
// Weight: -1
|
22
|
+
//
|
23
|
+
// Style guide: skin
|
24
|
+
|
25
|
+
@import "./functions";
|
26
|
+
|
27
|
+
// skin([$skins])
|
28
|
+
//
|
29
|
+
// Output the default color and all the colors needed for defined skins.
|
30
|
+
//
|
31
|
+
// Usage:
|
32
|
+
// ```scss
|
33
|
+
// h1 {
|
34
|
+
// @include skin() {
|
35
|
+
// color: color(heading);
|
36
|
+
// }
|
37
|
+
// }
|
38
|
+
// ```
|
39
|
+
//
|
40
|
+
// $skins - An optional list of color scheme names and selectors to use instead
|
41
|
+
// of the skins defined with `define-skin()`. The format of this list
|
42
|
+
// should match that of the `$skins` parameter in `define-skins()`.
|
43
|
+
//
|
44
|
+
// Style guide: skin.skin
|
45
|
+
@mixin skin($skins: null) {
|
46
|
+
@if type-of($skins) == 'null' {
|
47
|
+
$skins: map-get($chroma, 'skins');
|
48
|
+
}
|
49
|
+
|
50
|
+
// Save the current active scheme.
|
51
|
+
$original-active-scheme: $chroma-active-scheme;
|
52
|
+
|
53
|
+
// Output the default color property.
|
54
|
+
@content;
|
55
|
+
|
56
|
+
@if length($skins) == 0 {
|
57
|
+
@warn "skin() mixin used, but no skins have been defined in Chroma.";
|
58
|
+
}
|
59
|
+
|
60
|
+
// Output the color property for each scheme.
|
61
|
+
@each $scheme, $selector in $skins {
|
62
|
+
$chroma-active-scheme: $scheme !global;
|
63
|
+
|
64
|
+
#{$selector} & {
|
65
|
+
@content
|
66
|
+
}
|
67
|
+
}
|
68
|
+
|
69
|
+
// Restore the original active scheme.
|
70
|
+
$chroma-active-scheme: $original-active-scheme !global;
|
71
|
+
}
|
data/sass/chroma/_variables.scss
CHANGED
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: chroma-sass
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 1.0.0
|
4
|
+
version: 1.0.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- John Albin Wilkins
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2015-08-
|
11
|
+
date: 2015-08-31 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: sass
|
@@ -40,6 +40,7 @@ files:
|
|
40
40
|
- sass/chroma/_functions.scss
|
41
41
|
- sass/chroma/_internals.scss
|
42
42
|
- sass/chroma/_kss.scss
|
43
|
+
- sass/chroma/_skin.scss
|
43
44
|
- sass/chroma/_variables.scss
|
44
45
|
homepage: http://github.com/JohnAlbin/chroma
|
45
46
|
licenses:
|
@@ -56,12 +57,12 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
56
57
|
version: '0'
|
57
58
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
58
59
|
requirements:
|
59
|
-
- - "
|
60
|
+
- - ">="
|
60
61
|
- !ruby/object:Gem::Version
|
61
|
-
version:
|
62
|
+
version: '0'
|
62
63
|
requirements: []
|
63
|
-
rubyforge_project: 1.0.0
|
64
|
-
rubygems_version: 2.4.
|
64
|
+
rubyforge_project: 1.0.0
|
65
|
+
rubygems_version: 2.4.5.1
|
65
66
|
signing_key:
|
66
67
|
specification_version: 4
|
67
68
|
summary: Chroma is the Sass color manager.
|