@ag.ds-next/core - npm Package Compare versions

Comparing version 4.0.0 to 4.1.0

CHANGELOG.md

 # @ag.ds-next/core
 
+## 4.1.0
+
+### Minor Changes
+
+- e4c7ceb5f: Added new hook `useBoxPalette` which returns the current palette for a specific DOM element
+
+### Patch Changes
+
+- def4b6687: Sort package.json files
+- c128d8632: Upgraded `@reach/auto-id`
+- 74ca5f4c6: Adjusted height and line-height of buttons and text inputs to align better to an 8px baseline grid.
+- 355806633: Change input height from `em` to `rem`
+
 ## 4.0.0
@@ -4,0 +17,0 @@

dist/ag.ds-next-core.cjs.prod.js

@@ -10,2 +10,3 @@ 'use strict';
 var _slicedToArray = require('@babel/runtime/helpers/slicedToArray');
+var autoId = require('@reach/auto-id');
 var facepaint = require('facepaint');
@@ -144,2 +145,3 @@
 var boxPaletteVars = {
+  palette: '--agds-palette',
   foregroundText: '--agds-foreground-text',
@@ -170,3 +172,3 @@ foregroundAction: '--agds-foreground-action',
   /*#__PURE__*/
-  react$1.css((_css = {}, _defineProperty(_css, boxPaletteVars.foregroundText, "var(".concat(themeVars.lightForegroundText, ")")), _defineProperty(_css, boxPaletteVars.foregroundAction, "var(".concat(themeVars.lightForegroundAction, ")")), _defineProperty(_css, boxPaletteVars.foregroundFocus, "var(".concat(themeVars.lightForegroundFocus, ")")), _defineProperty(_css, boxPaletteVars.foregroundMuted, "var(".concat(themeVars.lightForegroundMuted, ")")), _defineProperty(_css, boxPaletteVars.backgroundBody, "var(".concat(themeVars.lightBackgroundBody, ")")), _defineProperty(_css, boxPaletteVars.backgroundShade, "var(".concat(themeVars.lightBackgroundShade, ")")), _defineProperty(_css, boxPaletteVars.backgroundBodyAlt, "var(".concat(themeVars.lightBackgroundBodyAlt, ")")), _defineProperty(_css, boxPaletteVars.backgroundShadeAlt, "var(".concat(themeVars.lightBackgroundShadeAlt, ")")), _defineProperty(_css, boxPaletteVars.border, "var(".concat(themeVars.lightBorder, ")")), _defineProperty(_css, boxPaletteVars.borderMuted, "var(".concat(themeVars.lightBorderMuted, ")")), _defineProperty(_css, boxPaletteVars.accent, "var(".concat(themeVars.lightAccent, ")")), _defineProperty(_css, boxPaletteVars.systemError, "var(".concat(themeVars.lightSystemError, ")")), _defineProperty(_css, boxPaletteVars.systemErrorMuted, "var(".concat(themeVars.lightSystemErrorMuted, ")")), _defineProperty(_css, boxPaletteVars.systemSuccess, "var(".concat(themeVars.lightSystemSuccess, ")")), _defineProperty(_css, boxPaletteVars.systemSuccessMuted, "var(".concat(themeVars.lightSystemSuccessMuted, ")")), _defineProperty(_css, boxPaletteVars.systemWarning, "var(".concat(themeVars.lightSystemWarning, ")")), _defineProperty(_css, boxPaletteVars.systemWarningMuted, "var(".concat(themeVars.lightSystemWarningMuted, ")")), _defineProperty(_css, boxPaletteVars.systemInfo, "var(".concat(themeVars.lightSystemInfo, ")")), _defineProperty(_css, boxPaletteVars.systemInfoMuted, "var(".concat(themeVars.lightSystemInfoMuted, ")")), _css), "" , "" , "" , "" ),
+  react$1.css((_css = {}, _defineProperty(_css, boxPaletteVars.palette, 'light'), _defineProperty(_css, boxPaletteVars.foregroundText, "var(".concat(themeVars.lightForegroundText, ")")), _defineProperty(_css, boxPaletteVars.foregroundAction, "var(".concat(themeVars.lightForegroundAction, ")")), _defineProperty(_css, boxPaletteVars.foregroundFocus, "var(".concat(themeVars.lightForegroundFocus, ")")), _defineProperty(_css, boxPaletteVars.foregroundMuted, "var(".concat(themeVars.lightForegroundMuted, ")")), _defineProperty(_css, boxPaletteVars.backgroundBody, "var(".concat(themeVars.lightBackgroundBody, ")")), _defineProperty(_css, boxPaletteVars.backgroundShade, "var(".concat(themeVars.lightBackgroundShade, ")")), _defineProperty(_css, boxPaletteVars.backgroundBodyAlt, "var(".concat(themeVars.lightBackgroundBodyAlt, ")")), _defineProperty(_css, boxPaletteVars.backgroundShadeAlt, "var(".concat(themeVars.lightBackgroundShadeAlt, ")")), _defineProperty(_css, boxPaletteVars.border, "var(".concat(themeVars.lightBorder, ")")), _defineProperty(_css, boxPaletteVars.borderMuted, "var(".concat(themeVars.lightBorderMuted, ")")), _defineProperty(_css, boxPaletteVars.accent, "var(".concat(themeVars.lightAccent, ")")), _defineProperty(_css, boxPaletteVars.systemError, "var(".concat(themeVars.lightSystemError, ")")), _defineProperty(_css, boxPaletteVars.systemErrorMuted, "var(".concat(themeVars.lightSystemErrorMuted, ")")), _defineProperty(_css, boxPaletteVars.systemSuccess, "var(".concat(themeVars.lightSystemSuccess, ")")), _defineProperty(_css, boxPaletteVars.systemSuccessMuted, "var(".concat(themeVars.lightSystemSuccessMuted, ")")), _defineProperty(_css, boxPaletteVars.systemWarning, "var(".concat(themeVars.lightSystemWarning, ")")), _defineProperty(_css, boxPaletteVars.systemWarningMuted, "var(".concat(themeVars.lightSystemWarningMuted, ")")), _defineProperty(_css, boxPaletteVars.systemInfo, "var(".concat(themeVars.lightSystemInfo, ")")), _defineProperty(_css, boxPaletteVars.systemInfoMuted, "var(".concat(themeVars.lightSystemInfoMuted, ")")), _css), "" , "" , "" , "" ),
   dark:
@@ -176,3 +178,3 @@ /*#__PURE__*/
   /*#__PURE__*/
-  react$1.css((_css2 = {}, _defineProperty(_css2, boxPaletteVars.foregroundText, "var(".concat(themeVars.darkForegroundText, ")")), _defineProperty(_css2, boxPaletteVars.foregroundAction, "var(".concat(themeVars.darkForegroundAction, ")")), _defineProperty(_css2, boxPaletteVars.foregroundFocus, "var(".concat(themeVars.darkForegroundFocus, ")")), _defineProperty(_css2, boxPaletteVars.foregroundMuted, "var(".concat(themeVars.darkForegroundMuted, ")")), _defineProperty(_css2, boxPaletteVars.backgroundBody, "var(".concat(themeVars.darkBackgroundBody, ")")), _defineProperty(_css2, boxPaletteVars.backgroundShade, "var(".concat(themeVars.darkBackgroundShade, ")")), _defineProperty(_css2, boxPaletteVars.backgroundBodyAlt, "var(".concat(themeVars.darkBackgroundBodyAlt, ")")), _defineProperty(_css2, boxPaletteVars.backgroundShadeAlt, "var(".concat(themeVars.darkBackgroundShadeAlt, ")")), _defineProperty(_css2, boxPaletteVars.border, "var(".concat(themeVars.darkBorder, ")")), _defineProperty(_css2, boxPaletteVars.borderMuted, "var(".concat(themeVars.darkBorderMuted, ")")), _defineProperty(_css2, boxPaletteVars.accent, "var(".concat(themeVars.darkAccent, ")")), _defineProperty(_css2, boxPaletteVars.systemError, "var(".concat(themeVars.darkSystemError, ")")), _defineProperty(_css2, boxPaletteVars.systemErrorMuted, "var(".concat(themeVars.darkSystemErrorMuted, ")")), _defineProperty(_css2, boxPaletteVars.systemSuccess, "var(".concat(themeVars.darkSystemSuccess, ")")), _defineProperty(_css2, boxPaletteVars.systemSuccessMuted, "var(".concat(themeVars.darkSystemSuccessMuted, ")")), _defineProperty(_css2, boxPaletteVars.systemWarning, "var(".concat(themeVars.darkSystemWarning, ")")), _defineProperty(_css2, boxPaletteVars.systemWarningMuted, "var(".concat(themeVars.darkSystemWarningMuted, ")")), _defineProperty(_css2, boxPaletteVars.systemInfo, "var(".concat(themeVars.darkSystemInfo, ")")), _defineProperty(_css2, boxPaletteVars.systemInfoMuted, "var(".concat(themeVars.darkSystemInfoMuted, ")")), _css2), "" , "" , "" , "" )
+  react$1.css((_css2 = {}, _defineProperty(_css2, boxPaletteVars.palette, 'dark'), _defineProperty(_css2, boxPaletteVars.foregroundText, "var(".concat(themeVars.darkForegroundText, ")")), _defineProperty(_css2, boxPaletteVars.foregroundAction, "var(".concat(themeVars.darkForegroundAction, ")")), _defineProperty(_css2, boxPaletteVars.foregroundFocus, "var(".concat(themeVars.darkForegroundFocus, ")")), _defineProperty(_css2, boxPaletteVars.foregroundMuted, "var(".concat(themeVars.darkForegroundMuted, ")")), _defineProperty(_css2, boxPaletteVars.backgroundBody, "var(".concat(themeVars.darkBackgroundBody, ")")), _defineProperty(_css2, boxPaletteVars.backgroundShade, "var(".concat(themeVars.darkBackgroundShade, ")")), _defineProperty(_css2, boxPaletteVars.backgroundBodyAlt, "var(".concat(themeVars.darkBackgroundBodyAlt, ")")), _defineProperty(_css2, boxPaletteVars.backgroundShadeAlt, "var(".concat(themeVars.darkBackgroundShadeAlt, ")")), _defineProperty(_css2, boxPaletteVars.border, "var(".concat(themeVars.darkBorder, ")")), _defineProperty(_css2, boxPaletteVars.borderMuted, "var(".concat(themeVars.darkBorderMuted, ")")), _defineProperty(_css2, boxPaletteVars.accent, "var(".concat(themeVars.darkAccent, ")")), _defineProperty(_css2, boxPaletteVars.systemError, "var(".concat(themeVars.darkSystemError, ")")), _defineProperty(_css2, boxPaletteVars.systemErrorMuted, "var(".concat(themeVars.darkSystemErrorMuted, ")")), _defineProperty(_css2, boxPaletteVars.systemSuccess, "var(".concat(themeVars.darkSystemSuccess, ")")), _defineProperty(_css2, boxPaletteVars.systemSuccessMuted, "var(".concat(themeVars.darkSystemSuccessMuted, ")")), _defineProperty(_css2, boxPaletteVars.systemWarning, "var(".concat(themeVars.darkSystemWarning, ")")), _defineProperty(_css2, boxPaletteVars.systemWarningMuted, "var(".concat(themeVars.darkSystemWarningMuted, ")")), _defineProperty(_css2, boxPaletteVars.systemInfo, "var(".concat(themeVars.darkSystemInfo, ")")), _defineProperty(_css2, boxPaletteVars.systemInfoMuted, "var(".concat(themeVars.darkSystemInfoMuted, ")")), _css2), "" , "" , "" , "" )
 };
