reshaped 3.0.8-rc.1 → 3.0.10

package/dist/hooks/useScrollLock.js

@@ -21,8 +21,8 @@ const useScrollLock = () => {
     const [locked, setLocked] = React.useState(false);
     const overflowStyleRef = React.useRef();
     const isOverflowingRef = React.useRef(false);
-    const targetEl = document.body;
     const lockScroll = React.useCallback(() => {
+        const targetEl = document.body;
         const rect = targetEl.getBoundingClientRect();
         isOverflowingRef.current = rect.left + rect.right < window.innerWidth;
         overflowStyleRef.current = targetEl.style.overflow;
@@ -32,13 +32,14 @@ const useScrollLock = () => {
             targetEl.style.paddingRight = `${scrollBarWidth}px`;
         }
         setLocked(true);
-    }, [setLocked, isOverflowingRef, overflowStyleRef, targetEl]);
+    }, [setLocked, isOverflowingRef, overflowStyleRef]);
     const unlockScroll = React.useCallback(() => {
+        const targetEl = document.body;
         targetEl.style.overflow = overflowStyleRef.current || "";
         if (isOverflowingRef.current)
             targetEl.style.paddingRight = "";
         setLocked(false);
-    }, [setLocked, isOverflowingRef, overflowStyleRef, targetEl]);
+    }, [setLocked, isOverflowingRef, overflowStyleRef]);
     return { scrollLocked: locked, lockScroll, unlockScroll };
 };
 export default useScrollLock;

package/dist/hooks/useToggle.js

@@ -11,6 +11,6 @@ const useToggle = (defaultValue) => {
     const toggle = React.useCallback(() => {
         setActive((active) => !active);
     }, []);
-    return { active, activate, deactivate, toggle };
+    return React.useMemo(() => ({ active, activate, deactivate, toggle }), [activate, deactivate, toggle, active]);
 };
 export default useToggle;

package/dist/index.d.ts

@@ -75,6 +75,8 @@ export { default as RadioGroup } from "./components/RadioGroup";
 export type { RadioGroupProps } from "./components/RadioGroup";
 export { default as Reshaped } from "./components/Reshaped";
 export type { ReshapedProps } from "./components/Reshaped";
+export { default as Resizable } from "./components/Resizable";
+export type { ResizableProps, ResizableItemProps, ResizableHandleProps, } from "./components/Resizable";
 export { default as Scrim } from "./components/Scrim";
 export type { ScrimProps } from "./components/Scrim";
 export { default as ScrollArea } from "./components/ScrollArea";
@@ -102,7 +104,7 @@ export type { TextFieldProps } from "./components/TextField";
 export { default as Timeline } from "./components/Timeline";
 export type { TimelineProps, TimelineItemProps } from "./components/Timeline";
 export { useToast, ToastProvider } from "./components/Toast";
-export type { ToastProps, ToastProviderProps } from "./components/Toast";
+export type { ToastProps, ToastProviderProps, ToastShowProps } from "./components/Toast";
 export { default as Tooltip } from "./components/Tooltip";
 export type { TooltipProps } from "./components/Tooltip";
 export { default as View } from "./components/View";

package/dist/index.js

@@ -38,6 +38,7 @@ export { default as Progress } from "./components/Progress/index.js";
 export { default as Radio } from "./components/Radio/index.js";
 export { default as RadioGroup } from "./components/RadioGroup/index.js";
 export { default as Reshaped } from "./components/Reshaped/index.js";
+export { default as Resizable } from "./components/Resizable/index.js";
 export { default as Scrim } from "./components/Scrim/index.js";
 export { default as ScrollArea } from "./components/ScrollArea/index.js";
 export { default as Select } from "./components/Select/index.js";

package/dist/themes/_generator/tests/themes.stories.js

@@ -235,6 +235,20 @@ const onColorsCss = getThemeCSS("on-color", {
         },
     },
 });
