@purpur/library 9.7.3 → 9.7.5

package/tokens/spacing/variables.dark.d.ts

@@ -0,0 +1,15 @@
+export const purpurSpacing0: string;
+export const purpurSpacing10: string;
+export const purpurSpacing25: string;
+export const purpurSpacing50: string;
+export const purpurSpacing100: string;
+export const purpurSpacing150: string;
+export const purpurSpacing200: string;
+export const purpurSpacing250: string;
+export const purpurSpacing300: string;
+export const purpurSpacing400: string;
+export const purpurSpacing600: string;
+export const purpurSpacing800: string;
+export const purpurSpacing1000: string;
+export const purpurSpacing1200: string;
+export const purpurSpacing1600: string;

package/tokens/spacing/variables.dark.js

@@ -0,0 +1,15 @@
+export const purpurSpacing0 = "0rem";
+export const purpurSpacing10 = "0.0625rem";
+export const purpurSpacing25 = "0.125rem";
+export const purpurSpacing50 = "0.25rem";
+export const purpurSpacing100 = "0.5rem";
+export const purpurSpacing150 = "0.75rem";
+export const purpurSpacing200 = "1rem";
+export const purpurSpacing250 = "1.25rem";
+export const purpurSpacing300 = "1.5rem";
+export const purpurSpacing400 = "2rem";
+export const purpurSpacing600 = "3rem";
+export const purpurSpacing800 = "4rem";
+export const purpurSpacing1000 = "5rem";
+export const purpurSpacing1200 = "6rem";
+export const purpurSpacing1600 = "8rem";

package/tokens/spacing/variables.dark.json

@@ -0,0 +1,19 @@
+{
+  "spacing": {
+    "0": "0rem",
+    "10": "0.0625rem",
+    "25": "0.125rem",
+    "50": "0.25rem",
+    "100": "0.5rem",
+    "150": "0.75rem",
+    "200": "1rem",
+    "250": "1.25rem",
+    "300": "1.5rem",
+    "400": "2rem",
+    "600": "3rem",
+    "800": "4rem",
+    "1000": "5rem",
+    "1200": "6rem",
+    "1600": "8rem"
+  }
+}

package/tokens/spacing/variables.dark.scss

@@ -0,0 +1,15 @@
+$purpur-spacing-0: 0rem;
+$purpur-spacing-10: 0.0625rem;
+$purpur-spacing-25: 0.125rem;
+$purpur-spacing-50: 0.25rem;
+$purpur-spacing-100: 0.5rem;
+$purpur-spacing-150: 0.75rem;
+$purpur-spacing-200: 1rem;
+$purpur-spacing-250: 1.25rem;
+$purpur-spacing-300: 1.5rem;
+$purpur-spacing-400: 2rem;
+$purpur-spacing-600: 3rem;
+$purpur-spacing-800: 4rem;
+$purpur-spacing-1000: 5rem;
+$purpur-spacing-1200: 6rem;
+$purpur-spacing-1600: 8rem;

package/tokens/spacing/variables.js

@@ -0,0 +1,23 @@
+export const purpurSpacing0 = "0rem";
+export const purpurSpacing10 = "0.0625rem";
+export const purpurSpacing25 = "0.125rem";
+export const purpurSpacing50 = "0.25rem";
+export const purpurSpacing100 = "0.5rem";
+export const purpurSpacing150 = "0.75rem";
+export const purpurSpacing200 = "1rem";
+export const purpurSpacing250 = "1.25rem";
+export const purpurSpacing300 = "1.5rem";
+export const purpurSpacing400 = "2rem";
+export const purpurSpacing600 = "3rem";
+export const purpurSpacing800 = "4rem";
+export const purpurSpacing1000 = "5rem";
+export const purpurSpacing1200 = "6rem";
+export const purpurSpacing1600 = "8rem";
+export const purpurSpacingGutterSm = "1rem";
+export const purpurSpacingGutterMd = "1.5rem";
+export const purpurSpacingGutterLg = "1.5rem";
+export const purpurSpacingGutterXl = "1.5rem";
+export const purpurSpacingPagePaddingSm = "1rem";
+export const purpurSpacingPagePaddingMd = "1.5rem";
+export const purpurSpacingPagePaddingLg = "3rem";
+export const purpurSpacingPagePaddingXl = "3rem";