@@ -200,3 +202,28 @@ var boxPalette = {
 };
+/**
+ * Returns the current palette for a specific DOM element
+ * Note: As this function relies on CSS vars, the value returned will not be available on the server
+ */
 
+function useBoxPalette(element) {
+  var _useState = react.useState(),
+      value = _useState[0],
+      setValue = _useState[1];
+
+  react.useEffect(function () {
+    if (!element.current) return;
+    setValue(getInheritedProperty(element.current));
+  }, [element]);
+  return value;
+}
+
+function getInheritedProperty(el) {
+  var value = getComputedStyle(el).getPropertyValue(boxPaletteVars.palette);
+  if (value === 'light') return 'light';
+  if (value === 'dark') return 'dark'; // Walk up the DOM tree until we find the closest value
+
+  if (el.parentElement) return getInheritedProperty(el.parentElement);
+  return undefined;
+}
+
 // Tokens
@@ -694,8 +721,8 @@ var breakpoint = {
 var input = {
-  sm: _objectSpread(_objectSpread({}, fontGrid('xs', 'nospace')), {}, {
-    height: '2.125rem' // 34 px
+  sm: _objectSpread(_objectSpread({}, fontGrid('sm', 'default')), {}, {
+    height: '2rem' // 32 px
 
   }),
-  md: _objectSpread(_objectSpread({}, fontGrid('sm', 'nospace')), {}, {
-    height: '2.875rem' // 46 px
+  md: _objectSpread(_objectSpread({}, fontGrid('sm', 'default')), {}, {
+    height: '3rem' // 48 px
 
@@ -821,2 +848,6 @@ })
 
+Object.defineProperty(exports, 'useId', {
+	enumerable: true,
+	get: function () { return autoId.useId; }
+});
 exports.Core = Core;
@@ -839,2 +870,3 @@ exports.CoreProvider = CoreProvider;
 exports.tokens = tokens;
+exports.useBoxPalette = useBoxPalette;
 exports.useClickOutside = useClickOutside;
@@ -841,0 +873,0 @@ exports.useElementSize = useElementSize;

dist/declarations/src/boxPalette.d.ts

@@ -0,1 +1,2 @@
+import { RefObject } from 'react';
 export declare const boxPalettes: {
@@ -27,1 +28,6 @@ readonly light: import("@emotion/utils").SerializedStyles;
 };
+/**
+ * Returns the current palette for a specific DOM element
+ * Note: As this function relies on CSS vars, the value returned will not be available on the server
+ */
+export declare function useBoxPalette(element: RefObject<HTMLElement>): "dark" | "light" | undefined;

dist/declarations/src/goldTheme.d.ts

@@ -1,40 +0,2 @@
-export declare const goldTheme: {
-    readonly lightForegroundText: "#313131";
-    readonly lightForegroundAction: "#00698f";
-    readonly lightForegroundFocus: "#9263de";
-    readonly lightForegroundMuted: "#626262";
-    readonly lightBackgroundBody: "#FFFFFF";
-    readonly lightBackgroundShade: "#f5f5f5";
-    readonly lightBackgroundBodyAlt: "#ebebeb";
-    readonly lightBackgroundShadeAlt: "#e0e0e0";
-    readonly lightBorder: "#808080";
-    readonly lightBorderMuted: "#D3D3D3";
-    readonly lightAccent: "#00698f";
-    readonly lightSystemError: "#d60000";
-    readonly lightSystemErrorMuted: "#fdf2f2";
-    readonly lightSystemSuccess: "#0b996c";
-    readonly lightSystemSuccessMuted: "#f3faf8";
-    readonly lightSystemWarning: "#f69900";
-    readonly lightSystemWarningMuted: "#fffaf2";
-    readonly lightSystemInfo: "#00bfe9";
-    readonly lightSystemInfoMuted: "#f2fcfe";
-    readonly darkForegroundText: "#FFFFFF";
-    readonly darkForegroundAction: "#61daff";
-    readonly darkForegroundFocus: "#c390f9";
-    readonly darkForegroundMuted: "#bdd2d7";
-    readonly darkBackgroundBody: "#135e70";
-    readonly darkBackgroundShade: "#104f5f";
-    readonly darkBackgroundBodyAlt: "#0d414d";
-    readonly darkBackgroundShadeAlt: "#0a323c";
-    readonly darkBorder: "#95b7bf";
-    readonly darkBorderMuted: "#4D7680";
-    readonly darkAccent: "#61daff";
-    readonly darkSystemError: "#d60000";
-    readonly darkSystemErrorMuted: "#422F47";
-    readonly darkSystemSuccess: "#0b996c";
-    readonly darkSystemSuccessMuted: "#133A4B";
-    readonly darkSystemWarning: "#f69900";
-    readonly darkSystemWarningMuted: "#393942";
-    readonly darkSystemInfo: "#00bfe9";
-    readonly darkSystemInfoMuted: "#193A5B";
-};
+import { Theme } from './theme';
+export declare const goldTheme: Theme;

dist/declarations/src/utils/index.d.ts

@@ -0,1 +1,2 @@
+export { useId } from './useId';
 export { useTernaryState } from './useTernaryState';
@@ -2,0 +3,0 @@ export { useToggleState } from './useToggleState';

package.json

 {
 	"name": "@ag.ds-next/core",
-	"version": "4.0.0",
+	"version": "4.1.0",
+	"license": "MIT",
 	"main": "dist/ag.ds-next-core.cjs.js",
 	"module": "dist/ag.ds-next-core.esm.js",
-	"license": "MIT",
 	"dependencies": {
-		"@babel/runtime": "^7.4.5"
+		"@babel/runtime": "^7.4.5",
+		"@reach/auto-id": "^0.18.0"
 	},
-	"peerDependencies": {
+	"devDependencies": {
 		"@emotion/react": "^11.7.0",
+		"@types/facepaint": "^1.2.2",
 		"facepaint": "^1.2.1",
-		"react": "^16.14.0 || ^17.0.0 || ^18.0.0"
+		"react": "18.1.0"
 	},
-	"devDependencies": {
+	"peerDependencies": {
 		"@emotion/react": "^11.7.0",
-		"@types/facepaint": "^1.2.2",
 		"facepaint": "^1.2.1",
-		"react": "18.1.0"
+		"react": "^16.14.0 || ^17.0.0 || ^18.0.0"
 	}
 }

src/boxPalette.ts

 import { css } from '@emotion/react';
+import { RefObject, useEffect, useState } from 'react';
 import { themeVars } from './theme';
@@ -7,2 +8,3 @@
 const boxPaletteVars = {
+	palette: '--agds-palette',
 	foregroundText: '--agds-foreground-text',
@@ -31,2 +33,3 @@ foregroundAction: '--agds-foreground-action',
 	light: css({
+		[boxPaletteVars.palette]: 'light',
 		[boxPaletteVars.foregroundText]: `var(${themeVars.lightForegroundText})`,
@@ -53,2 +56,3 @@ [boxPaletteVars.foregroundAction]: `var(${themeVars.lightForegroundAction})`,
 	dark: css({
+		[boxPaletteVars.palette]: 'dark',
 		[boxPaletteVars.foregroundText]: `var(${themeVars.darkForegroundText})`,
@@ -99,1 +103,25 @@ [boxPaletteVars.foregroundAction]: `var(${themeVars.darkForegroundAction})`,
 };
+
+/**
+ * Returns the current palette for a specific DOM element
+ * Note: As this function relies on CSS vars, the value returned will not be available on the server
+ */
+export function useBoxPalette(element: RefObject<HTMLElement>) {
+	const [value, setValue] = useState<BoxPalette>();
+
+	useEffect(() => {
+		if (!element.current) return;
+		setValue(getInheritedProperty(element.current));
+	}, [element]);
+
+	return value;
+}
+
+function getInheritedProperty(el: HTMLElement): BoxPalette | undefined {
+	const value = getComputedStyle(el).getPropertyValue(boxPaletteVars.palette);
+	if (value === 'light') return 'light';
+	if (value === 'dark') return 'dark';
+	// Walk up the DOM tree until we find the closest value
+	if (el.parentElement) return getInheritedProperty(el.parentElement);
+	return undefined;
+}

src/goldTheme.ts

@@ -0,3 +1,5 @@
+import { Theme } from './theme';
+
 // Default theme from GOLD.
-export const goldTheme = {
+export const goldTheme: Theme = {
 	lightForegroundText: '#313131',
@@ -4,0 +6,0 @@ lightForegroundAction: '#00698f',

src/packs.ts

@@ -22,8 +22,8 @@ import { boxPalette } from './boxPalette';
 	sm: {
-		...fontGrid('xs', 'nospace'),
-		height: '2.125rem', // 34 px
+		...fontGrid('sm', 'default'),
+		height: '2rem', // 32 px
 	},
 	md: {
-		...fontGrid('sm', 'nospace'),
-		height: '2.875rem', // 46 px
+		...fontGrid('sm', 'default'),
+		height: '3rem', // 48 px
 	},
@@ -30,0 +30,0 @@ };

src/utils/index.ts

@@ -0,1 +1,2 @@
+export { useId } from './useId';
 export { useTernaryState } from './useTernaryState';
@@ -2,0 +3,0 @@ export { useToggleState } from './useToggleState';

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

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

252632

increased by4.89%

Number of package files

57

increased by5.56%

Lines of code

4395

increased by3.63%

Worsened metrics

Dependency count

5

increased by25%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• + Added@reach/auto-id@^0.18.0

• + Added@reach/auto-id@0.18.0(transitive)

• + Added@reach/utils@0.18.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedreact@17.0.2(transitive)

• + Addedreact-dom@17.0.2(transitive)

• + Addedscheduler@0.20.2(transitive)