braid-design-system 32.16.0 → 32.16.2

package/dist/styles/lib/themes/wireframe/tokens.mjs

@@ -1,280 +0,0 @@
-import courierNewMetrics from "@capsizecss/metrics/courierNew.js";
-import { lighten, tint, darken } from "polished";
-import { extractFontMetricsForTheme } from "../apac/tokens.mjs";
-import { getLightVariant, findClosestAccessibleLighterColor, getAccessibleVariant, isLight } from "../../utils/index.mjs";
-const formAccent = "#767676";
-const critical = "#ef3e4a";
-const criticalLightBackground = "#fbe9eb";
-const positive = "#00af50";
-const info = "#2c88f7";
-const promote = "#855be5";
-const caution = "#ffc600";
-const brandAccent = "#111";
-const focus = "DeepSkyBlue";
-const black = "#303030";
-const white = "#fff";
-const link = "#4c77bb";
-const linkVisited = "DarkViolet";
-const secondary = "#777";
-const neutral = "#333";
-const neutralSoft = lighten(0.02, getLightVariant(neutral));
-const brandAccentLight = findClosestAccessibleLighterColor(
-  brandAccent,
-  neutral
-);
-const formAccentLight = findClosestAccessibleLighterColor(formAccent, neutral);
-const criticalLight = findClosestAccessibleLighterColor(critical, neutral);
-const cautionLight = findClosestAccessibleLighterColor(caution, neutral);
-const infoLight = findClosestAccessibleLighterColor(info, neutral);
-const linkLight = findClosestAccessibleLighterColor(link, neutral);
-const linkLightVisited = findClosestAccessibleLighterColor(
-  linkVisited,
-  neutral
-);
-const positiveLight = findClosestAccessibleLighterColor(positive, neutral);
-const promoteLight = findClosestAccessibleLighterColor(promote, neutral);
-const getActiveColor = (x) => isLight(x) ? darken(0.1, x) : darken(0.05, x);
-const getHoverColor = (x) => isLight(x) ? darken(0.05, x) : lighten(0.05, x);
-const tokens = {
-  name: "wireframe",
-  displayName: "Wireframe",
-  legacy: false,
-  typography: {
-    fontFamily: '"Courier New", monospace',
-    webFont: null,
-    fontMetrics: extractFontMetricsForTheme(courierNewMetrics),
-    fontWeight: {
-      regular: 400,
-      medium: 500,
-      strong: 700
-    },
-    heading: {
-      weight: {
-        weak: "regular",
-        regular: "strong"
-      },
-      level: {
-        "1": {
-          mobile: {
-            fontSize: 28,
-            lineGap: 22
-          },
-          tablet: {
-            fontSize: 42,
-            lineGap: 22
-          }
-        },
-        "2": {
-          mobile: {
-            fontSize: 21,
-            lineGap: 20
-          },
-          tablet: {
-            fontSize: 28,
-            lineGap: 20
-          }
-        },
-        "3": {
-          mobile: {
-            fontSize: 21,
-            lineGap: 18
-          },
-          tablet: {
-            fontSize: 21,
-            lineGap: 18
-          }
-        },
-        "4": {
-          mobile: {
-            fontSize: 18,
-            lineGap: 16
-          },
-          tablet: {
-            fontSize: 18,
-            lineGap: 16
-          }
-        }
-      }
-    },
-    text: {
-      xsmall: {
-        mobile: {
-          fontSize: 12,
-          lineGap: 11
-        },
-        tablet: {
-          fontSize: 12,
-          lineGap: 11
-        }
-      },
-      small: {
-        mobile: {
-          fontSize: 14,
-          lineGap: 12
-        },
-        tablet: {
-          fontSize: 14,
-          lineGap: 12
-        }
-      },
-      standard: {
-        mobile: {
-          fontSize: 16,
-          lineGap: 14
-        },
-        tablet: {
-          fontSize: 16,
-          lineGap: 14
-        }
-      },
-      large: {
-        mobile: {
-          fontSize: 18,
-          lineGap: 16
-        },
-        tablet: {
-          fontSize: 18,
-          lineGap: 16
-        }
-      }
-    }
-  },
-  contentWidth: {
-    xsmall: 400,
-    small: 660,
-    medium: 940,
-    large: 1280
-  },
-  grid: 4,
-  touchableSize: 12,
-  space: {
-    gutter: 6,
-    xxsmall: 1,
-    xsmall: 2,
-    small: 3,
-    medium: 5,
-    large: 8,
-    xlarge: 12,
-    xxlarge: 24,
-    xxxlarge: 30
-  },
-  transforms: {
-    touchable: "scale(0.97)"
-  },
-  transitions: {
-    fast: "transform .125s ease, opacity .125s ease",
-    touchable: "transform 0.2s cubic-bezier(0.02, 1.505, 0.745, 1.235)"
-  },
-  border: {
-    radius: {
-      small: "4px",
-      standard: "6px",
-      large: "8px",
-      xlarge: "10px"
-    },
-    width: {
-      standard: 1,
-      large: 2
-    },
-    color: {
-      brandAccent,
-      brandAccentLight,
-      caution,
-      cautionLight,
-      critical,
-      criticalLight,
-      field: "#333",
-      focus,
-      formAccent,
-      formAccentLight,
-      info,
-      infoLight,
-      neutral: black,
-      neutralInverted: white,
-      neutralLight: "#777",
-      positive,
-      positiveLight,
-      promote,
-      promoteLight
-    }
-  },
-  focusRingSize: 2,
-  shadows: {
-    small: "0 2px 4px 0px rgba(28,28,28,.1), 0 2px 2px -2px rgba(28,28,28,.1), 0 4px 4px -4px rgba(28,28,28,.2)",
-    medium: "0 2px 4px 0px rgba(28,28,28,.1), 0 8px 8px -4px rgba(28,28,28,.1), 0 12px 12px -8px rgba(28,28,28,.2)",
-    large: "0 2px 4px 0px rgba(28,28,28,.1), 0 12px 12px -4px rgba(28,28,28,.1), 0 20px 20px -12px rgba(28,28,28,.2)"
-  },
-  color: {
-    foreground: {
-      brandAccent,
-      brandAccentLight,
-      caution: getAccessibleVariant(caution, caution),
-      cautionLight,
-      critical: getAccessibleVariant(critical),
-      criticalLight,
-      formAccent,
-      formAccentLight,
-      info: getAccessibleVariant(info),
-      infoLight,
-      link,
-      linkHover: link,
-      linkLight,
-      linkLightVisited,
-      linkVisited,
-      neutral: black,
-      neutralInverted: white,
-      positive: getAccessibleVariant(positive),
-      positiveLight,
-      promote: getAccessibleVariant(promote),
-      promoteLight,
-      rating: black,
-      secondary,
-      secondaryInverted: "hsla(0, 0%, 100%, 0.65)"
-    },
-    background: {
-      body: "whitesmoke",
-      bodyDark: "black",
-      brand: black,
-      brandAccent,
-      brandAccentActive: getActiveColor(brandAccent),
-      brandAccentHover: getHoverColor(brandAccent),
-      brandAccentSoft: tint(0.925, brandAccent),
-      brandAccentSoftActive: tint(0.85, brandAccent),
-      brandAccentSoftHover: tint(0.9, brandAccent),
-      caution,
-      cautionLight: getLightVariant(caution),
-      critical,
-      criticalActive: getActiveColor(critical),
-      criticalHover: getHoverColor(critical),
-      criticalLight: criticalLightBackground,
-      criticalSoft: tint(0.925, critical),
-      criticalSoftActive: tint(0.85, critical),
-      criticalSoftHover: tint(0.9, critical),
-      formAccent,
-      formAccentActive: getActiveColor(formAccent),
-      formAccentHover: getHoverColor(formAccent),
-      formAccentSoft: tint(0.925, formAccent),
-      formAccentSoftActive: tint(0.85, formAccent),
-      formAccentSoftHover: tint(0.9, formAccent),
-      info,
-      infoLight: getLightVariant(info),
-      neutral,
-      neutralActive: darken(0.05, neutral),
-      neutralHover: lighten(0.05, neutral),
-      neutralLight: darken(0.04, getLightVariant(neutral)),
-      neutralSoft,
-      neutralSoftActive: darken(0.05, neutralSoft),
-      neutralSoftHover: darken(0.025, neutralSoft),
-      positive,
-      positiveLight: getLightVariant(positive),
-      promote,
-      promoteLight: getLightVariant(promote),
-      surface: white,
-      surfaceDark: "#222"
-    }
-  }
-};
-const tokens$1 = tokens;
-export {
-  tokens$1 as tokens
-};

