braid-design-system 32.16.0 → 32.16.2

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

@@ -1,489 +0,0 @@
-import { rgba, darken, saturate, lighten } from "polished";
-import robotoMetrics from "@capsizecss/metrics/roboto.js";
-import merge from "lodash/merge.js";
-const palette = {
-  grey: {
-    900: "#0E131B",
-    800: "#1C2330",
-    700: "#2E3849",
-    600: "#414C63",
-    500: "#5A6881",
-    400: "#838FA5",
-    300: "#ABB3C1",
-    200: "#D2D7DF",
-    100: "#EAECF1",
-    75: "#F3F5F7",
-    50: "#F7F8FB"
-  },
-  seekPink: {
-    900: "#520018",
-    800: "#76002C",
-    700: "#A00043",
-    600: "#C6005B",
-    500: "#E60278",
-    400: "#EE399E",
-    300: "#F470BD",
-    200: "#F8B1DC",
-    100: "#FCD9EF",
-    50: "#FEEFFA"
-  },
-  seekBlue: {
-    900: "#00061B",
-    800: "#020F30",
-    700: "#051A49",
-    600: "#072462",
-    500: "#0D3880",
-    400: "#4166A4",
-    300: "#7795C2",
-    200: "#B6C7E0",
-    100: "#DCE5F2",
-    50: "#F0F6FC"
-  },
-  seekBlueLight: {
-    900: "#081C60",
-    800: "#122F83",
-    700: "#1E47A9",
-    600: "#2A60CD",
-    500: "#4B84E7",
-    400: "#6AA1F3",
-    300: "#99BFF7",
-    200: "#C9DEFA",
-    100: "#E5F0FD",
-    50: "#F0F7FE"
-  },
-  red: {
-    900: "#750606",
-    800: "#941110",
-    700: "#B91E1E",
-    600: "#DC2C2D",
-    500: "#F94344",
-    400: "#FA6D6C",
-    300: "#FB999A",
-    200: "#FDC8C8",
-    100: "#FFE3E2",
-    50: "#FEF3F3"
-  },
-  orange: {
-    900: "#751704",
-    800: "#95290C",
-    700: "#BB4116",
-    600: "#E05821",
-    500: "#FD7532",
-    400: "#FD9C60",
-    300: "#FEBB90",
-    200: "#FEDAC2",
-    100: "#FEEEE1",
-    50: "#FEF9F2"
-  },
-  yellow: {
-    900: "#723D02",
-    800: "#945B07",
-    700: "#B9800D",
-    600: "#DFA414",
-    500: "#FDC221",
-    400: "#FDD651",
-    300: "#FEE384",
-    200: "#FEF0BC",
-    100: "#FEF8DE",
-    50: "#FEFDF1"
-  },
-  green: {
-    900: "#073408",
-    800: "#125113",
-    700: "#1E771D",
-    600: "#289927",
-    500: "#3EB73D",
-    400: "#6ACF6A",
-    300: "#98DE97",
-    200: "#C8EDC8",
-    100: "#E3F7E3",
-    50: "#F4FDF4"
-  },
-  mint: {
-    900: "#043820",
-    800: "#0A5435",
-    700: "#12784F",
-    600: "#199969",
-    500: "#28B888",
-    400: "#59CFA9",
-    300: "#8BDEC5",
-    200: "#C1EDE1",
-    100: "#E2F7F1",
-    50: "#F3FDFB"
-  },
-  cyan: {
-    900: "#053842",
-    800: "#095863",
-    700: "#137D8B",
-    600: "#19A1AF",
-    500: "#28BFCE",
-    400: "#56D3DF",
-    300: "#88E2E9",
-    200: "#BEEFF3",
-    100: "#E1F8FA",
-    50: "#F2FDFD"
-  },
-  blue: {
-    900: "#072254",
-    800: "#123976",
-    700: "#1D559D",
-    600: "#2A71C1",
-    500: "#3E8FE0",
-    400: "#6AB0EA",
-    300: "#98C9F1",
-    200: "#C8E1F7",
-    100: "#E3F2FB",
-    50: "#F4FBFE"
-  },
-  indigo: {
-    900: "#08105F",
-    800: "#152081",
-    700: "#2433A7",
-    600: "#3148C9",
-    500: "#4964E9",
-    400: "#748CF0",
-    300: "#9FB0F5",
-    200: "#CBD5F9",
-    100: "#E6EAFC",
-    50: "#F4F6FE"
-  },
-  violet: {
-    900: "#120C64",
-    800: "#241A83",
-    700: "#392BA7",
-    600: "#503DC9",
-    500: "#6E56E6",
-    400: "#937FEF",
-    300: "#B5A7F4",
-    200: "#D8D0FA",
-    100: "#ECE9FC",
-    50: "#F8F6FE"
-  },
-  purple: {
-    900: "#3E0F65",
-    800: "#5B2084",
-    700: "#7F35A9",
-    600: "#A04BCB",
-    500: "#BE68E8",
-    400: "#D48EF1",
-    300: "#E1B2F5",
-    200: "#F0D6FA",
-    100: "#F9EBFD",
-    50: "#FDF7FE"
-  }
-};
-const extractFontMetricsForTheme = ({
-  capHeight,
-  ascent,
-  descent,
-  lineGap,
-  unitsPerEm
-}) => ({
-  capHeight,
-  ascent,
-  descent,
-  lineGap,
-  unitsPerEm
-});
-const legacyViolet = {
-  900: "#1E0B65",
-  800: "#341B87",
-  700: "#512EAA",
-  600: "#6C41CE",
-  500: "#8B5CEB",
-  400: "#AD84F2",
-  300: "#C6ACF5",
-  200: "#E1D1F9",
-  100: "#F1E8FD",
-  50: "#FAF5FE"
-};
-const makeTokens = ({
-  name,
-  displayName,
-  brand,
-  brandAccent: brandAccent2,
-  brandAccentLight,
-  brandAccentActive,
-  brandAccentHover,
-  brandAccentSoft: brandAccentSoft2,
-  brandAccentSoftActive,
-  brandAccentSoftHover,
-  tokenOverrides = {}
-}) => {
-  const formAccent = palette.indigo["500"];
-  const critical = palette.red["700"];
-  const focus = rgba(palette.indigo["300"], 0.7);
-  const white = "#fff";
-  const tokens2 = {
-    name,
-    displayName,
-    legacy: true,
-    typography: {
-      fontFamily: `Roboto, "Helvetica Neue", HelveticaNeue, Helvetica, Arial, sans-serif`,
-      webFont: null,
-      fontMetrics: extractFontMetricsForTheme(robotoMetrics),
-      fontWeight: {
-        regular: 400,
-        medium: 600,
-        strong: 700
-      },
-      heading: {
-        weight: {
-          weak: "regular",
-          regular: "medium"
-        },
-        level: {
-          "1": {
-            mobile: {
-              fontSize: 28,
-              rows: 9
-            },
-            tablet: {
-              fontSize: 42,
-              rows: 11
-            }
-          },
-          "2": {
-            mobile: {
-              fontSize: 21,
-              rows: 8
-            },
-            tablet: {
-              fontSize: 28,
-              rows: 9
-            }
-          },
-          "3": {
-            mobile: {
-              fontSize: 21,
-              rows: 7
-            },
-            tablet: {
-              fontSize: 21,
-              rows: 7
-            }
-          },
-          "4": {
-            mobile: {
-              fontSize: 18,
-              rows: 7
-            },
-            tablet: {
-              fontSize: 18,
-              rows: 7
-            }
-          }
-        }
-      },
-      text: {
-        xsmall: {
-          mobile: {
-            fontSize: 12,
-            rows: 5
-          },
-          tablet: {
-            fontSize: 12,
-            rows: 5
-          }
-        },
-        small: {
-          mobile: {
-            fontSize: 14,
-            rows: 5
-          },
-          tablet: {
-            fontSize: 14,
-            rows: 5
-          }
-        },
-        standard: {
-          mobile: {
-            fontSize: 16,
-            rows: 6
-          },
-          tablet: {
-            fontSize: 16,
-            rows: 6
-          }
-        },
-        large: {
-          mobile: {
-            fontSize: 18,
-            rows: 7
-          },
-          tablet: {
-            fontSize: 18,
-            rows: 7
-          }
-        }
-      }
-    },
-    contentWidth: {
-      xsmall: 400,
-      small: 660,
-      medium: 940,
-      large: 1280
-    },
-    grid: 4,
-    touchableSize: 11,
-    space: {
-      gutter: 6,
-      xxsmall: 1,
-      xsmall: 2,
-      small: 3,
-      medium: 5,
-      large: 8,
-      xlarge: 12,
-      xxlarge: 24,
-      xxxlarge: 30
-    },
-    transforms: {
-      touchable: "scale(0.95)"
-    },
-    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: "2px",
-        standard: "4px",
-        large: "6px",
-        xlarge: "10px"
-      },
-      width: {
-        standard: 1,
-        large: 2
-      },
-      color: {
-        brandAccent: brandAccent2,
-        brandAccentLight,
-        caution: palette.yellow["500"],
-        cautionLight: palette.yellow["300"],
-        critical,
-        criticalLight: palette.red["300"],
-        field: palette.grey["400"],
-        focus,
-        formAccent,
-        formAccentLight: palette.indigo["300"],
-        info: palette.blue["700"],
-        infoLight: palette.blue["300"],
-        neutral: palette.grey["700"],
-        neutralLight: palette.grey["200"],
-        neutralInverted: white,
-        positive: palette.mint["700"],
-        positiveLight: palette.mint["300"],
-        promote: legacyViolet["700"],
-        promoteLight: legacyViolet["300"]
-      }
-    },
-    focusRingSize: 3,
-    shadows: {
-      small: [
-        `0 2px 4px 0px ${rgba(palette.grey["800"], 0.1)}`,
-        `0 2px 2px -2px ${rgba(palette.grey["800"], 0.1)}`,
-        `0 4px 4px -4px ${rgba(palette.grey["800"], 0.2)}`
-      ].join(", "),
-      medium: [
-        `0 2px 4px 0px ${rgba(palette.grey["800"], 0.1)}`,
-        `0 8px 8px -4px ${rgba(palette.grey["800"], 0.1)}`,
-        `0 12px 12px -8px ${rgba(palette.grey["800"], 0.2)}`
-      ].join(", "),
-      large: [
-        `0 2px 4px 0px ${rgba(palette.grey["800"], 0.1)}`,
-        `0 12px 12px -4px ${rgba(palette.grey["800"], 0.1)}`,
-        `0 20px 20px -12px ${rgba(palette.grey["800"], 0.2)}`
-      ].join(", ")
-    },
-    color: {
-      foreground: {
-        brandAccent: brandAccent2,
-        brandAccentLight,
-        caution: palette.yellow["900"],
-        cautionLight: palette.yellow["300"],
-        critical,
-        criticalLight: palette.red["300"],
-        formAccent,
-        formAccentLight: palette.indigo["300"],
-        info: palette.blue["700"],
-        infoLight: palette.blue["300"],
-        link: formAccent,
-        linkLight: palette.indigo["300"],
-        linkHover: formAccent,
-        linkVisited: legacyViolet["700"],
-        linkLightVisited: legacyViolet["300"],
-        neutral: palette.grey["700"],
-        neutralInverted: white,
-        positive: palette.mint["700"],
-        positiveLight: palette.mint["300"],
-        promote: legacyViolet["700"],
-        promoteLight: legacyViolet["300"],
-        rating: "#f57c00",
-        secondary: palette.grey["500"],
-        secondaryInverted: rgba("#fff", 0.65)
-      },
-      background: {
-        body: palette.grey["50"],
-        bodyDark: palette.grey["900"],
-        brand,
-        brandAccent: brandAccent2,
-        brandAccentActive,
-        brandAccentHover,
-        brandAccentSoft: brandAccentSoft2,
-        brandAccentSoftActive,
-        brandAccentSoftHover,
-        caution: palette.yellow["500"],
-        cautionLight: palette.yellow["100"],
-        critical,
-        criticalActive: darken(0.05, critical),
-        criticalHover: saturate(0.1, lighten(0.05, critical)),
-        criticalLight: palette.red["100"],
-        criticalSoft: palette.red["50"],
-        criticalSoftActive: darken(0.05, palette.red["50"]),
-        criticalSoftHover: darken(0.025, palette.red["50"]),
-        formAccent,
-        formAccentActive: darken(0.05, formAccent),
-        formAccentHover: saturate(0.5, lighten(0.075, formAccent)),
-        formAccentSoft: palette.indigo["50"],
-        formAccentSoftActive: darken(0.05, palette.indigo["50"]),
-        formAccentSoftHover: darken(0.025, palette.indigo["50"]),
-        info: palette.blue["700"],
-        infoLight: palette.blue["100"],
-        neutral: palette.grey["700"],
-        neutralActive: darken(0.05, palette.grey["700"]),
-        neutralHover: lighten(0.05, palette.grey["700"]),
-        neutralLight: palette.grey["100"],
-        neutralSoft: palette.grey["50"],
-        neutralSoftActive: darken(0.05, palette.grey["50"]),
-        neutralSoftHover: darken(0.025, palette.grey["50"]),
-        positive: palette.mint["700"],
-        positiveLight: palette.mint["100"],
-        promote: legacyViolet["700"],
-        promoteLight: legacyViolet["100"],
-        surface: white,
-        surfaceDark: palette.grey["800"]
-      }
-    }
-  };
-  return merge(tokens2, tokenOverrides);
-};
-const brandAccent = palette.seekPink["500"];
-const brandAccentSoft = palette.seekPink["50"];
-const tokens = makeTokens({
-  name: "apac",
-  displayName: "APAC",
-  brand: palette.seekBlue["500"],
-  brandAccent,
-  brandAccentLight: palette.seekPink["200"],
-  brandAccentActive: darken(0.05, brandAccent),
-  brandAccentHover: lighten(0.05, brandAccent),
-  brandAccentSoft,
-  brandAccentSoftActive: darken(0.05, brandAccentSoft),
-  brandAccentSoftHover: darken(0.025, brandAccentSoft)
-});
-export {
-  extractFontMetricsForTheme,
-  makeTokens,
-  palette,
-  tokens
-};

package/dist/styles/lib/themes/docs/docsTheme.css.cjs

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