+const onColorsCssApca = getThemeCSS("on-color-apca", {
+    color: {
+        backgroundPrimary: { hex: "#1abc9c", hexDark: "#16a085" },
+        backgroundPrimaryHighlighted: { hex: "#16a085", hexDark: "#1abc9c" },
+    },
+}, {
+    colorContrastAlgorithm: "apca",
+    onColorValues: {
+        primary: {
+            hexLight: "#d1fae5",
+            hexDark: "#022c22",
+        },
+    },
+});
 export const onColors = () => (<Example>
 		<Example.Item title="custom on color values">
 			<style>{onColorsCss}</style>
@@ -245,4 +259,13 @@ export const onColors = () => (<Example>
 				</View>
 			</Theme>
 		</Example.Item>
+		<Example.Item title="custom on color values, apca">
+			<style>{onColorsCssApca}</style>
+			<Theme name="on-color-apca">
+				<View gap={2} direction="row">
+					<Button color="primary">Primary button</Button>
+					<Button color="critical">Critical button</Button>
+				</View>
+			</Theme>
+		</Example.Item>
 	</Example>);

package/dist/themes/_generator/utilities/color.d.ts

@@ -81,9 +81,25 @@ export declare const getDarkModeColor: (hsl: HslColor) => {
 };
 export declare const getLuminanceDelta: (luminance: number) => number;
 export declare function getRgbLuminance({ r, g, b }: RgbColor): number;
+export declare const getOnColorWCAG: (args: {
+    bgHexColor: string;
+    lightHexColor?: string;
+    darkHexColor?: string;
+}) => string;
+export declare const getOnColorAPCA: (args: {
+    bgHexColor: string;
+    mode: "light" | "dark";
+    lightHexColor?: string;
+    darkHexColor?: string;
+}) => string;
+/**
+ * On color resolver
+ */
 export declare const getOnColor: (args: {
     bgHexColor: string;
     lightHexColor?: string;
     darkHexColor?: string;
+    mode: "light" | "dark";
+    algorithm?: "wcag" | "apca";
 }) => string;
 export {};

package/dist/themes/_generator/utilities/color.js

@@ -301,29 +301,77 @@ export function getRgbLuminance({ r, g, b }) {
         return Math.pow(y, 1 / 3) * 116 - 16;
     }
 }
+/**
+ * WCAG contrast
+ */
 const RED = 0.2126;
 const GREEN = 0.7152;
 const BLUE = 0.0722;
 const GAMMA = 2.4;
-function luminance(r, g, b) {
+function luminanceWCAG(r, g, b) {
     var a = [r, g, b].map((v) => {
         v /= 255;
         return v <= 0.03928 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, GAMMA);
     });
     return a[0] * RED + a[1] * GREEN + a[2] * BLUE;
 }