package/dist/styles/lib/themes/wireframe/wireframeTheme.css.cjs

@@ -1,8 +0,0 @@
-"use strict";
-const __vanilla_filescope__ = require("@vanilla-extract/css/fileScope");
-const styles_lib_themes_wireframe_tokens_cjs = require("./tokens.cjs");
-const styles_lib_themes_makeBraidTheme_cjs = require("../makeBraidTheme.cjs");
-__vanilla_filescope__.setFileScope("src/lib/themes/wireframe/wireframeTheme.css.ts", "braid-design-system");
-const wireframe = styles_lib_themes_makeBraidTheme_cjs.makeBraidTheme(styles_lib_themes_wireframe_tokens_cjs.tokens);
-__vanilla_filescope__.endFileScope();
-exports.wireframe = wireframe;

package/dist/styles/lib/utils/align.cjs

@@ -1,16 +0,0 @@
-"use strict";
-const styles_lib_css_atoms_sprinkles_css_cjs = require("../css/atoms/sprinkles.css.cjs");
-const alignToFlexAlignLookup = {
-  left: "flexStart",
-  center: "center",
-  right: "flexEnd"
-};
-const alignToFlexAlign = (align) => align ? styles_lib_css_atoms_sprinkles_css_cjs.mapResponsiveValue(align, (value) => alignToFlexAlignLookup[value]) : void 0;
-const alignYToFlexAlignLookup = {
-  top: "flexStart",
-  center: "center",
-  bottom: "flexEnd"
-};
-const alignYToFlexAlign = (alignY) => alignY ? styles_lib_css_atoms_sprinkles_css_cjs.mapResponsiveValue(alignY, (value) => alignYToFlexAlignLookup[value]) : void 0;
-exports.alignToFlexAlign = alignToFlexAlign;
-exports.alignYToFlexAlign = alignYToFlexAlign;

