@autoguru/overdrive 4.9.2 → 4.9.3

package/dist/themes/helpers.d.ts

@@ -1,2 +1,28 @@
-export declare const shadedColour: (colour: string, intensity: number | string | null, direction: 'forward' | 'backward', isDarkTheme?: boolean, transparency?: number | string | null) => string;
+interface ShadedColourProps {
+    colour: string;
+    intensity: number | string | null;
+    direction: 'forward' | 'backward';
+    isDarkTheme: boolean;
+    transparency?: number | string | null;
+}
+export declare const shadedColour: ({ colour, intensity, direction, isDarkTheme, transparency, }: ShadedColourProps) => string;
+declare type RGBNumbers = {
+    r: number;
+    g: number;
+    b: number;
+} | null;
+export declare const hexToRGB: (hex: string) => RGBNumbers;
+export declare const rgbStrToRGB: (rgb: string) => RGBNumbers;
+export declare const getRGBValues: (hexOrRGB: string) => RGBNumbers;
+export declare const getColourLuminance: (rgb: RGBNumbers) => number;
+export declare const getContrastRatio: (colour1: string, colour2: string) => number;
+declare type AccessibilityLevel = 'AA' | 'AAA';
+declare type AccessibilityTextSize = 'SMALL' | 'LARGE';
+export declare const passesAccessibilityContrast: ({ colour1, colour2, level, textSize, }: {
+    colour1: string;
+    colour2: string;
+    level: AccessibilityLevel;
+    textSize: AccessibilityTextSize;
+}) => boolean;
+export {};
 //# sourceMappingURL=helpers.d.ts.map

package/dist/themes/helpers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../lib/themes/helpers.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,YAAY,WAChB,MAAM,aACH,MAAM,GAAG,MAAM,GAAG,IAAI,aACtB,SAAS,GAAG,UAAU,wCAEnB,MAAM,GAAG,MAAM,GAAG,IAAI,KAClC,MAiBF,CAAC"}
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../lib/themes/helpers.ts"],"names":[],"mappings":"AAEA,UAAU,iBAAiB;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,SAAS,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;IAClC,SAAS,EAAE,SAAS,GAAG,UAAU,CAAC;IAClC,WAAW,EAAE,OAAO,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,IAAI,CAAC;CACtC;AAED,eAAO,MAAM,YAAY,iEAMtB,iBAAiB,KAAG,MAiBtB,CAAC;AAEF,aAAK,UAAU,GAAG;IAAE,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAC;IAAC,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,IAAI,CAAC;AAE7D,eAAO,MAAM,QAAQ,QAAS,MAAM,KAAG,UAYtC,CAAC;AAEF,eAAO,MAAM,WAAW,QAAS,MAAM,KAAG,UAOzC,CAAC;AAEF,eAAO,MAAM,YAAY,aAAc,MAAM,KAAG,UACwB,CAAC;AAEzE,eAAO,MAAM,kBAAkB,QAAS,UAAU,WAQjD,CAAC;AAEF,eAAO,MAAM,gBAAgB,YAAa,MAAM,WAAW,MAAM,KAAG,MAMnE,CAAC;AAEF,aAAK,kBAAkB,GAAG,IAAI,GAAG,KAAK,CAAC;AACvC,aAAK,qBAAqB,GAAG,OAAO,GAAG,OAAO,CAAC;AAE/C,eAAO,MAAM,2BAA2B;aAM9B,MAAM;aACN,MAAM;WACR,kBAAkB;cACf,qBAAqB;MAC5B,OAQH,CAAC"}

package/dist/themes/helpers.js

@@ -1,5 +1,5 @@
 import { colord } from 'colord';
-export const shadedColour = (colour, intensity, direction, isDarkTheme = false, transparency = 0) => {
+export const shadedColour = ({ colour, intensity, direction, isDarkTheme, transparency = 0, }) => {
     const intensityValue = typeof intensity === 'string' ? Number(intensity) : intensity;
     const transparencyValue = typeof transparency === 'string' ? Number(transparency) : transparency;
     return colord(colour)[(!isDarkTheme && direction === 'backward') ||
@@ -9,3 +9,50 @@ export const shadedColour = (colour, intensity, direction, isDarkTheme = false,
         .alpha(typeof transparencyValue === 'number' ? 1 - transparencyValue : 1)
         .toHex();
 };
+export const hexToRGB = (hex) => {
+    const shorthandRegex = /^#?([\da-f])([\da-f])([\da-f])$/i;
+    hex = hex.replace(shorthandRegex, (_, r, g, b) => r + r + g + g + b + b);
+    const result = /^#?([\da-f]{2})([\da-f]{2})([\da-f]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: Number.parseInt(result[1], 16),
+            g: Number.parseInt(result[2], 16),
+            b: Number.parseInt(result[3], 16),
+        }
+        : null;
+};
+export const rgbStrToRGB = (rgb) => {
+    const components = rgb.replace(/[^\d,]/g, '').split(',');
+    return {
+        r: Number.parseInt(components[0]),
+        g: Number.parseInt(components[1]),
+        b: Number.parseInt(components[2]),
+    };
+};
+export const getRGBValues = (hexOrRGB) => hexOrRGB.startsWith('rgb') ? rgbStrToRGB(hexOrRGB) : hexToRGB(hexOrRGB);
+export const getColourLuminance = (rgb) => {
+    if (!rgb)
+        return 0;
+    const { r, g, b } = rgb;
+    const a = [r, g, b].map((v) => {
+        v /= 255;
+        return v <= 0.039_28 ? v / 12.92 : Math.pow((v + 0.055) / 1.055, 2.4);
+    });
+    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+};
+export const getContrastRatio = (colour1, colour2) => {
+    const color1luminance = getColourLuminance(getRGBValues(colour1));
+    const color2luminance = getColourLuminance(getRGBValues(colour2));
+    return color1luminance > color2luminance
+        ? (color2luminance + 0.05) / (color1luminance + 0.05)
+        : (color1luminance + 0.05) / (color2luminance + 0.05);
+};
+export const passesAccessibilityContrast = ({ colour1, colour2, level, textSize, }) => {
+    const contrastRatio = getContrastRatio(colour1, colour2);
+    if (textSize === 'LARGE') {
+        return level === 'AAA'
+            ? contrastRatio < 1 / 4.5
+            : contrastRatio < 1 / 3;
+    }
+    return level === 'AAA' ? contrastRatio < 1 / 7 : contrastRatio < 1 / 4.5;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@autoguru/overdrive",
-	"version": "4.9.2",
+	"version": "4.9.3",
 	"description": "Overdrive is a product component library, and design system for AutoGuru.",
 	"types": "dist/index.d.ts",
 	"main": "dist/index.js",