@enhance/styles - npm Package Compare versions

Comparing version 5.1.0 to 6.0.0

config.json

@@ -28,16 +28,11 @@ {
     "dark": "#343a40",
-    "primary": "#007bff",
-    "secondary": "#6c757d",
-    "success": "#28a745",
-    "info": "#17a2b8",
-    "warning": "#ffc107",
-    "error": "#dc3545"
+    "accent": "#007aff",
+    "primary": "#007aff"
   },
   "color": {
-    "crimson": "#eb0052",
-    "muted": "#6c757d",
-    "white": "#fff"
+    "error": "#ff3b2f",
+    "warn": "#ffcc02",
+    "success": "#35c759"
   },
   "properties": {
-    "gradient": "linear-gradient(var(--primary), var(--secondary))"
   },
@@ -44,0 +39,0 @@ "grid": {

package.json

 {
   "name": "@enhance/styles",
-  "version": "5.1.0",
+  "version": "6.0.0",
   "description": "Functional utility classes",
@@ -5,0 +5,0 @@ "main": "index.mjs",

README.md

@@ -106,3 +106,3 @@ # enhance-styles
 Colors can be named however you like.
-Colors included in the theme seting will have a color scale generated.
+Colors included in the theme setting will have a color scale generated.
 It is recommended to pick a color, then choose a middle lightness as the basis of the scale so as to maximize the amount of steps in the scale that are not white or black.
@@ -112,17 +112,26 @@ You can choose your naming convention.
 Material like themes will choose a theme color name i.e. 'indigo'
-There are two special names, light and dark. These will not have a scale generated.
+There are special names, light and dark, accent and accent-contrast. These will not have a scale generated and will be used as the basis for the default theme. The default theme will adjust to user set dark and light modes.
 - `light` is meant to be used as a light text color
 - `dark` is meant to be used as a dark text color
+- `accent` will be set as the [`accent-color`](https://developer.mozilla.org/en-US/docs/Web/CSS/accent-color) for the document and will be reflected in input and focus styling.
+- `accent-contrast` will be used as the text color used with accented backgrounds. This color should meet accessibility guidelines for contrast.
 
-The default theme uses a Boostrap like naming convention
-- light "#fff"
-- dark "#222"
-- primary "#1f74d6"
-- secondary "#7327ce"
-- success "#2cdd93"
-- info "#2196f3"
-- warning "#ffeb3b"
-- error "#e21893"
+## UPGRADE GUIDE
+If you want to restore the default Boostrap theme colors the copy and paste the code below into your `config.json`
+```json
+"theme": {
+  "accent": "#007AFF",
+  "accent-cotrast": "#fff",
+  "light": "#f8f9fa",
+  "dark": "#343a40",
+  "primary": "#007bff",
+  "secondary": "#6c757d",
+  "success": "#28a745",
+  "info": "#17a2b8",
+  "warning": "#ffc107",
+  "error": "#dc3545"
+}
+```
 
-These theme scales are intended to give you enough colors for all use cases including hover, disabled, active and visited states.
+Theme scales are intended to give you enough colors for all use cases including hover, disabled, active and visited states.
 
@@ -129,0 +138,0 @@ #### example color theme scale

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

74178

increased by2.27%

Lines of code

1553

increased by1.64%

Number of lines in readme file

174

increased by5.45%

No dependency changes