package/dist/styles/lib/utils/collapsibleAlignmentProps.cjs

@@ -1,84 +0,0 @@
-"use strict";
-const React = require("react");
-const styles_lib_css_atoms_sprinkles_css_cjs = require("../css/atoms/sprinkles.css.cjs");
-const styles_lib_components_Hidden_Hidden_cjs = require("../components/Hidden/Hidden.cjs");
-const styles_lib_components_Column_Column_cjs = require("../components/Column/Column.cjs");
-const styles_lib_utils_align_cjs = require("./align.cjs");
-function invertAlignment(alignment) {
-  if (alignment === "flexStart") {
-    return "flexEnd";
-  }
-  if (alignment === "flexEnd") {
-    return "flexStart";
-  }
-  return alignment;
-}
-function resolveCollapsibleAlignmentProps({
-  align,
-  alignY,
-  collapseBelow,
-  reverse
-}) {
-  const [collapseMobile, collapseTablet, collapseDesktop] = styles_lib_components_Hidden_Hidden_cjs.resolveResponsiveRangeProps({
-    below: collapseBelow
-  });
-  const rowReverseTablet = collapseMobile && reverse;
-  const rowReverseDesktop = (collapseMobile || collapseTablet) && reverse;
-  const rowReverseWide = (collapseMobile || collapseTablet || collapseDesktop) && reverse;
-  const normalizedAlign = styles_lib_css_atoms_sprinkles_css_cjs.normalizeResponsiveValue(
-    styles_lib_utils_align_cjs.alignToFlexAlign(align) || "flexStart"
-  );
-  const {
-    mobile: justifyContentMobile = "flexStart",
-    tablet: justifyContentTablet = justifyContentMobile,
-    desktop: justifyContentDesktop = justifyContentTablet,
-    wide: justifyContentWide = justifyContentDesktop
-  } = normalizedAlign;
-  return {
-    collapseMobile,
-    collapseTablet,
-    collapseDesktop,
-    orderChildren: (children) => {
-      const childrenArray = React.Children.toArray(children);
-      return !collapseMobile && !collapseTablet && reverse ? childrenArray.reverse() : childrenArray;
-    },
-    collapsibleAlignmentProps: {
-      display: styles_lib_components_Column_Column_cjs.optimizeResponsiveArray([
-        collapseMobile ? "block" : "flex",
-        collapseTablet ? "block" : "flex",
-        collapseDesktop ? "block" : "flex",
-        "flex"
-      ]),
-      flexDirection: styles_lib_components_Column_Column_cjs.optimizeResponsiveArray([
-        collapseMobile ? "column" : "row",
-        // eslint-disable-next-line no-nested-ternary
-        collapseTablet ? "column" : rowReverseTablet ? "rowReverse" : "row",
-        // eslint-disable-next-line no-nested-ternary
-        collapseDesktop ? "column" : rowReverseDesktop ? "rowReverse" : "row",
-        rowReverseWide ? "rowReverse" : "row"
-      ]),
-      justifyContent: align ? styles_lib_components_Column_Column_cjs.optimizeResponsiveArray([
-        justifyContentMobile,
-        rowReverseTablet ? invertAlignment(justifyContentTablet) : justifyContentTablet,
-        rowReverseDesktop ? invertAlignment(justifyContentDesktop) : justifyContentDesktop,
-        rowReverseWide ? invertAlignment(justifyContentWide) : justifyContentWide
-      ]) : void 0,
-      alignItems: alignY ? styles_lib_utils_align_cjs.alignYToFlexAlign(alignY) : void 0
-    },
-    collapsibleAlignmentChildProps: {
-      display: styles_lib_components_Column_Column_cjs.optimizeResponsiveArray([
-        collapseMobile && justifyContentMobile !== "flexStart" ? "flex" : "block",
-        collapseTablet && justifyContentTablet !== "flexStart" ? "flex" : "block",
-        collapseDesktop && justifyContentDesktop !== "flexStart" ? "flex" : "block",
-        "block"
-      ]),
-      justifyContent: styles_lib_components_Column_Column_cjs.optimizeResponsiveArray([
-        justifyContentMobile,
-        justifyContentTablet,
-        justifyContentDesktop,
-        justifyContentWide
-      ])
-    }
-  };
-}
-exports.resolveCollapsibleAlignmentProps = resolveCollapsibleAlignmentProps;

