cascading-color-systems - npm Package Compare versions

Comparing version 0.1.0-beta.6 to 0.1.0-beta.7

CHANGELOG.md

 # Changelog
 
+## 0.1.0-beta.7 - 2019/10/9
+
+- BREAKING: rename `[data-ccs="*-select"]` attributes
+  with nested form inputs to
+  `[data-ccs-field="*"]` and nested `[data-ccs-input="*"]`
+- BREAKING: rename `[data-ccs="unset"]` to `[data-ccs-input="unset"]`
+- BREAKING: rename `[data-ccs="invert"]` to `[data-ccs-input="mode"]`
+- Use [Hipocratic License](https://firstdonoharm.dev/)
+- Add root-level `_index.scss` for simpler Sass imports
+
 ## 0.1.0-beta.6 - 2019/10/6
@@ -4,0 +14,0 @@

dist.js

@@ -25,11 +25,11 @@ (function (global, factory) {
     const themeMenu = document.querySelector('[data-ccs="menu"]');
-    const modeToggle = document.querySelector('[data-ccs="invert"]');
-    const unsetBtn = document.querySelector('[data-ccs="unset"]'); // elements
+    const modeToggle = document.querySelector('[data-ccs-input="mode"]');
+    const unsetBtn = document.querySelector('[data-ccs-input="unset"]'); // elements
 
     const selectElements = {
-      theme: document.querySelector('[data-ccs="theme-select"] select'),
-      hue: document.querySelector('[data-ccs="hue-select"] input'),
-      sat: document.querySelector('[data-ccs="saturation-select"] input'),
-      light: document.querySelector('[data-ccs="lightness-select"] input'),
-      contrast: document.querySelector('[data-ccs="contrast-select"] input')
+      theme: document.querySelector('[data-ccs-input="theme"]'),
+      hue: document.querySelector('[data-ccs-input="hue"]'),
+      sat: document.querySelector('[data-ccs-input="saturation"]'),
+      light: document.querySelector('[data-ccs-input="lightness"]'),
+      contrast: document.querySelector('[data-ccs-input="contrast"]')
     }; // attributes
@@ -36,0 +36,0 @@

index.js

@@ -5,12 +5,12 @@ export default function () {
   const themeMenu = document.querySelector('[data-ccs="menu"]');
-  const modeToggle = document.querySelector('[data-ccs="invert"]');
-  const unsetBtn = document.querySelector('[data-ccs="unset"]');
+  const modeToggle = document.querySelector('[data-ccs-input="mode"]');
+  const unsetBtn = document.querySelector('[data-ccs-input="unset"]');
 
   // elements
   const selectElements = {
-    theme: document.querySelector('[data-ccs="theme-select"] select'),
-    hue: document.querySelector('[data-ccs="hue-select"] input'),
-    sat: document.querySelector('[data-ccs="saturation-select"] input'),
-    light: document.querySelector('[data-ccs="lightness-select"] input'),
-    contrast: document.querySelector('[data-ccs="contrast-select"] input'),
+    theme: document.querySelector('[data-ccs-input="theme"]'),
+    hue: document.querySelector('[data-ccs-input="hue"]'),
+    sat: document.querySelector('[data-ccs-input="saturation"]'),
+    light: document.querySelector('[data-ccs-input="lightness"]'),
+    contrast: document.querySelector('[data-ccs-input="contrast"]'),
   };
@@ -17,0 +17,0 @@

package.json

 {
   "name": "cascading-color-systems",
-  "version": "0.1.0-beta.6",
+  "version": "0.1.0-beta.7",
   "description": "generate dynamic color palettes with custom properties",
@@ -13,3 +13,3 @@ "main": "dist.js",
   ],
-  "license": "MIT",
+  "license": "MIT Hippocratic",
   "devDependencies": {
@@ -31,3 +31,3 @@ "@babel/cli": "^7.6.2",
     "commit": "yarn build",
-    "watch": "sass --watch site/sass/* site/css/*"
+    "watch": "sass --watch site/sass/:site/css/"
   },
@@ -34,0 +34,0 @@ "files": [

README.md

@@ -203,7 +203,2 @@ # Cascading Color Systems
 }
-
-[data-ccs-theme='contrast'] {
-  --ccs-contrast: 200%; /* override all other contrast settings */
-  --ccs-custom-contrast: none; /* hide [data-ccs="contrast-select"] */
-}
 ```
@@ -277,16 +272,29 @@
   we'll show them when the JS is available
-- `[data-ccs="invert"]`:
+- `[data-ccs-input="mode"]`:
   a button to toggle light/dark modes
-- `[data-ccs="unset"]`:
+- `[data-ccs-input="unset"]`:
   a button to unset all user preferences
   and clear related local storage
-- `[data-ccs="theme-select"] select`:
+- `[data-ccs-input="theme"]`:
   Allow users to select from available `theme` options
-- `[data-ccs="hue-select"] input`:
+- `[data-ccs-input="hue"]`:
   Allow users to change the primary hue
-- `[data-ccs="saturation-select"] input`:
+- `[data-ccs-input="saturation"]`:
   Allow users to adjust the baseline saturation
-- `[data-ccs="lightness-select"] input`:
+- `[data-ccs-input="lightness"]`:
   Allow users to adjust the baseline lightness
-- `[data-ccs="contrast-select"] input`:
+- `[data-ccs-input="contrast"]`:
   Allow users to adjust the contrast range
+
+Themes can also use the `[data-ccs-field]` on wrappers,
+to show and hide inputs/labels directly in the CSS
+based on a given theme.
+For example, a high-contrast theme
+might not accept `contrast` input:
+
+```scss
+[data-ccs-theme='contrast'] {
+  --ccs-contrast: 200%; /* override all other contrast settings */
+  --ccs-custom-contrast: none; /* hide [data-ccs-field="contrast"] */
+}
+```

New alerts

Misc. License Issues

License

(Experimental) A package's licensing information has fine-grained problems.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

41740

increased by3.14%

Number of package files

22

increased by4.76%

Lines of code

373

increased by0.81%

Number of lines in readme file

299

increased by2.75%

Worsened metrics

Number of medium license alerts

1

increased byInfinity%

No dependency changes