-function contrast(rgb1, rgb2) {
-    var lum1 = luminance(...rgb1);
-    var lum2 = luminance(...rgb2);
+function contrastWCAG(rgb1, rgb2) {
+    var lum1 = luminanceWCAG(...rgb1);
+    var lum2 = luminanceWCAG(...rgb2);
     var brightest = Math.max(lum1, lum2);
     var darkest = Math.min(lum1, lum2);
     return (brightest + 0.05) / (darkest + 0.05);
 }
-export const getOnColor = (args) => {
+export const getOnColorWCAG = (args) => {
     const { bgHexColor, lightHexColor = "#ffffff", darkHexColor = "#000000" } = args;
     const bgRgb = hexToRgb(bgHexColor);
     const lightRgb = hexToRgb(lightHexColor);
-    return contrast([bgRgb.r, bgRgb.g, bgRgb.b], [lightRgb.r, lightRgb.g, lightRgb.b]) > 4.5
+    return contrastWCAG([bgRgb.r, bgRgb.g, bgRgb.b], [lightRgb.r, lightRgb.g, lightRgb.b]) > 4.5
         ? lightHexColor
         : darkHexColor;
 };
+/**
+ * APCA contrast
+ */
+function luminanceAPCA({ r, g, b }) {
+    return (0.2126 * Math.pow(r / 255, 2.2) +
+        0.7152 * Math.pow(g / 255, 2.2) +
+        0.0722 * Math.pow(b / 255, 2.2));
+}
+function contrastAPCA(backgroundLuminance, textLuminance) {
+    // Calculate the contrast based on APCA
+    let Lc = textLuminance - backgroundLuminance;
+    return Math.abs(Lc); // Return the absolute value of contrast
+}
+export const getOnColorAPCA = (args) => {
+    const { bgHexColor, mode, lightHexColor = "#ffffff", darkHexColor = "#000000" } = args;
+    const bgHexAlpha = bgHexColor.slice(7);
+    const bgAlpha = bgHexAlpha ? Number((parseInt(bgHexAlpha, 16) / 255).toFixed(2)) : 1;
+    const bgColor = hexToRgb(bgHexColor.slice(0, 7));
+    const baseColor = mode === "light" ? { r: 255, g: 255, b: 255 } : { r: 0, g: 0, b: 0 };
+    const { r, g, b } = {
+        r: (1 - bgAlpha) * baseColor.r + bgAlpha * bgColor.r,
+        g: (1 - bgAlpha) * baseColor.g + bgAlpha * bgColor.g,
+        b: (1 - bgAlpha) * baseColor.b + bgAlpha * bgColor.b,
+    };
+    // Calculate luminance for background and for white & black
+    let backgroundLuminance = luminanceAPCA({ r, g, b });
+    let whiteLuminance = luminanceAPCA({ r: 255, g: 255, b: 255 });
+    let blackLuminance = luminanceAPCA({ r: 0, g: 0, b: 0 });
+    // Calculate contrast
+    let contrastWithWhite = contrastAPCA(backgroundLuminance, whiteLuminance);
+    let contrastWithBlack = contrastAPCA(backgroundLuminance, blackLuminance);
+    // Choose the color with higher contrast
+    return contrastWithWhite > contrastWithBlack ? lightHexColor : darkHexColor;
+};
+/**
+ * On color resolver
+ */
+export const getOnColor = (args) => {
+    if (args.algorithm === "apca") {
+        return getOnColorAPCA(args);
+    }
+    else {
+        return getOnColorWCAG(args);
+    }
+};

package/dist/themes/_generator/utilities/generateBackgroundColors.js

@@ -29,10 +29,14 @@ const generateBackgroundColors = (definition, themeOptions) => {
             };
             const hex = getOnColor({
                 bgHexColor: bgToken.hex,
+                mode: "light",
+                algorithm: themeOptions?.colorContrastAlgorithm,
                 ...onColorHexMap,
             });
             const hexDark = getOnColor({
                 bgHexColor: bgToken.hexDark || bgToken.hex,
+                mode: "dark",
+                algorithm: themeOptions?.colorContrastAlgorithm,
                 ...onColorHexMap,
             });
             // eslint-disable-next-line no-param-reassign

package/dist/themes/index.d.ts

@@ -1,5 +1,22 @@
 import type * as T from "./_generator/types";
 import type { FullThemeDefinition } from "./_generator/tokens/types";
+/**
+ * Exported types
+ */
+export type { FullThemeDefinition } from "./_generator/tokens/types";
+export type { Name as ColorTokenName } from "./_generator/tokens/color/color.types";
+export type { Name as DurationTokenName } from "./_generator/tokens/duration/duration.types";
+export type { Name as EasingTokenName } from "./_generator/tokens/easing/easing.types";
+export type { Name as FontTokenName } from "./_generator/tokens/font/font.types";
+export type { Name as FontFamilyTokenName } from "./_generator/tokens/fontFamily/fontFamily.types";
+export type { Name as FontWeightTokenName } from "./_generator/tokens/fontWeight/fontWeight.types";
+export type { Name as RadiusTokenName } from "./_generator/tokens/radius/radius.types";
+export type { Name as ShadowTokenName } from "./_generator/tokens/shadow/shadow.types";
+export type { GeneratedName as UnitTokenName } from "./_generator/tokens/unit/unit.types";
+export type { Name as ViewportTokenName } from "./_generator/tokens/viewport/viewport.types";
+/**
+ * Exported runtime code
+ */
 export { default as baseThemeDefinition } from "./_generator/definitions/reshaped";
 export declare const generateThemeColors: (options: {
     primary: T.Color;

package/dist/themes/index.js

@@ -1,5 +1,8 @@
 import transform from "./_generator/transform.js";
 import generateColors from "./_generator/utilities/generateColors.js";
+/**
+ * Exported runtime code
+ */
 export { default as baseThemeDefinition } from "./_generator/definitions/reshaped.js";
 export const generateThemeColors = (options) => {
     return generateColors(options);

package/dist/types/config.d.ts

@@ -4,6 +4,7 @@ export type ReshapedConfig = {
     themeFragments?: Record<string, PartialThemeDefinition>;
     themeOptions?: {
         generateOnColorsFor?: string[];
+        colorContrastAlgorithm?: "wcag" | "apca";
         onColorValues?: {
             [key in ColorHue]?: {
                 hexDark: string;

package/dist/types/global.d.ts

@@ -2,7 +2,7 @@ import React from "react";
 type ClassNameValue = string | null | undefined | false;
 export type ClassName = ClassNameValue | ClassNameValue[] | ClassName[];
 export type CSSVariable = `--${string}`;
-export type StyleAttribute = React.CSSProperties | (React.CSSProperties & Record<CSSVariable, string | number>);
+export type StyleAttribute = React.CSSProperties | (React.CSSProperties & Record<CSSVariable, string | number | undefined>);
 type DataAttributes = {} | Record<`data-${string}`, string | boolean>;
 export type Attributes<TagName extends keyof JSX.IntrinsicElements = "div"> = JSX.IntrinsicElements[TagName] & DataAttributes & {
     style?: StyleAttribute;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "reshaped",
 	"description": "Professionally crafted design system in React & Figma for building products of any scale and complexity",
-	"version": "3.0.8-rc.1",
+	"version": "3.0.10",
 	"license": "MIT",
 	"email": "hello@reshaped.so",
 	"homepage": "https://reshaped.so",