package/dist/styles/lib/utils/collapsibleAlignmentProps.mjs

@@ -1,85 +0,0 @@
-import { Children } from "react";
-import { normalizeResponsiveValue } from "../css/atoms/sprinkles.css.mjs";
-import { resolveResponsiveRangeProps } from "../components/Hidden/Hidden.mjs";
-import { optimizeResponsiveArray } from "../components/Column/Column.mjs";
-import { alignToFlexAlign, alignYToFlexAlign } from "./align.mjs";
-function invertAlignment(alignment) {
-  if (alignment === "flexStart") {
-    return "flexEnd";
-  }
-  if (alignment === "flexEnd") {
-    return "flexStart";
-  }
-  return alignment;
-}
-function resolveCollapsibleAlignmentProps({
-  align,
-  alignY,
-  collapseBelow,
-  reverse
-}) {
-  const [collapseMobile, collapseTablet, collapseDesktop] = resolveResponsiveRangeProps({
-    below: collapseBelow
-  });
-  const rowReverseTablet = collapseMobile && reverse;
-  const rowReverseDesktop = (collapseMobile || collapseTablet) && reverse;
-  const rowReverseWide = (collapseMobile || collapseTablet || collapseDesktop) && reverse;
-  const normalizedAlign = normalizeResponsiveValue(
-    alignToFlexAlign(align) || "flexStart"
-  );
-  const {
-    mobile: justifyContentMobile = "flexStart",
-    tablet: justifyContentTablet = justifyContentMobile,
-    desktop: justifyContentDesktop = justifyContentTablet,
-    wide: justifyContentWide = justifyContentDesktop
-  } = normalizedAlign;
-  return {
-    collapseMobile,
-    collapseTablet,
-    collapseDesktop,
-    orderChildren: (children) => {
-      const childrenArray = Children.toArray(children);
-      return !collapseMobile && !collapseTablet && reverse ? childrenArray.reverse() : childrenArray;
-    },
-    collapsibleAlignmentProps: {
-      display: optimizeResponsiveArray([
-        collapseMobile ? "block" : "flex",
-        collapseTablet ? "block" : "flex",
-        collapseDesktop ? "block" : "flex",
-        "flex"
-      ]),
-      flexDirection: optimizeResponsiveArray([
-        collapseMobile ? "column" : "row",
-        // eslint-disable-next-line no-nested-ternary
-        collapseTablet ? "column" : rowReverseTablet ? "rowReverse" : "row",
-        // eslint-disable-next-line no-nested-ternary
-        collapseDesktop ? "column" : rowReverseDesktop ? "rowReverse" : "row",
-        rowReverseWide ? "rowReverse" : "row"
-      ]),
-      justifyContent: align ? optimizeResponsiveArray([
-        justifyContentMobile,
-        rowReverseTablet ? invertAlignment(justifyContentTablet) : justifyContentTablet,
-        rowReverseDesktop ? invertAlignment(justifyContentDesktop) : justifyContentDesktop,
-        rowReverseWide ? invertAlignment(justifyContentWide) : justifyContentWide
-      ]) : void 0,
-      alignItems: alignY ? alignYToFlexAlign(alignY) : void 0
-    },
-    collapsibleAlignmentChildProps: {
-      display: optimizeResponsiveArray([
-        collapseMobile && justifyContentMobile !== "flexStart" ? "flex" : "block",
-        collapseTablet && justifyContentTablet !== "flexStart" ? "flex" : "block",
-        collapseDesktop && justifyContentDesktop !== "flexStart" ? "flex" : "block",
-        "block"
-      ]),
-      justifyContent: optimizeResponsiveArray([
-        justifyContentMobile,
-        justifyContentTablet,
-        justifyContentDesktop,
-        justifyContentWide
-      ])
-    }
-  };
-}
-export {
-  resolveCollapsibleAlignmentProps
-};

