@aesthetic/addon-mixins - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

dts/types.d.ts

@@ -1,2 +0,2 @@
-import { BorderSize, ColorShade, MixinBuiltIn, PaletteType, ShadowSize, TextSize } from '@aesthetic/system';
+import { BorderSize, ColorShade, Mixin, PaletteType, ShadowSize, TextSize } from '@aesthetic/system';
 export interface BackgroundOptions {
@@ -38,25 +38,25 @@ palette?: PaletteType;
 declare module '@aesthetic/system' {
-    interface MixinUtil<T extends object, O extends object = object> {
-        background: MixinBuiltIn<T, BackgroundOptions>;
-        border: MixinBuiltIn<T, BorderOptions>;
-        foreground: MixinBuiltIn<T, ForegroundOptions>;
-        heading: MixinBuiltIn<T, HeadingOptions>;
-        hideCompletely: MixinBuiltIn<T>;
-        hideOffscreen: MixinBuiltIn<T>;
-        hideVisually: MixinBuiltIn<T>;
-        resetButton: MixinBuiltIn<T, ResetButtonOptions>;
-        resetInput: MixinBuiltIn<T>;
-        resetList: MixinBuiltIn<T>;
-        resetMedia: MixinBuiltIn<T>;
-        resetTypography: MixinBuiltIn<T>;
-        root: MixinBuiltIn<T>;
-        shadow: MixinBuiltIn<T, ShadowOptions>;
-        text: MixinBuiltIn<T, TextOptions>;
-        textBreak: MixinBuiltIn<T>;
-        textTruncate: MixinBuiltIn<T>;
-        textWrap: MixinBuiltIn<T>;
-        uiBox: MixinBuiltIn<T, UIBoxOptions>;
-        uiInteractive: MixinBuiltIn<T, UIInteractiveOptions>;
+    interface Mixins<T extends object> {
+        background: Mixin<T, BackgroundOptions>;
+        border: Mixin<T, BorderOptions>;
+        foreground: Mixin<T, ForegroundOptions>;
+        heading: Mixin<T, HeadingOptions>;
+        hideCompletely: Mixin<T>;
+        hideOffscreen: Mixin<T>;
+        hideVisually: Mixin<T>;
+        resetButton: Mixin<T, ResetButtonOptions>;
+        resetInput: Mixin<T>;
+        resetList: Mixin<T>;
+        resetMedia: Mixin<T>;
+        resetTypography: Mixin<T>;
+        root: Mixin<T>;
+        shadow: Mixin<T, ShadowOptions>;
+        text: Mixin<T, TextOptions>;
+        textBreak: Mixin<T>;
+        textTruncate: Mixin<T>;
+        textWrap: Mixin<T>;
+        uiBox: Mixin<T, UIBoxOptions>;
+        uiInteractive: Mixin<T, UIInteractiveOptions>;
     }
 }
 //# sourceMappingURL=types.d.ts.map

esm/index.js

@@ -118,3 +118,3 @@ function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
   return this.mixin.resetTypography({
-    color: this.var('palette-neutral-fg-base'),
+    color: this.var('palette-neutral-text'),
     letterSpacing: this.var("heading-l" + level + "-letter-spacing"),
@@ -191,3 +191,3 @@ lineHeight: this.var("heading-l" + level + "-line-height"),
     backgroundColor: this.var('palette-neutral-color-00'),
-    color: this.var('palette-neutral-fg-base'),
+    color: this.var('palette-neutral-text'),
     fontFamily: this.var('typography-font-text'),
@@ -243,3 +243,3 @@ fontSize: this.var('typography-root-text-size'),
   return this.mixin.resetTypography({
-    color: this.var('palette-neutral-fg-base'),
+    color: this.var('palette-neutral-text'),
     fontFamily: this.var('typography-font-text'),
@@ -313,19 +313,24 @@ fontSize: this.var("text-" + size + "-size"),
   return {
-    color: this.var("palette-" + palette + "-color-00"),
-    backgroundColor: this.var("palette-" + palette + "-color-40"),
+    color: this.var("palette-" + palette + "-fg-base"),
+    backgroundColor: this.var("palette-" + palette + "-bg-base"),
     borderColor: this.var("palette-" + palette + "-color-50"),
     cursor: 'pointer',
     ':focus': {
+      color: this.var("palette-" + palette + "-fg-focused"),
+      backgroundColor: this.var("palette-" + palette + "-bg-focused"),
       borderColor: this.var("palette-" + palette + "-color-60")
     },
     ':hover': {
-      backgroundColor: this.var("palette-" + palette + "-color-60"),
+      color: this.var("palette-" + palette + "-fg-hovered"),
+      backgroundColor: this.var("palette-" + palette + "-bg-hovered"),
       borderColor: this.var("palette-" + palette + "-color-70")
     },
     ':active': {
-      backgroundColor: this.var("palette-" + palette + "-color-50"),
+      color: this.var("palette-" + palette + "-fg-selected"),
+      backgroundColor: this.var("palette-" + palette + "-bg-selected"),
       borderColor: this.var("palette-" + palette + "-color-60")
     },
     ':disabled': {
-      backgroundColor: this.var("palette-" + palette + "-color-20"),
+      color: this.var("palette-" + palette + "-fg-disabled"),
+      backgroundColor: this.var("palette-" + palette + "-bg-disabled"),
       borderColor: this.var("palette-" + palette + "-color-30"),
@@ -332,0 +337,0 @@ cursor: 'default'

lib/index.js

@@ -121,3 +121,3 @@ 'use strict';
   return this.mixin.resetTypography({
-    color: this.var('palette-neutral-fg-base'),
+    color: this.var('palette-neutral-text'),
     letterSpacing: this.var("heading-l" + level + "-letter-spacing"),
@@ -194,3 +194,3 @@ lineHeight: this.var("heading-l" + level + "-line-height"),
     backgroundColor: this.var('palette-neutral-color-00'),
-    color: this.var('palette-neutral-fg-base'),
+    color: this.var('palette-neutral-text'),
     fontFamily: this.var('typography-font-text'),
@@ -246,3 +246,3 @@ fontSize: this.var('typography-root-text-size'),
   return this.mixin.resetTypography({
-    color: this.var('palette-neutral-fg-base'),
+    color: this.var('palette-neutral-text'),
     fontFamily: this.var('typography-font-text'),
@@ -316,19 +316,24 @@ fontSize: this.var("text-" + size + "-size"),
   return {
-    color: this.var("palette-" + palette + "-color-00"),
-    backgroundColor: this.var("palette-" + palette + "-color-40"),
+    color: this.var("palette-" + palette + "-fg-base"),
+    backgroundColor: this.var("palette-" + palette + "-bg-base"),
     borderColor: this.var("palette-" + palette + "-color-50"),
     cursor: 'pointer',
     ':focus': {
+      color: this.var("palette-" + palette + "-fg-focused"),
+      backgroundColor: this.var("palette-" + palette + "-bg-focused"),
       borderColor: this.var("palette-" + palette + "-color-60")
     },
     ':hover': {
-      backgroundColor: this.var("palette-" + palette + "-color-60"),
+      color: this.var("palette-" + palette + "-fg-hovered"),
+      backgroundColor: this.var("palette-" + palette + "-bg-hovered"),
       borderColor: this.var("palette-" + palette + "-color-70")
     },
     ':active': {
-      backgroundColor: this.var("palette-" + palette + "-color-50"),
+      color: this.var("palette-" + palette + "-fg-selected"),
+      backgroundColor: this.var("palette-" + palette + "-bg-selected"),
       borderColor: this.var("palette-" + palette + "-color-60")
     },
     ':disabled': {
-      backgroundColor: this.var("palette-" + palette + "-color-20"),
+      color: this.var("palette-" + palette + "-fg-disabled"),
+      backgroundColor: this.var("palette-" + palette + "-bg-disabled"),
       borderColor: this.var("palette-" + palette + "-color-30"),
@@ -335,0 +340,0 @@ cursor: 'default'

package.json

 {
   "name": "@aesthetic/addon-mixins",
-  "version": "0.2.3",
+  "version": "0.2.4",
   "description": "CSS-in-JS mixins for the Aesthetic design system.",
@@ -13,3 +13,8 @@ "keywords": [
   ],
-  "repository": "https://github.com/aesthetic-suite/framework/tree/master/packages/addon-mixins",
+  "repository": {
+    "type": "git",
+    "url": "[e-mail]:aesthetic-suite/framework.git",
+    "directory": "packages/addon-mixins"
+  },
+  "author": "Miles Johnson",
   "license": "MIT",
@@ -28,4 +33,8 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@aesthetic/utils": "^0.5.2"
+    "@aesthetic/utils": "^0.6.0"
   },
+  "devDependencies": {
+    "@aesthetic/sss": "^0.6.0",
+    "@aesthetic/system": "^0.6.0"
+  },
   "funding": {
@@ -38,3 +47,3 @@ "type": "ko-fi",
   },
-  "gitHead": "3395168a23e54175b492c20c91eb33ddbbba3630"
+  "gitHead": "ea906850a7bd7f911a5d05cc79a811253630f94c"
 }

Fixed alerts

No contributors or author data

Maintenance

Package does not specify a list of contributors or an author in package.json.

Found 1 instance in 1 package

No repository

Supply chain risk

Package does not have a linked source code repository. Without this field, a package will have no reference to the location of the source code use to generate the package.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

56418

increased by2.18%

Lines of code

787

increased by1.29%

Number of low maintenance alerts

1

decreased by-50%

Number of low supply chain risk alerts

16

decreased by-5.88%

Worsened metrics

Dev dependency count

2

increased byInfinity%

Dependency changes

• + Added@aesthetic/utils@0.6.3(transitive)

• - Removed@aesthetic/utils@0.5.2(transitive)

• Updated@aesthetic/utils@^0.6.0