package/tokens/spacing/variables.json

@@ -0,0 +1,31 @@
+{
+  "spacing": {
+    "0": "0rem",
+    "10": "0.0625rem",
+    "25": "0.125rem",
+    "50": "0.25rem",
+    "100": "0.5rem",
+    "150": "0.75rem",
+    "200": "1rem",
+    "250": "1.25rem",
+    "300": "1.5rem",
+    "400": "2rem",
+    "600": "3rem",
+    "800": "4rem",
+    "1000": "5rem",
+    "1200": "6rem",
+    "1600": "8rem",
+    "gutter": {
+      "sm": "1rem",
+      "md": "1.5rem",
+      "lg": "1.5rem",
+      "xl": "1.5rem"
+    },
+    "page-padding": {
+      "sm": "1rem",
+      "md": "1.5rem",
+      "lg": "3rem",
+      "xl": "3rem"
+    }
+  }
+}

package/tokens/spacing/variables.scss

@@ -0,0 +1,23 @@
+$purpur-spacing-0: 0rem;
+$purpur-spacing-10: 0.0625rem;
+$purpur-spacing-25: 0.125rem;
+$purpur-spacing-50: 0.25rem;
+$purpur-spacing-100: 0.5rem;
+$purpur-spacing-150: 0.75rem;
+$purpur-spacing-200: 1rem;
+$purpur-spacing-250: 1.25rem;
+$purpur-spacing-300: 1.5rem;
+$purpur-spacing-400: 2rem;
+$purpur-spacing-600: 3rem;
+$purpur-spacing-800: 4rem;
+$purpur-spacing-1000: 5rem;
+$purpur-spacing-1200: 6rem;
+$purpur-spacing-1600: 8rem;
+$purpur-spacing-gutter-sm: $purpur-spacing-200;
+$purpur-spacing-gutter-md: $purpur-spacing-300;
+$purpur-spacing-gutter-lg: $purpur-spacing-300;
+$purpur-spacing-gutter-xl: $purpur-spacing-300;
+$purpur-spacing-page-padding-sm: $purpur-spacing-200;
+$purpur-spacing-page-padding-md: $purpur-spacing-300;
+$purpur-spacing-page-padding-lg: $purpur-spacing-600;
+$purpur-spacing-page-padding-xl: $purpur-spacing-600;

package/tokens/typography/variables.css

@@ -0,0 +1,30 @@
+:root,
+[data-color-scheme="light"] {
+  --purpur-typography-family-default: TeliaSans, Helvetica, Arial, "Lucida Grande", sans-serif;
+  --purpur-typography-family-display: TeliaSansHeading, Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  --purpur-typography-weight-normal: 400;
+  --purpur-typography-weight-medium: 500;
+  --purpur-typography-weight-bold: 700;
+  --purpur-typography-line-height-tight: 100%;
+  --purpur-typography-line-height-snug: 110%;
+  --purpur-typography-line-height-default: 125%;
+  --purpur-typography-line-height-loose: 150%;
+  --purpur-typography-line-height-looser: 175%;
+  --purpur-typography-scale-50: calc(0.75rem * var(--purpur-rescale));
+  --purpur-typography-scale-75: calc(0.875rem * var(--purpur-rescale));
+  --purpur-typography-scale-100: calc(1rem * var(--purpur-rescale));
+  --purpur-typography-scale-150: calc(1.125rem * var(--purpur-rescale));
+  --purpur-typography-scale-200: calc(1.25rem * var(--purpur-rescale));
+  --purpur-typography-scale-300: calc(1.375rem * var(--purpur-rescale));
+  --purpur-typography-scale-400: calc(1.5rem * var(--purpur-rescale));
+  --purpur-typography-scale-500: calc(1.75rem * var(--purpur-rescale));
+  --purpur-typography-scale-600: calc(2rem * var(--purpur-rescale));
+  --purpur-typography-scale-650: calc(2.25rem * var(--purpur-rescale));
+  --purpur-typography-scale-700: calc(2.5rem * var(--purpur-rescale));
+  --purpur-typography-scale-800: calc(3rem * var(--purpur-rescale));
+  --purpur-typography-scale-850: calc(3.5rem * var(--purpur-rescale));
+  --purpur-typography-scale-900: calc(4rem * var(--purpur-rescale));
+  --purpur-typography-scale-1000: calc(5rem * var(--purpur-rescale));
+  --purpur-typography-scale-1100: calc(6rem * var(--purpur-rescale));
+}

