@digdir/designsystemet 0.1.0-alpha.1 → 0.1.0-alpha.10

package/dist/build/bin/designsystemet.js

@@ -24,7 +24,7 @@ program
     .description('run a Designsystemet migration')
     .addArgument(new Argument('[migration]', 'Available migrations').choices(Object.keys(migrations)))
     .option('-l --list', 'List available migrations')
-    .option('-g --glob <glob>', 'Glob for files upon which to apply the migration', './**/*.css')
+    .option('-g --glob <glob>', 'Glob for files upon which to apply the migration', './**/*.(tsx|css)')
     .action((migrationKey, opts) => {
     const { glob, list } = opts;
     if (list) {

package/dist/build/src/colors/colorUtils.js

@@ -0,0 +1,314 @@
+import { Hsluv } from 'hsluv';
+import chroma from 'chroma-js';
+/**
+ * Converts a HEX color '#xxxxxx' into a CSS HSL string 'hsl(x,x,x)'
+ *
+ * @param hex A hex color string
+ * @param valuesOnly If true, only the values are returned
+ * @returns A CSS HSL string
+ */
+export const hexToCssHsl = (hex, valuesOnly = false) => {
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    let r = 0;
+    let g = 0;
+    let b = 0;
+    let cssString = '';
+    if (result) {
+        r = parseInt(result[1], 16);
+        g = parseInt(result[2], 16);
+        b = parseInt(result[3], 16);
+    }
+    (r /= 255), (g /= 255), (b /= 255);
+    const max = Math.max(r, g, b), min = Math.min(r, g, b);
+    let h, s, l = (max + min) / 2;
+    if (max == min) {
+        h = s = 0; // achromatic
+    }
+    else {
+        const d = max - min;
+        s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
+        switch (max) {
+            case r:
+                h = (g - b) / d + (g < b ? 6 : 0);
+                break;
+            case g:
+                h = (b - r) / d + 2;
+                break;
+            case b:
+                h = (r - g) / d + 4;
+                break;
+        }
+    }
+    h = Math.round(h ? h * 360 : 0);
+    s = Math.round(s * 100);
+    l = Math.round(l * 100);
+    cssString = h + ',' + s + '%,' + l + '%';
+    cssString = !valuesOnly ? 'hsl(' + cssString + ')' : cssString;
+    return cssString;
+};
+/**
+ * Converts a HEX string '#xxxxxx' into an array of HSL values '[h,s,l]'
+ *
+ * @param H A Hex color string
+ * @returns HSL values in an array
+ */
+export const hexToHSL = (H) => {
+    // Convert hex to RGB first
+    let r = 0, g = 0, b = 0;
+    if (H.length == 4) {
+        r = parseInt('0x' + H[1] + H[1]);
+        g = parseInt('0x' + H[2] + H[2]);
+        b = parseInt('0x' + H[3] + H[3]);
+    }
+    else if (H.length == 7) {
+        r = parseInt('0x' + H[1] + H[2]);
+        g = parseInt('0x' + H[3] + H[4]);
+        b = parseInt('0x' + H[5] + H[6]);
+    }
+    // Then to HSL
+    r /= 255;
+    g /= 255;
+    b /= 255;
+    let h = 0, s = 0, l = 0;
+    const cmin = Math.min(r, g, b), cmax = Math.max(r, g, b), delta = cmax - cmin;
+    if (delta == 0)
+        h = 0;
+    else if (cmax == r)
+        h = ((g - b) / delta) % 6;
+    else if (cmax == g)
+        h = (b - r) / delta + 2;
+    else
+        h = (r - g) / delta + 4;
+    h = Math.round(h * 60);
+    if (h < 0)
+        h += 360;
+    l = (cmax + cmin) / 2;
+    s = delta == 0 ? 0 : delta / (1 - Math.abs(2 * l - 1));
+    s = +(s * 100).toFixed(1);
+    l = +(l * 100).toFixed(1);
+    return [h, s, l];
+};
+/**
+ * Converts a HSL number array '[h,s,l]' into HSL CSS string 'hsl(x,x,x)'
+ *
+ * @param HSL A HSL number array '[h,s,l]'
+ * @returns A hex color string
+ */
+export const hslArrToCss = (HSL) => {
+    return 'hsl(' + HSL[0] + ',' + HSL[1] + '%,' + HSL[2] + '%)';
+};
+/**
+ * Converts a HSL CSS string 'hsl(x,x,x)' into an array of HSL values '[h,s,l]'
+ *
+ * @param h The HSL hue
+ * @param s The HSL saturation
+ * @param l The HSL lightness
+ * @returns HEX color string
+ */
+export const HSLToHex = (h, s, l) => {
+    s /= 100;
+    l /= 100;
+    let r = 0, g = 0, b = 0;
+    const c = (1 - Math.abs(2 * l - 1)) * s, x = c * (1 - Math.abs(((h / 60) % 2) - 1)), m = l - c / 2;
+    if (0 <= h && h < 60) {
+        r = c;
+        g = x;
+        b = 0;
+    }
+    else if (60 <= h && h < 120) {
+        r = x;
+        g = c;
+        b = 0;
+    }
+    else if (120 <= h && h < 180) {
+        r = 0;
+        g = c;
+        b = x;
+    }
+    else if (180 <= h && h < 240) {
+        r = 0;
+        g = x;
+        b = c;
+    }
+    else if (240 <= h && h < 300) {
+        r = x;
+        g = 0;
+        b = c;
+    }
+    else if (300 <= h && h < 360) {
+        r = c;
+        g = 0;
+        b = x;
+    }
+    // Having obtained RGB, convert channels to hex
+    r = parseInt(Math.round((r + m) * 255).toString(16), 16);
+    g = parseInt(Math.round((g + m) * 255).toString(16), 16);
+    b = parseInt(Math.round((b + m) * 255).toString(16), 16);
+    // Prepend 0s, if necessary
+    if (r.toString().length == 1)
+        r = parseInt('0' + r.toString(), 10);
+    if (g.toString().length == 1)
+        g = parseInt('0' + g.toString(), 10);
+    if (b.toString().length == 1)
+        b = parseInt('0' + b.toString(), 10);
+    return '#' + r + g + b;
+};
+/**
+ * Converts a HEX color '#xxxxxx' into an array of RGB values '[R, G, B]'
+ *
+ * @param hex A hex color string
+ * @returns RGB values in an array
+ */
+export const hexToRgb = (hex) => {
+    const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
+    hex = hex.replace(shorthandRegex, function (m, r, g, b) {
+        return r + r + g + g + b + b;
+    });
+    const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result
+        ? {
+            r: parseInt(result[1], 16),
+            g: parseInt(result[2], 16),
+            b: parseInt(result[3], 16),
+        }
+        : null;
+};
+/**
+ * Get the luminance of an RGB color
+ *
+ * @param r RGB red value
+ * @param G RGB green value
+ * @param b RGB blue value
+ * @returns
+ */
+export const luminanceFromRgb = (r, g, b) => {
+    const a = [Number(r), Number(g), Number(b)].map(function (v) {
+        v /= 255;
+        return v <= 0.03928 ? 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;
+};
+/**
+ * Get the luminance of a HEX color
+ *
+ * @param hex A hex color string
+ * @returns
+ */
+export const luminanceFromHex = (hex) => {
+    const rgb = hexToRgb(hex);
+    if (rgb) {
+        const r = rgb.r.toString();
+        const g = rgb.g.toString();
+        const b = rgb.b.toString();
+        return luminanceFromRgb(r, g, b);
+    }
+    return 2;
+};
+/**
+ * Get the contrast ratio between two luminance values
+ *
+ * @param lum1 The first luminance value
+ * @param lum2 The second luminance value
+ * @returns
+ */
+export const getRatioFromLum = (lum1, lum2) => {
+    if (lum1 !== null && lum2 !== null) {
+        return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
+    }
+    else {
+        return -1;
+    }
+};
+/**
+ * Get the HSL lightness from a HEX color
+ *
+ * @param hex A hex color string
+ * @returns
+ */
+export const getHslLightessFromHex = (hex) => {
+    return chroma(hex).hsl()[2];
+};
+export const getHslSaturationFromHex = (hex) => {
+    return chroma(hex).hsl()[1];
+};
+/**
+ * Get the HSLuv lightness from a HEX color
+ *
+ * @param hex A hex color string
+ * @returns
+ */
+export const getLightnessFromHex = (hex) => {
+    const conv = new Hsluv();
+    conv.hex = hex;
+    conv.hexToHsluv();
+    return Number(conv.hsluv_l.toFixed(0));
+};
+/**
+ * Get the contrast ratio between two HEX colors
+ *
+ * @param {CssColor} color1 The first color
+ * @param {CssColor} color2 The second color
+ * @returns
+ */
+export const getContrastFromHex = (color1, color2) => {
+    const lum1 = luminanceFromHex(color1);
+    const lum2 = luminanceFromHex(color2);
+    if (lum1 !== null && lum2 !== null) {
+        return getRatioFromLum(lum1, lum2);
+    }
+    return -1;
+};
+/**
+ * Get the contrast ratio between two colors at a specific lightness
+ *
+ * @param lightness The lightness value
+ * @param mainColor The main color
+ * @param backgroundColor The background color
+ * @returns The contrast ratio
+ */
+export const getContrastFromLightness = (lightness, mainColor, backgroundColor) => {
+    const conv = new Hsluv();
+    conv.hex = mainColor;
+    conv.hexToHsluv();
+    conv.hsluv_l = lightness;
+    conv.hsluvToHex();
+    const lightMainColor = conv.hex;
+    const lum1 = luminanceFromHex(lightMainColor);
+    const lum2 = luminanceFromHex(backgroundColor);
+    const ratio = getRatioFromLum(lum1 ?? 0, lum2 ?? 0);
+    return ratio;
+};
+/**
+ * Maps the numbers from [start1 - end1] to the range [start2 - end2], maintaining the proportionality between the numbers in the ranges using lineaer interpolation.
+ */
+// const mapRange = (value: number, start1: number, end1: number, start2: number, end2: number) => {
+//   return start2 + ((value - start1) * (end2 - start2)) / (end1 - start1);
+// };
+/**
+ * Check if two colors have enough contrast to be used together
+ *
+ * @param {CssColor} color1 The first color
+ * @param {CssColor} color2 The second color
+ * @returns {boolean} If the colors have enough contrast
+ */
+export const areColorsContrasting = (color1, color2, type = 'text') => {
+    const contrast = getContrastFromHex(color1, color2);
+    if (contrast !== null) {
+        if (type === 'text') {
+            return contrast >= 4.5;
+        }
+        else {
+            return contrast >= 3;
+        }
+    }
+    return false;
+};
+/**
+ * Check if aa string value is a HEX color
+ *
+ * @param {string} hex The string to check
+ * @returns {boolean} If the string is a HEX color
+ */
+export const isHexColor = (hex) => {
+    return typeof hex === 'string' && hex.length === 6 && !isNaN(Number('0x' + hex));
+};

package/dist/build/src/colors/index.js

@@ -0,0 +1,3 @@
+export * from './colorUtils';
+export * from './themeUtils';
+export * from './types';

package/dist/build/src/colors/themeUtils.js

@@ -0,0 +1,293 @@
+import { BackgroundColor, Color, Theme } from '@adobe/leonardo-contrast-colors';
+import { Hsluv } from 'hsluv';
+import { getContrastFromHex, getContrastFromLightness, getLightnessFromHex } from './colorUtils';
+const blueBaseColor = '#0A71C0';
+const greenBaseColor = '#078D19';
+const orangeBaseColor = '#CA5C21';
+const purpleBaseColor = '#663299';
+const redBaseColor = '#C01B1B';
+const yellowBaseColor = '#EABF28';
+/**
+ * Generates a Leonardo theme color that is used to create a Leonardo Theme
+ *
+ * @param color CssColor
+ * @param mode Light, Dark or Contrastmode
+ * @param contrastMode Contrast mode
+ * @returns
+ */
+const generateThemeColor = (color, mode, contrastMode = 'aa') => {
+    const leoBackgroundColor = new BackgroundColor({
+        name: 'backgroundColor',
+        colorKeys: ['#ffffff'],
+        ratios: [1],
+    });
+    let colorLightness = getLightnessFromHex(color);
+    if (mode === 'dark' || mode === 'contrast') {
+        color = getBaseColor(color);
+        colorLightness = colorLightness <= 30 ? 70 : 100 - colorLightness;
+    }
+    const multiplier = colorLightness <= 30 ? -8 : 8;
+    const baseDefaultContrast = getContrastFromLightness(colorLightness, color, leoBackgroundColor.colorKeys[0]);
+    const baseHoverContrast = getContrastFromLightness(colorLightness - multiplier, color, leoBackgroundColor.colorKeys[0]);
+    const baseActiveContrast = getContrastFromLightness(colorLightness - multiplier * 2, color, leoBackgroundColor.colorKeys[0]);
+    const textSubLightLightness = contrastMode === 'aa' ? 42 : 30;
+    const textDefLightLightness = contrastMode === 'aa' ? 20 : 17;
+    const textSubDarkLightness = contrastMode === 'aa' ? 65 : 78;
+    const textDefDarkLightness = contrastMode === 'aa' ? 89 : 93;
+    let lightnessScale = [];
+    if (mode === 'light') {
+        lightnessScale = [100, 96, 90, 84, 78, 76, 54, 33, textSubLightLightness, textDefLightLightness];
+    }
+    else if (mode === 'dark') {
+        lightnessScale = [10, 14, 20, 26, 32, 35, 47, 77, textSubDarkLightness, textDefDarkLightness];
+    }
+    else {
+        lightnessScale = [1, 6, 14, 20, 26, 58, 70, 82, 80, 95];
+    }
+    const getColorContrasts = (color, lightnessScale, backgroundColor) => {
+        return lightnessScale.map((lightness) => getContrastFromLightness(lightness, color, backgroundColor));
+    };
+    return new Color({
+        name: 'color',
+        colorKeys: [color],
+        ratios: [
+            ...getColorContrasts(color, lightnessScale.slice(0, 8), leoBackgroundColor.colorKeys[0]),
+            baseDefaultContrast,
+            baseHoverContrast,
+            baseActiveContrast,
+            ...getColorContrasts(color, lightnessScale.slice(8), leoBackgroundColor.colorKeys[0]),
+        ],
+    });
+};
+/**
+ *
+ * Generates a color scale based on a base color and a mode.
+ *
+ * @param color The base color that is used to generate the color scale
+ * @param mode The mode of the theme
+ */
+export const generateScaleForColor = (color, mode, contrastMode = 'aa') => {
+    const themeColor = generateThemeColor(color, mode, contrastMode);
+    const leoBackgroundColor = new BackgroundColor({
+        name: 'backgroundColor',
+        colorKeys: ['#ffffff'],
+        ratios: [1],
+    });
+    const theme = new Theme({
+        colors: [themeColor],
+        backgroundColor: leoBackgroundColor,
+        lightness: 100,
+    });
+    const outputArray = [];
+    for (let i = 0; i < theme.contrastColorValues.length; i++) {
+        outputArray.push({
+            hex: theme.contrastColorValues[i],
+            number: (i + 1),
+            name: getColorNameFromNumber((i + 1)),
+        });
+    }
+    outputArray.push({
+        hex: calculateContrastOneColor(theme.contrastColorValues[8]),
+        number: 14,
+        name: getColorNameFromNumber(14),
+    });
+    outputArray.push({
+        hex: calculateContrastTwoColor(theme.contrastColorValues[8]),
+        number: 15,
+        name: getColorNameFromNumber(15),
+    });
+    if (mode === 'light') {
+        outputArray[8].hex = color;
+    }
+    return outputArray;
+};
+/**
+ *
+ * Generates a color theme based on a base color. Light, Dark and Contrast scales are includes.
+ *
+ * @param color The base color that is used to generate the color theme
+ */
+export const generateThemeForColor = (color, contrastMode = 'aa') => {
+    const lightScale = generateScaleForColor(color, 'light', contrastMode);
+    const darkScale = generateScaleForColor(color, 'dark', contrastMode);
+    const contrastScale = generateScaleForColor(color, 'contrast', contrastMode);
+    return {
+        light: lightScale,
+        dark: darkScale,
+        contrast: contrastScale,
+    };
+};
+export const generateGlobalColors = ({ contrastMode = 'aa' }) => {
+    const blueTheme = generateThemeForColor(blueBaseColor, contrastMode);
+    const greenTheme = generateThemeForColor(greenBaseColor, contrastMode);
+    const orangeTheme = generateThemeForColor(orangeBaseColor, contrastMode);
+    const purpleTheme = generateThemeForColor(purpleBaseColor, contrastMode);
+    const redTheme = generateThemeForColor(redBaseColor, contrastMode);
+    const yellowTheme = generateThemeForColor(yellowBaseColor, contrastMode);
+    return {
+        blue: blueTheme,
+        green: greenTheme,
+        orange: orangeTheme,
+        purple: purpleTheme,
+        red: redTheme,
+        yellow: yellowTheme,
+    };
+};
+/**
+ * This function generates a complete theme for a set of colors.
+ *
+ * @param colors Which colors to generate the theme for
+ * @param contrastMode The contrast mode to use
+ * @returns
+ */
+export const generateColorTheme = ({ colors, contrastMode = 'aa' }) => {
+    const accentTheme = generateThemeForColor(colors.accent, contrastMode);
+    const neutralTheme = generateThemeForColor(colors.neutral, contrastMode);
+    const brand1Theme = generateThemeForColor(colors.brand1, contrastMode);
+    const brand2Theme = generateThemeForColor(colors.brand2, contrastMode);
+    const brand3Theme = generateThemeForColor(colors.brand3, contrastMode);
+    return {
+        accent: accentTheme,
+        neutral: neutralTheme,
+        brand1: brand1Theme,
+        brand2: brand2Theme,
+        brand3: brand3Theme,
+    };
+};
+/**
+ *
+ * This function calculates a color that can be used as a strong contrast color to a base color.
+ *
+ * @param baseColor The base color
+ */
+export const calculateContrastOneColor = (baseColor) => {
+    const contrastWhite = getContrastFromHex(baseColor, '#ffffff');
+    const contrastBlack = getContrastFromHex(baseColor, '#000000');
+    const lightness = contrastWhite >= contrastBlack ? 100 : 0;
+    // const color = createColorWithLightness(baseColor, lightness);
+    return lightness === 0 ? '#000000' : '#ffffff';
+};
+/**
+ *
+ * This function calculates a color that can be used as a subtle contrast color to a base color.
+ *
+ * @param color The base color
+ */
+export const calculateContrastTwoColor = (color) => {
+    const contrastWhite = getContrastFromHex(color, '#ffffff');
+    const contrastBlack = getContrastFromHex(color, '#000000');
+    const lightness = getLightnessFromHex(color);
+    const doubleALightnessModifier = lightness <= 40 ? 60 : lightness >= 60 ? 60 : 50;
+    let targetLightness = 0;
+    const contrastDirection = contrastWhite >= contrastBlack ? 'lighten' : 'darken';
+    targetLightness =
+        contrastDirection === 'lighten' ? lightness + doubleALightnessModifier : lightness - doubleALightnessModifier;
+    return createColorWithLightness(color, targetLightness);
+};
+/**
+ *
+ * This function checks if white or black text can be used on 2 different colors at 4.5:1 contrast.
+ *
+ * @param baseDefaultColor Base default color
+ * @param baseActiveColor Base active color
+ */
+export const canTextBeUsedOnColors = (baseDefaultColor, baseActiveColor) => {
+    const defaultAgainstWhite = getContrastFromHex(baseDefaultColor, '#ffffff');
+    const defaultAgainstBlack = getContrastFromHex(baseDefaultColor, '#000000');
+    const activeAgainstWhite = getContrastFromHex(baseActiveColor, '#ffffff');
+    const activeAgainstBlack = getContrastFromHex(baseActiveColor, '#000000');
+    if (defaultAgainstWhite >= 4.5 && activeAgainstWhite >= 4.5) {
+        return true;
+    }
+    else if (defaultAgainstBlack >= 4.5 && activeAgainstBlack >= 4.5) {
+        return true;
+    }
+    return false;
+};
+/**
+ *
+ * This function creates a color with a specific lightness value.
+ *
+ * @param color The base color
+ * @param lightness The lightness value from 0 to 100
+ */
+export const createColorWithLightness = (color, lightness) => {
+    const leoBackgroundColor = new BackgroundColor({
+        name: 'backgroundColor',
+        colorKeys: ['#ffffff'],
+        ratios: [1],
+    });
+    const colors = new Color({
+        name: 'color',
+        colorKeys: [color],
+        ratios: [getContrastFromLightness(lightness, color, '#ffffff')],
+    });
+    const theme = new Theme({
+        colors: [colors],
+        backgroundColor: leoBackgroundColor,
+        lightness: 100,
+    });
+    return theme.contrastColorValues[0];
+};
+/**
+ *
+ * This function returns the color number based on the color name.
+ *
+ * @param name The name of the color
+ */
+export const getColorNumberFromName = (name) => {
+    const colorMap = {
+        'Background Subtle': 1,
+        'Background Default': 2,
+        'Surface Default': 3,
+        'Surface Hover': 4,
+        'Surface Active': 5,
+        'Border Subtle': 6,
+        'Border Default': 7,
+        'Border Strong': 8,
+        'Base Default': 9,
+        'Base Hover': 10,
+        'Base Active': 11,
+        'Text Subtle': 12,
+        'Text Default': 13,
+    };
+    return colorMap[name];
+};
+/**
+ *
+ * This function returns the color name based on the color number.
+ *
+ * @param number The number of the color
+ */
+export const getColorNameFromNumber = (number) => {
+    const colorMap = {
+        1: 'Background Subtle',
+        2: 'Background Default',
+        3: 'Surface Default',
+        4: 'Surface Hover',
+        5: 'Surface Active',
+        6: 'Border Subtle',
+        7: 'Border Default',
+        8: 'Border Strong',
+        9: 'Base Default',
+        10: 'Base Hover',
+        11: 'Base Active',
+        12: 'Text Subtle',
+        13: 'Text Default',
+        14: 'Contrast Default',
+        15: 'Contrast Subtle',
+    };
+    return colorMap[number];
+};
+export const getBaseColor = (color) => {
+    const conv = new Hsluv();
+    conv.hex = color;
+    conv.hexToHsluv();
+    // conv.hsluv_l = 100 - conv.hsluv_l;
+    // conv.hsluv_s = getSaturationForDarkMode(color, conv.hsluv_s);
+    conv.hsluvToHex();
+    return conv.hex;
+};
+export const getCssVariable = (colorType, colorNumber) => {
+    return `--ds-${colorType}-${getColorNameFromNumber(colorNumber).toLowerCase().replace(/\s/g, '-')}`;
+};

package/dist/build/src/colors/types.js

@@ -0,0 +1 @@
+export {};