package/dist/styles/lib/utils/index.cjs

@@ -1,154 +0,0 @@
-"use strict";
-const polished = require("polished");
-const gradientParser = require("gradient-parser");
-const styles_lib_css_responsiveStyle_cjs = require("../css/responsiveStyle.cjs");
-const getLinearGradientColors = (color) => {
-  const gradients = gradientParser.parse(color);
-  return gradients[0].colorStops.map(({ type, value }) => {
-    if (typeof value !== "string") {
-      throw new Error(
-        "Gradient parsing in Braid currently only supports hex/literal values"
-      );
-    }
-    return `${type === "hex" ? "#" : ""}${value}`;
-  });
-};
-const calculateYiq = (color) => {
-  const { red, green, blue } = polished.parseToRgb(color);
-  return (red * 299 + green * 587 + blue * 114) / 1e3;
-};
-const isLight = (inputColor, foregroundColor = "#000") => {
-  const colors = /^linear-gradient/.test(inputColor) ? getLinearGradientColors(inputColor) : [inputColor];
-  const foregroundYiq = calculateYiq(foregroundColor);
-  return colors.some((color) => {
-    const yiq = calculateYiq(color);
-    const midpoint = 256 / 2;
-    const foregroundOffset = foregroundYiq / 2;
-    return yiq >= midpoint + foregroundOffset;
-  });
-};
-const AA_TEXT_CONTRAST = 4.52;
-function contrast(color1, color2) {
-  const L1 = polished.getLuminance(color1) + 0.05;
-  const L2 = polished.getLuminance(color2) + 0.05;
-  return L1 < L2 ? L2 / L1 : L1 / L2;
-}
-function findClosestAccessibleLighterColor(inputColor, fixedColor, contrastRatio = AA_TEXT_CONTRAST) {
-  const normalisedInput = polished.toColorString(polished.parseToRgb(inputColor));
-  const normalisedFixed = polished.toColorString(polished.parseToRgb(fixedColor));
-  const { hue, saturation, lightness } = polished.parseToHsl(normalisedInput);
-  let minLightness = lightness;
-  let maxLightness = 0.98;
-  let maxColor = polished.hslToColorString({ hue, saturation, lightness: maxLightness });
-  let minColor = polished.hslToColorString({ hue, saturation, lightness });
-  if (contrast(normalisedInput, normalisedFixed) >= contrastRatio) {
-    return inputColor;
-  }
-  const actualRatio = contrast(maxColor, normalisedFixed);
-  if (actualRatio < contrastRatio) {
-    throw new Error(
-      `Desired contrast ratio cannot be achieved,
-Foreground: ${inputColor}
-Background:${fixedColor}
-Desired Contrast:${contrastRatio}
-Actual Contrast:${actualRatio}`
-    );
-  }
-  let lastMinColor;
-  let lastMaxColor;
-  let adjustedLightness;
-  let adjustedColor = normalisedInput;
-  while (minColor !== lastMinColor || maxColor !== lastMaxColor) {
-    lastMinColor = minColor;
-    lastMaxColor = maxColor;
-    adjustedLightness = (minLightness + maxLightness) / 2;
-    adjustedColor = polished.setLightness(adjustedLightness, adjustedColor);
-    if (contrast(adjustedColor, normalisedFixed) < contrastRatio) {
-      minLightness = adjustedLightness;
-      minColor = adjustedColor;
-    } else {
-      maxLightness = adjustedLightness;
-      maxColor = adjustedColor;
-    }
-  }
-  return maxColor;
-}
-function findClosestAccessibleDarkerColor(inputColor, fixedColor, contrastRatio = AA_TEXT_CONTRAST) {
-  const normalisedInput = polished.toColorString(polished.parseToRgb(inputColor));
-  const normalisedFixed = polished.toColorString(polished.parseToRgb(fixedColor));
-  const { hue, saturation, lightness } = polished.parseToHsl(normalisedInput);
-  let minLightness = 0.02;
-  let maxLightness = lightness;
-  let maxColor = polished.hslToColorString({ hue, saturation, lightness: minLightness });
-  let minColor = polished.hslToColorString({ hue, saturation, lightness });
-  if (contrast(normalisedInput, normalisedFixed) >= contrastRatio) {
-    return inputColor;
-  }
-  const actualRatio = contrast(maxColor, normalisedFixed);
-  if (actualRatio < contrastRatio) {
-    throw new Error(
-      `Desired contrast ratio cannot be achieved,
-Foreground: ${inputColor}
-Background:${fixedColor}
-Desired Contrast:${contrastRatio}
-Actual Contrast:${actualRatio}`
-    );
-  }
-  let lastMinColor;
-  let lastMaxColor;
-  let adjustedLightness;
-  let adjustedColor = normalisedInput;
-  while (minColor !== lastMinColor || maxColor !== lastMaxColor) {
-    lastMinColor = minColor;
-    lastMaxColor = maxColor;
-    adjustedLightness = (minLightness + maxLightness) / 2;
-    adjustedColor = polished.setLightness(adjustedLightness, adjustedColor);
-    if (contrast(adjustedColor, normalisedFixed) < contrastRatio) {
-      maxLightness = adjustedLightness;
-      maxColor = adjustedColor;
-    } else {
-      minLightness = adjustedLightness;
-      minColor = adjustedColor;
-    }
-  }
-  return minColor;
-}
-const smoothSaturation = (saturation, luminance) => {
-  const isBright = luminance > 0.6;
-  if (isBright) {
-    return saturation * 0.8;
-  }
-  return saturation * 0.45;
-};
-const smoothLightness = (lightness, luminance) => {
-  const isBright = luminance > 0.6;
-  if (isBright) {
-    return 0.95 - lightness * 0.03;
-  }
-  return 0.95 - lightness * 0.06;
-};
-function getLightVariant(color) {
-  const { hue, saturation, lightness } = polished.parseToHsl(color);
-  const luminance = polished.getLuminance(color);
-  return polished.toColorString({
-    hue,
-    saturation: smoothSaturation(saturation, luminance),
-    lightness: smoothLightness(lightness, luminance)
-  });
-}
-function getAccessibleVariant(color, background) {
-  return findClosestAccessibleDarkerColor(
-    color,
-    background ?? getLightVariant(color),
-    AA_TEXT_CONTRAST
-  );
-}
-const mapToProperty = (property, breakpoint) => (value) => {
-  const styleRule = { [property]: value };
-  return breakpoint ? styles_lib_css_responsiveStyle_cjs.responsiveStyle({ [breakpoint]: styleRule }) : styleRule;
-};
-exports.findClosestAccessibleLighterColor = findClosestAccessibleLighterColor;
-exports.getAccessibleVariant = getAccessibleVariant;
-exports.getLightVariant = getLightVariant;
-exports.isLight = isLight;
-exports.mapToProperty = mapToProperty;