package/tokens/typography/variables.d.ts

@@ -0,0 +1,26 @@
+export const purpurTypographyFamilyDefault: string;
+export const purpurTypographyFamilyDisplay: string;
+export const purpurTypographyWeightNormal: string;
+export const purpurTypographyWeightMedium: string;
+export const purpurTypographyWeightBold: string;
+export const purpurTypographyLineHeightTight: string;
+export const purpurTypographyLineHeightSnug: string;
+export const purpurTypographyLineHeightDefault: string;
+export const purpurTypographyLineHeightLoose: string;
+export const purpurTypographyLineHeightLooser: string;
+export const purpurTypographyScale50: string;
+export const purpurTypographyScale75: string;
+export const purpurTypographyScale100: string;
+export const purpurTypographyScale150: string;
+export const purpurTypographyScale200: string;
+export const purpurTypographyScale300: string;
+export const purpurTypographyScale400: string;
+export const purpurTypographyScale500: string;
+export const purpurTypographyScale600: string;
+export const purpurTypographyScale650: string;
+export const purpurTypographyScale700: string;
+export const purpurTypographyScale800: string;
+export const purpurTypographyScale850: string;
+export const purpurTypographyScale900: string;
+export const purpurTypographyScale1000: string;
+export const purpurTypographyScale1100: string;

package/tokens/typography/variables.dark.css

@@ -0,0 +1,29 @@
+[data-color-scheme="dark"] {
+  --purpur-typography-family-default: TeliaSans, Helvetica, Arial, "Lucida Grande", sans-serif;
+  --purpur-typography-family-display: TeliaSansHeading, Helvetica, Arial, "Lucida Grande",
+    sans-serif;
+  --purpur-typography-weight-normal: 400;
+  --purpur-typography-weight-medium: 500;
+  --purpur-typography-weight-bold: 700;
+  --purpur-typography-line-height-tight: 100%;
+  --purpur-typography-line-height-snug: 110%;
+  --purpur-typography-line-height-default: 125%;
+  --purpur-typography-line-height-loose: 150%;
+  --purpur-typography-line-height-looser: 175%;
+  --purpur-typography-scale-50: calc(0.75rem * var(--purpur-rescale));
+  --purpur-typography-scale-75: calc(0.875rem * var(--purpur-rescale));
+  --purpur-typography-scale-100: calc(1rem * var(--purpur-rescale));
+  --purpur-typography-scale-150: calc(1.125rem * var(--purpur-rescale));
+  --purpur-typography-scale-200: calc(1.25rem * var(--purpur-rescale));
+  --purpur-typography-scale-300: calc(1.375rem * var(--purpur-rescale));
+  --purpur-typography-scale-400: calc(1.5rem * var(--purpur-rescale));
+  --purpur-typography-scale-500: calc(1.75rem * var(--purpur-rescale));
+  --purpur-typography-scale-600: calc(2rem * var(--purpur-rescale));
+  --purpur-typography-scale-650: calc(2.25rem * var(--purpur-rescale));
+  --purpur-typography-scale-700: calc(2.5rem * var(--purpur-rescale));
+  --purpur-typography-scale-800: calc(3rem * var(--purpur-rescale));
+  --purpur-typography-scale-850: calc(3.5rem * var(--purpur-rescale));
+  --purpur-typography-scale-900: calc(4rem * var(--purpur-rescale));
+  --purpur-typography-scale-1000: calc(5rem * var(--purpur-rescale));
+  --purpur-typography-scale-1100: calc(6rem * var(--purpur-rescale));
+}

package/tokens/typography/variables.dark.d.ts

