cascading-color-systems - npm Package Compare versions

Comparing version 0.1.0-beta.10 to 0.1.0-beta.11

CHANGELOG.md

 # Changelog
 
+## 0.1.0-beta.11 - 2019/12/31
+
+This release adds support for arbitrary color names,
+allowing you to define more complex and customized cascading themes.
+
+- BREAKING: Replaced individual `$*-hue` settings with a combined `$hues` map
+  of (`string`) color name keys with (`number` | `null`) hue values.
+  This allows the tool to generate any number of colors.
+  The default `('prime', 'accent', 'neutral')` shorthand
+  creates identical default settings to previous releases.
+  Acceptable shorthands:
+  - a single `number` | `null` value will be assigned a key: `prime`
+  - a `string` | `list` (of strings) will generate keys with `null` values
+- BREAKING: Added a `$colors` list argument (first) in both the
+  `colors()` and `gradient()` mixins --
+  set to the list of `$hues` map-keys by default
+- BREAKING: Since `accent` colors are no longer hard-coded,
+  the built-in themes have replaced `--ccs-accent--theme` settings
+  with more generic `--ccs-theme--1` and `--ccs-theme--2` --
+  which can be assigned to other color names as needed.
+- NEW: Any color with `neutral` in the name
+  will use the neutral saturation,
+  rather than the default saturation
+
 ## 0.1.0-beta.10 - 2019/12/5
@@ -4,0 +28,0 @@

package.json

 {
   "name": "cascading-color-systems",
-  "version": "0.1.0-beta.10",
+  "version": "0.1.0-beta.11",
   "description": "generate dynamic color palettes with custom properties",
@@ -5,0 +5,0 @@ "main": "dist.js",

README.md

@@ -66,31 +66,14 @@ # Cascading Color Systems
 as CSS custom properties
-(set by Sass when applicable):
+(set by Sass when applicable) eg:
 
 ```scss
 [data-ccs='root'] {
-  --ccs-prime--config: #{$prime-hue or 330};
-  --ccs-accent--config: #{$accent-hue or null};
-  --ccs-lightness--config: #{$lightness or null};
-  --ccs-saturation--config: #{$saturation or null};
-  --ccs-contrast--config: #{$contrast or null};
-  --ccs-fade-background--config: #{$fade-background};
+  --ccs-prime--config: 330;
+  --ccs-lightness--config: 50%;
+  --ccs-saturation--config: 50%;
+  --ccs-contrast--config: 50%;
+  --ccs-fade-background--config: 0.9;
 }
 ```
 
-This also configures a light/dark-mode toggle,
-and fallback values for both modes:
-
-```scss
-// fallback values, in case variables are not supported
-[data-ccs='root'] {
-  background-color: $fallback-light;
-  color: $fallback-dark;
-
-  @media (prefers-color-scheme: dark) {
-    background-color: $fallback-dark;
-    color: $fallback-light;
-  }
-}
-```
-
 Add the `data-ccs='root'` attribute to your `html` element
@@ -111,13 +94,48 @@ in order to make your Cascading Colors configuration
 
-This attribute provides your base colors as custom properties:
+We configure the default `color` and `background-color` settings:
 
-- `--ccs-prime`, `--ccs-accent`:
-  Prime and accent hues, with base lightness and saturation
-- `--ccs-neutral`:
-  The neutral hue gets base lightness
-  and full-contrast saturation
-- `--ccs-<prime | accent | neutral >--fg-full` :
-  All three hues get a full-contrast foreground
-- `--ccs-<prime | accent | neutral >--bg-full` :
-  All three hues get a full-contrast background
+```scss
+[data-ccs-colors] {
+  background-color: var(--ccs-background, var(--ccs--bg-full));
+  color: var(--ccs-color, var(--ccs--fg-full));
+}
+```
+
+Along with fallback values for light/dark modes,
+in case CSS custom properties are not supported:
+
+```scss
+[data-ccs-colors],
+[data-ccs-colors='light'] {
+  background-color: $fallback-light;
+  color: $fallback-dark;
+}
+
+[data-ccs-colors='invert'],
+[data-ccs-colors='dark'] {
+  background-color: $fallback-dark;
+  color: $fallback-light;
+}
+```
+
+You can override the default colors and backgrounds
+by defining `--ccs-color` and `--ccs-background`:
+
+```scss
+[data-ccs-colors] {
+  --ccs-background: var(--ccs-neutral--bg-full);
+  --ccs-color: var(--ccs-neutral--fg-full);
+}
+```
+
+This attribute generates all your colors as custom properties:
+
+- `--ccs-prime`, `--ccs-*`:
+  Colors generated from the given `$hues`, `$saturation`, and `$lightness` --
+  along with any `neutral` colors,
+  which will use their own customizable (low) `$saturation`
+- `--ccs-*--fg-full` :
+  All color hues get a full-contrast foreground
+- `--ccs-*--bg-full` :
+  All color hues get a full-contrast background
 - `--ccs--bg-full` white or black, depending on light/dark mode
@@ -129,14 +147,5 @@ - `--ccs--fg-full` white or black, depending on light/dark mode
 
-- `--ccs-h--prime`:
-  the calculated primary hue,
-  based on user-settings, theme-settings, and global configuration
-- `--ccs-h--accent`:
-  the calculated accent hue,
-  based on theme-settings, and global configuration
-  (there is currently no direct user input for accent hue)
-- `--ccs-h--neutral`:
-  the calculated neutral hue,
-  based on theme-settings and global configuration;
-  generally either `--ccs-h--prime` (the default)
-  or `--ccs-h--accent`
+- `--ccs-h--*`:
+  the calculated hue for each color,
+  afterresolving user-settings, theme-settings, and global configuration
 - `--ccs-contrast`:
@@ -208,3 +217,3 @@ the calculated contrast range
 In most cases,
-you'll want to define the `$prime-hue`,
+you'll want to define the `prime` hue,
 and possibly a few other options --
@@ -216,3 +225,3 @@ and then trigger a build from the module itself.
 @use "../../node_modules/cascading-color-systems/" as ccs with (
-  $prime-hue: 0,
+  $hues: 120, // shorthand for setting the prime hue only
   $saturation: 70%,
@@ -219,0 +228,0 @@ $contrast: 48%,

No alert changes

Improved metrics

Total package byte prevSize

51896

increased by6.48%

Lines of code

390

increased by0.78%

Number of lines in readme file

305

increased by3.04%

No dependency changes