@@ -0,0 +1,26 @@
+export const purpurTypographyFamilyDefault: string;
+export const purpurTypographyFamilyDisplay: string;
+export const purpurTypographyWeightNormal: string;
+export const purpurTypographyWeightMedium: string;
+export const purpurTypographyWeightBold: string;
+export const purpurTypographyLineHeightTight: string;
+export const purpurTypographyLineHeightSnug: string;
+export const purpurTypographyLineHeightDefault: string;
+export const purpurTypographyLineHeightLoose: string;
+export const purpurTypographyLineHeightLooser: string;
+export const purpurTypographyScale50: string;
+export const purpurTypographyScale75: string;
+export const purpurTypographyScale100: string;
+export const purpurTypographyScale150: string;
+export const purpurTypographyScale200: string;
+export const purpurTypographyScale300: string;
+export const purpurTypographyScale400: string;
+export const purpurTypographyScale500: string;
+export const purpurTypographyScale600: string;
+export const purpurTypographyScale650: string;
+export const purpurTypographyScale700: string;
+export const purpurTypographyScale800: string;
+export const purpurTypographyScale850: string;
+export const purpurTypographyScale900: string;
+export const purpurTypographyScale1000: string;
+export const purpurTypographyScale1100: string;

package/tokens/typography/variables.dark.js

@@ -0,0 +1,28 @@
+export const purpurTypographyFamilyDefault =
+  "TeliaSans, Helvetica, Arial, 'Lucida Grande', sans-serif";
+export const purpurTypographyFamilyDisplay =
+  "TeliaSansHeading, Helvetica, Arial, 'Lucida Grande', sans-serif";
+export const purpurTypographyWeightNormal = "400";
+export const purpurTypographyWeightMedium = "500";
+export const purpurTypographyWeightBold = "700";
+export const purpurTypographyLineHeightTight = "100%";
+export const purpurTypographyLineHeightSnug = "110%";
+export const purpurTypographyLineHeightDefault = "125%";
+export const purpurTypographyLineHeightLoose = "150%";
+export const purpurTypographyLineHeightLooser = "175%";
+export const purpurTypographyScale50 = "0.75rem";
+export const purpurTypographyScale75 = "0.875rem";
+export const purpurTypographyScale100 = "1rem";
+export const purpurTypographyScale150 = "1.125rem";
+export const purpurTypographyScale200 = "1.25rem";
+export const purpurTypographyScale300 = "1.375rem";
+export const purpurTypographyScale400 = "1.5rem";
+export const purpurTypographyScale500 = "1.75rem";
+export const purpurTypographyScale600 = "2rem";
+export const purpurTypographyScale650 = "2.25rem";
+export const purpurTypographyScale700 = "2.5rem";
+export const purpurTypographyScale800 = "3rem";
+export const purpurTypographyScale850 = "3.5rem";
+export const purpurTypographyScale900 = "4rem";
+export const purpurTypographyScale1000 = "5rem";
+export const purpurTypographyScale1100 = "6rem";

package/tokens/typography/variables.dark.json

@@ -0,0 +1,38 @@
+{
+  "typography": {
+    "family": {
+      "default": "TeliaSans, Helvetica, Arial, 'Lucida Grande', sans-serif",
+      "display": "TeliaSansHeading, Helvetica, Arial, 'Lucida Grande', sans-serif"
+    },
+    "weight": {
+      "normal": "400",
+      "medium": "500",
+      "bold": "700"
+    },
+    "line-height": {
+      "tight": "100%",
+      "snug": "110%",
+      "default": "125%",
+      "loose": "150%",
+      "looser": "175%"
+    },
+    "scale": {
+      "50": "0.75rem",
+      "75": "0.875rem",
+      "100": "1rem",
+      "150": "1.125rem",
+      "200": "1.25rem",
+      "300": "1.375rem",
+      "400": "1.5rem",
+      "500": "1.75rem",
+      "600": "2rem",
+      "650": "2.25rem",
+      "700": "2.5rem",
+      "800": "3rem",
+      "850": "3.5rem",
+      "900": "4rem",
+      "1000": "5rem",
+      "1100": "6rem"
+    }
+  }
+}

package/tokens/typography/variables.dark.scss

@@ -0,0 +1,26 @@
+$purpur-typography-family-default: TeliaSans, Helvetica, Arial, "Lucida Grande", sans-serif;
+$purpur-typography-family-display: TeliaSansHeading, Helvetica, Arial, "Lucida Grande", sans-serif;
+$purpur-typography-weight-normal: 400;
+$purpur-typography-weight-medium: 500;
+$purpur-typography-weight-bold: 700;
+$purpur-typography-line-height-tight: 100%;
+$purpur-typography-line-height-snug: 110%;
+$purpur-typography-line-height-default: 125%;
+$purpur-typography-line-height-loose: 150%;
+$purpur-typography-line-height-looser: 175%;
+$purpur-typography-scale-50: 0.75rem;
+$purpur-typography-scale-75: 0.875rem;
+$purpur-typography-scale-100: 1rem;
+$purpur-typography-scale-150: 1.125rem;
+$purpur-typography-scale-200: 1.25rem;
+$purpur-typography-scale-300: 1.375rem;
+$purpur-typography-scale-400: 1.5rem;
+$purpur-typography-scale-500: 1.75rem;
+$purpur-typography-scale-600: 2rem;
+$purpur-typography-scale-650: 2.25rem;
+$purpur-typography-scale-700: 2.5rem;
+$purpur-typography-scale-800: 3rem;
+$purpur-typography-scale-850: 3.5rem;
+$purpur-typography-scale-900: 4rem;
+$purpur-typography-scale-1000: 5rem;
+$purpur-typography-scale-1100: 6rem;

package/tokens/typography/variables.js

@@ -0,0 +1,28 @@
+export const purpurTypographyFamilyDefault =
+  "TeliaSans, Helvetica, Arial, 'Lucida Grande', sans-serif";
+export const purpurTypographyFamilyDisplay =
+  "TeliaSansHeading, Helvetica, Arial, 'Lucida Grande', sans-serif";
+export const purpurTypographyWeightNormal = "400";
+export const purpurTypographyWeightMedium = "500";
+export const purpurTypographyWeightBold = "700";
+export const purpurTypographyLineHeightTight = "100%";
+export const purpurTypographyLineHeightSnug = "110%";
+export const purpurTypographyLineHeightDefault = "125%";
+export const purpurTypographyLineHeightLoose = "150%";
+export const purpurTypographyLineHeightLooser = "175%";
+export const purpurTypographyScale50 = "0.75rem";
+export const purpurTypographyScale75 = "0.875rem";
+export const purpurTypographyScale100 = "1rem";
+export const purpurTypographyScale150 = "1.125rem";
+export const purpurTypographyScale200 = "1.25rem";
+export const purpurTypographyScale300 = "1.375rem";
+export const purpurTypographyScale400 = "1.5rem";
+export const purpurTypographyScale500 = "1.75rem";
+export const purpurTypographyScale600 = "2rem";
+export const purpurTypographyScale650 = "2.25rem";
+export const purpurTypographyScale700 = "2.5rem";
+export const purpurTypographyScale800 = "3rem";
+export const purpurTypographyScale850 = "3.5rem";
+export const purpurTypographyScale900 = "4rem";
+export const purpurTypographyScale1000 = "5rem";
+export const purpurTypographyScale1100 = "6rem";

package/tokens/typography/variables.json

@@ -0,0 +1,38 @@
+{
+  "typography": {
+    "family": {
+      "default": "TeliaSans, Helvetica, Arial, 'Lucida Grande', sans-serif",
+      "display": "TeliaSansHeading, Helvetica, Arial, 'Lucida Grande', sans-serif"
+    },
+    "weight": {
+      "normal": "400",
+      "medium": "500",
+      "bold": "700"
+    },
+    "line-height": {
+      "tight": "100%",
+      "snug": "110%",
+      "default": "125%",
+      "loose": "150%",
+      "looser": "175%"
+    },
+    "scale": {
+      "50": "0.75rem",
+      "75": "0.875rem",
+      "100": "1rem",
+      "150": "1.125rem",
+      "200": "1.25rem",
+      "300": "1.375rem",
+      "400": "1.5rem",
+      "500": "1.75rem",
+      "600": "2rem",
+      "650": "2.25rem",
+      "700": "2.5rem",
+      "800": "3rem",
+      "850": "3.5rem",
+      "900": "4rem",
+      "1000": "5rem",
+      "1100": "6rem"
+    }
+  }
+}

package/tokens/typography/variables.scss

@@ -0,0 +1,26 @@
+$purpur-typography-family-default: TeliaSans, Helvetica, Arial, "Lucida Grande", sans-serif;
+$purpur-typography-family-display: TeliaSansHeading, Helvetica, Arial, "Lucida Grande", sans-serif;
+$purpur-typography-weight-normal: 400;
+$purpur-typography-weight-medium: 500;
+$purpur-typography-weight-bold: 700;
+$purpur-typography-line-height-tight: 100%;
+$purpur-typography-line-height-snug: 110%;
+$purpur-typography-line-height-default: 125%;
+$purpur-typography-line-height-loose: 150%;
+$purpur-typography-line-height-looser: 175%;
+$purpur-typography-scale-50: 0.75rem;
+$purpur-typography-scale-75: 0.875rem;
+$purpur-typography-scale-100: 1rem;
+$purpur-typography-scale-150: 1.125rem;
+$purpur-typography-scale-200: 1.25rem;
+$purpur-typography-scale-300: 1.375rem;
+$purpur-typography-scale-400: 1.5rem;
+$purpur-typography-scale-500: 1.75rem;
+$purpur-typography-scale-600: 2rem;
+$purpur-typography-scale-650: 2.25rem;
+$purpur-typography-scale-700: 2.5rem;
+$purpur-typography-scale-800: 3rem;
+$purpur-typography-scale-850: 3.5rem;
+$purpur-typography-scale-900: 4rem;
+$purpur-typography-scale-1000: 5rem;
+$purpur-typography-scale-1100: 6rem;

package/vite-plugin-generate-components-metadata.js

@@ -0,0 +1,62 @@
+import fs from "fs-extra";
+import path from "path";
+import { createRequire } from "module";
+
+const require = createRequire(import.meta.url);
+const rushLib = require("@microsoft/rush-lib");
+
+const packageNames = rushLib.RushConfiguration.loadFromDefaultLocation({
+  startingFolder: process.cwd(),
+}).projects.map(({ packageName }) => packageName);
+
+const safeImport = async (pathToFile) => {
+  if (fs.existsSync(pathToFile)) {
+    const metadata = await import(pathToFile);
+    return metadata.default || metadata;
+  }
+
+  return null;
+};
+
+const getMetadata = async () => {
+  const cwd = process.cwd();
+  const getPackageDistPath = (packageName) => path.join(cwd, "./node_modules", packageName, "dist");
+
+  const metaDataFiles = packageNames.flatMap((packageName) => {
+    const metadataPath = path.join(getPackageDistPath(packageName));
+
+    return [
+      path.join(metadataPath, "metadata.js"),
+      path.join(metadataPath, "components-metadata.js"),
+    ];
+  });
+
+  const componentsMetadata = await Promise.all(metaDataFiles.map(safeImport));
+
+  return componentsMetadata.flat().filter((metadata) => metadata !== null);
+};
+
+/**
+ * Vite plugin to generate components-metadata.js
+ *
+ * @returns {import("vite").Plugin}
+ */
+export function generateComponentsMetadata() {
+  return {
+    name: "generate-components-metadata",
+    apply: "build",
+    async generateBundle() {
+      const distDir = path.resolve(process.cwd(), "dist");
+      const metadataPath = path.join(distDir, "components-metadata.js");
+
+      // Ensure the dist directory exists
+      fs.ensureDirSync(distDir);
+
+      const metadataList = await getMetadata();
+
+      const metadataContent = `module.exports = ${JSON.stringify(metadataList, null, 2)};`;
+      fs.writeFileSync(metadataPath, metadataContent);
+      console.log(`\nSuccessfully generated components metadata at ${metadataPath}\n`);
+    },
+  };
+}