@genexus/mercury 0.0.2 → 0.1.0

package/src/tokens/primitive/_font.scss

@@ -1,37 +0,0 @@
-/* font weights used by mercury:
-- light (300)
-- regular (400)
-- semi-bold (600)
-- bold (700)
-- extra-bold (800)
-*/
-
-@mixin font() {
-  /*Families*/
-  --mer-font-family--primary: "Inter", sans-serif;
-
-  /*Weights*/
-  --mer-font__weight--light: 300;
-  --mer-font__weight--regular: 400;
-  --mer-font__weight--semi-bold: 600;
-  --mer-font__weight--bold: 700;
-  --mer-font__weight--extra-bold: 800;
-
-  /*Sizes*/
-  --mer-font__size--xxs: 12px;
-  --mer-font__size--xs: 14px;
-  --mer-font__size--sm: 16px;
-  --mer-font__size--md: 20px;
-  --mer-font__size--lg: 24px;
-  --mer-font__size--xl: 36px;
-
-  /*Line Heights*/
-  --mer-line-height--tight: 1.4em;
-  --mer-line-height--regular: 1.6em;
-  --mer-line-height--comfortable: 1.7em;
-
-  /*Letter Spacings (to be done)*/
-  // --mer-letter-spacing--tight: ;
-  // --mer-letter-spacing--regular: ;
-  // --mer-letter-spacing--comfortable: ;
-}

package/src/tokens/primitive/_spacing.scss

@@ -1,12 +0,0 @@
-@mixin spacing() {
-  --mer-spacing--3xs: 2px;
-  --mer-spacing--2xs: 4px;
-  --mer-spacing--xs: 8px;
-  --mer-spacing--sm: 12px;
-  --mer-spacing--md: 16px;
-  --mer-spacing--lg: 24px;
-  --mer-spacing--xl: 32px;
-  --mer-spacing--2xl: 40px;
-  --mer-spacing--3xl: 48px;
-  --mer-spacing--4xl: 64px;
-}

package/src/tokens/primitive/_timing.scss

@@ -1,6 +0,0 @@
-@mixin timing() {
-  --mer-timing--super-fast: 100;
-  --mer-timing--fast: 200;
-  --mer-timing--regular: 500;
-  --mer-timing--slow: 1000;
-}

package/src/tokens/semantic/_accent.scss

@@ -1,7 +0,0 @@
-@mixin semantic-accent() {
-  --mer-accent__primary: var(--mer-color__primary-blue--200);
-  --mer-accent__primary--hover: var(--mer-color__primary-blue--400);
-  --mer-accent__primary--active: var(--mer-color__primary-blue--600);
-  --mer-accent__primary--disabled: var(--mer-color__neutral-gray--700);
-  --mer-accent__primary--destructive: var(--mer-color__message-red--100);
-}

package/src/tokens/semantic/_border.scss

@@ -1,16 +0,0 @@
-@mixin semantic-border() {
-  --mer-border-color__primary: var(--mer-accent__primary);
-  --mer-border-color__primary--hover: var(--mer-accent__primary--hover);
-  --mer-border-color__primary--active: var(--mer-accent__primary--active);
-  --mer-border-color__primary--disabled: var(--mer-accent__primary--disabled);
-  --mer-border-color__primary--focused: var(--mer-color__neutral-gray--00);
-  --mer-border-color__error: var(--mer-color__message-red--100);
-  --mer-border-color__warning: var(--mer-color__message-yellow--100);
-  --mer-border-color__success: var(--mer-color__message-green--100);
-  --mer-border-color__neutral: var(--mer-color__neutral-gray--200);
-  --mer-border-color__neutral--hover: var(--mer-color__neutral-gray--100);
-  --mer-border-color__neutral--active: var(--mer-color__neutral-gray--00);
-  --mer-border-color__dim: var(--mer-color__neutral-gray--600);
-  --mer-border-color__control--focused: var(--mer-color__primary-blue--200);
-  --mer-border-color__on-elevation--01: var(--mer-color__neutral-gray--1400);
-}

package/src/tokens/semantic/_heading.scss

@@ -1,3 +0,0 @@
-@mixin semantic-heading() {
-  --mer-heading__font-color: var(--mer-color__neutral-gray--100);
-}

package/src/tokens/semantic/_icon.scss

@@ -1,18 +0,0 @@
-@mixin semantic-icon() {
-  --mer-icon__on-surface: var(--mer-color__neutral-gray--300);
-  --mer-icon__on-primary: var(--mer-color__neutral-gray--800);
-  --mer-icon__on-primary--active: var(--mer-color__neutral-gray--00);
-  --mer-icon__on-disabled: var(--mer-color__neutral-gray--500);
-  --mer-icon__on-message: var(--mer-color__neutral-gray--700);
-  --mer-icon__on-elevation: var(--mer-color__neutral-gray--600);
-  --mer-icon__primary: var(--mer-accent__primary);
-  --mer-icon__primary--hover: var(--mer-accent__primary--hover);
-  --mer-icon__primary--active: var(--mer-accent__primary--active);
-  --mer-icon__primary--disabled: var(--mer-accent__primary--disabled);
-  --mer-icon__error: var(--mer-color__message-red--100);
-  --mer-icon__warning: var(--mer-color__message-yellow--100);
-  --mer-icon__success: var(--mer-color__message-green--100);
-  --mer-icon__neutral: var(--mer-color__neutral-gray--200);
-  --mer-icon__highlighted: var(--mer-color__neutral-gray--100);
-  --mer-icon__bright: var(--mer-color__neutral-gray--00);
-}

package/src/tokens/semantic/_item.scss

@@ -1,21 +0,0 @@
-@mixin semantic-item() {
-  //enabled
-  --mer-item__color: ;
-  --mer-item__bg-color: ;
-  --mer-item__border-color: var(--mer-color__tinted-blue--20);
-
-  //hover
-  --mer-item__color--hover: var(--mer-color__neutral-gray--100);
-  --mer-item__bg-color--hover: var(--mer-color__tinted-blue--5);
-  --mer-item__border-color--hover: var(--mer-color__tinted-blue--20);
-
-  //selected
-  --mer-item__color--selected: var(--mer-color__neutral-gray--100);
-  --mer-item__bg-color--selected: var(--mer-color__tinted-blue--10);
-  --mer-item__border-color--selected: var(--mer-color__tinted-blue--20);
-
-  //selected + hover
-  --mer-item__color--selected-hover: var(--mer-color__neutral-gray--100);
-  --mer-item__bg-color--selected-hover: var(--mer-color__tinted-blue--10);
-  --mer-item__border-color--selected-hover: var(--mer-color__tinted-blue--20);
-}

package/src/tokens/semantic/_other.scss

@@ -1,46 +0,0 @@
-@mixin semantic-other() {
-  /*----------------------
-  Body
-  ----------------------*/
-  --mer-body__bg-color: var(--mer-color__surface);
-  --mer-body__color: var(--mer-text__on-surface);
-  --mer-body__font-size: var(--mer-font__size--xxs);
-  --mer-body__line-height: var(--mer-line-height--regular);
-
-  /*----------------------
-  Scrollbar
-  ----------------------*/
-  // scrollbar
-  --mer-scrollbar__size: var(--mer-spacing--xs);
-
-  // scrollbar-track
-  --mer-scrollbar-track__bg-color: var(--mer-color__elevation--03);
-  --mer-scrollbar-track__border-radius: var(--mer-spacing--xs);
-
-  // scrollbar-thumb
-  --mer-scrollbar-thumb__bg-color: var(--mer-color__elevation--04);
-  --mer-scrollbar-thumb__bg-color--hover: var(--mer-color__elevation--04);
-  --mer-scrollbar-thumb__border-radius: var(--mer-spacing--xs);
-
-  // scrollbar-thumb
-  --mer-scrollbar-corner__bg: rgba(0, 0, 0, 0);
-
-  /*----------------------
-  Icon
-  ----------------------*/
-  // size
-  --mer-icon-shell__size--sm: var(--mer-spacing--md);
-  --mer-icon__size--sm: var(--mer-spacing--sm);
-  --mer-icon-shell__size--lg: var(--mer-spacing--sm);
-  --mer-icon__size--lg: var(--mer-spacing--xs);
-
-  /*----------------------
-  Label
-  ----------------------*/
-  // size
-  // space between label and control
-  --mer-label__space: var(--mer-spacing--xs);
-  --mer-label__font-size: inherit;
-  --mer-label__font-weight: var(--mer-font__weight--semi-bold);
-  --mer-label__color: inherit;
-}

package/src/tokens/semantic/_text.scss

@@ -1,16 +0,0 @@
-@mixin semantic-text() {
-  --mer-text__on-surface: var(--mer-color__neutral-gray--300);
-  --mer-text__on-primary: var(--mer-color__neutral-gray--800);
-  --mer-text__on-primary--active: var(--mer-color__neutral-gray--00);
-  --mer-text__on-disabled: var(--mer-color__neutral-gray--500);
-  --mer-text__on-message: var(--mer-color__neutral-gray--700);
-  --mer-text__on-elevation: var(--mer-color__neutral-gray--00);
-  --mer-text__primary: var(--mer-accent__primary);
-  --mer-text__primary--hover: var(--mer-accent__primary--hover);
-  --mer-text__primary--active: var(--mer-accent__primary--active);
-  --mer-text__primary--disabled: #5b5b5b; //This color is not currently linked to any value on the grayscale scale (no primitive value).
-  --mer-text__disabled: var(--mer-color__neutral-gray--600);
-  --mer-text__neutral: var(--mer-color__neutral-gray--200);
-  --mer-text__highlighted: var(--mer-color__neutral-gray--100);
-  --mer-text__bright: var(--mer-color__neutral-gray--00);
-}

package/src/tokens/semantic/_tokens.scss

@@ -1,7 +0,0 @@
-@import "accent";
-@import "border";
-@import "heading";
-@import "icon";
-@import "item";
-@import "text";
-@import "other";

package/svg-generator/processor-sass.js

@@ -1,301 +0,0 @@
-#!/usr/bin/env node
-
-import fs from "fs";
-import path from "path";
-
-// Define the path to the parent directory containing the folders
-const SRC_DIRECTORY = await process.argv[2];
-const OUTPUT_DIRECTORY = await process.argv[3];
-const MONOCHROME_STATES_FILE = await process.argv[4];
-const MONOCHROME_ID = "monochrome";
-const MULTICOLOR_ID = "multicolor";
-let monochromeLists = [];
-let multicolorLists = [];
-
-function getStatesJson() {
-  try {
-    const statesJson = fs.readFileSync(`./${MONOCHROME_STATES_FILE}`, "utf8");
-    return JSON.parse(statesJson);
-  } catch (error) {
-    if (error.code === "ENOENT") {
-      console.error(
-        `states.json not found in /${SRC_DIRECTORY}. All states will be generated for every icon.`
-      );
-    } else {
-      console.error(
-        `Error reading ${SRC_DIRECTORY}/states.json:`,
-        error.message
-      );
-    }
-  }
-}
-
-// Function to read the directories and files
-function readDirectoriesAndFiles(directoryPath) {
-  // Read the contents of the directory
-  const files = fs.readdirSync(directoryPath);
-
-  // Filter out only directories
-  const directories = files.filter((file) =>
-    fs.statSync(path.join(directoryPath, file)).isDirectory()
-  );
-
-  // Initialize an array to store the objects
-  const result = [];
-
-  // Iterate over each directory
-  directories.forEach((directory) => {
-    const categoryName = directory;
-    const icons = [];
-
-    // Read the contents of the current directory
-    const filesInDirectory = fs.readdirSync(
-      path.join(directoryPath, directory)
-    );
-
-    // Filter out only SVG files
-    const svgFiles = filesInDirectory.filter(
-      (file) => path.extname(file).toLowerCase() === ".svg"
-    );
-
-    // Add each SVG file to the icons array
-    svgFiles.forEach((svgFile) => {
-      icons.push(path.parse(svgFile).name);
-    });
-
-    // Create an object with category and icons array and push it to the result array
-    result.push({ categoryName, icons });
-  });
-
-  return result;
-}
-
-function writeSassFiles(iconsLists) {
-  // Create the 'sass-output' directory if it doesn't exist
-  if (!fs.existsSync(OUTPUT_DIRECTORY)) {
-    fs.mkdirSync(OUTPUT_DIRECTORY);
-  }
-
-  iconsLists.forEach((iconsList) => {
-    if (!iconsList.icons.length) {
-      //only proceed if the list is not empty
-      return;
-    }
-    const iconsType = getIconsType(iconsList);
-
-    // Create .sass file
-    const sassFileName = `_${iconsList.categoryName}.scss`;
-    const sassFilePath = path.join(
-      `${OUTPUT_DIRECTORY}/${iconsType}`,
-      sassFileName
-    );
-
-    // Write sass list to .sass file
-    let sassContent = `$icons-${iconsList.categoryName}: ${iconsList.icons.join(
-      ", "
-    )};`;
-
-    if (iconsType === MONOCHROME_ID) {
-      sassContent += monochromeStyles(iconsList);
-      monochromeLists.push(iconsList.categoryName);
-    } else if (iconsType === MULTICOLOR_ID) {
-      sassContent += multicolorStyles(iconsList);
-      multicolorLists.push(iconsList.categoryName);
-    }
-
-    createFolder(iconsType);
-    fs.writeFileSync(sassFilePath, sassContent);
-  });
-}
-
-function createFolder(type) {
-  const path = `${OUTPUT_DIRECTORY}/${type}`;
-  if (!fs.existsSync(path)) {
-    fs.mkdirSync(path);
-  }
-}
-
-/**
- * @description It returns the icon type (multicolor or monochrome). This is needed to determine how to write the sass file css selectors.
- */
-function getIconsType(iconsList) {
-  if (statesJson === undefined) {
-    /*If no monochrome states file is found, the category is considered as "multicolor" */
-    return;
-  }
-  const categoryName = iconsList.categoryName;
-  const categoryFound = statesJson[categoryName];
-  if (categoryFound) {
-    return MONOCHROME_ID;
-  } else {
-    return MULTICOLOR_ID;
-  }
-}
-
-function monochromeStyles(iconsList) {
-  let output = "";
-  let list = "";
-  const category = iconsList.categoryName;
-  iconsList.icons.forEach((icon) => {
-    list += `
-  // ${icon}.svg`;
-    const states = Object.keys(statesJson[category][icon]["states"]);
-    states.forEach((state) => {
-      list += `
-  &-${icon}--${state}-light {
-    --icon-path :url("#{$icons-path}icons/${category}/light/${icon}.svg#${state}");
-  }
-  &-${icon}--${state}-dark {
-    --icon-path :url("#{$icons-path}icons/${category}/dark/${icon}.svg#${state}");
-  }
-      `;
-    });
-  });
-  output += `
-%icon__${iconsList.categoryName} {
-  ${list}
-}
-  `;
-  return output;
-}
-
-function multicolorStyles(iconsList) {
-  let output = "";
-  let list = "";
-  const category = iconsList.categoryName;
-  iconsList.icons.forEach((icon) => {
-    list += `
-  // ${icon}.svg
-  &-${icon}--enabled-light {
-    --icon-path: url("#{$icons-path}icons/${iconsList.categoryName}/light/${icon}.svg#enabled");
-  }
-  &-${icon}--enabled-dark {
-    --icon-path: url("#{$icons-path}icons/${iconsList.categoryName}/dark/${icon}.svg#enabled");
-  }
-
-  &-${icon}--hover-light {
-    --icon-path: url("#{$icons-path}icons/${iconsList.categoryName}/light/${icon}.svg#hover");
-  }
-  &-${icon}--hover-dark {
-    --icon-path: url("#{$icons-path}icons/${iconsList.categoryName}/dark/${icon}.svg#hover");
-  }
-
-  &-${icon}--active-light {
-    --icon-path: url("#{$icons-path}icons/${iconsList.categoryName}/light/${icon}.svg#active");
-  }
-  &-${icon}--active-dark {
-    --icon-path: url("#{$icons-path}icons/${iconsList.categoryName}/dark/${icon}.svg#active");
-  }
-
-  &-${icon}--disabled-light {
-    --icon-path: url("#{$icons-path}icons/${iconsList.categoryName}/light/${icon}.svg#disabled");
-  }
-  &-${icon}--disabled-dark {
-    --icon-path: url("#{$icons-path}icons/${iconsList.categoryName}/dark/${icon}.svg#disabled");
-  }
-    `;
-  });
-  output += `
-%icon__${iconsList.categoryName} {
-  ${list}
-}
-  `;
-  return output;
-}
-
-/**
- * @description this function writes on disk a single .scss file that imports each .scss file for each icons category. This is the only .scss file that the final user should import later. (One .scss file per icons category is more easy to understand and inspect, rather than all the icons categories on a single file)
- */
-function writeImportScss(iconsLists) {
-  // Create .sass file
-  const sassFileName = `icons-selectors.scss`;
-  const sassFilePath = path.join(OUTPUT_DIRECTORY, sassFileName);
-
-  let sassContentMonochrome = "";
-
-  /* --------------------------
-  Import monochrome icons lists
-  --------------------------- */
-
-  if (monochromeLists.length) {
-    sassContentMonochrome += `//Monochrome lists
-    `;
-
-    monochromeLists.forEach((list) => {
-      sassContentMonochrome += `
-@import "${MONOCHROME_ID}/${list}";`;
-    });
-
-    let allMonochromeLists = `
-$all-monochrome-lists: (`;
-    monochromeLists.forEach((list, i) => {
-      allMonochromeLists += `
-  ${list}: $icons-${list}`;
-
-      if (i === monochromeLists.length - 1) {
-        allMonochromeLists += `
-);`;
-      } else {
-        allMonochromeLists += `,`;
-      }
-    });
-
-    sassContentMonochrome += `
-    ${allMonochromeLists}`;
-  }
-
-  /* --------------------------
-  Import multicolor icons lists
-  --------------------------- */
-
-  let sassContentMulticolor = "";
-  if (multicolorLists.length) {
-    let iconsImports = "";
-    sassContentMulticolor += `
-    
-//Multicolor lists
-    `;
-    multicolorLists.forEach((list) => {
-      iconsImports += `@import "${MULTICOLOR_ID}/${list}";\n`;
-    });
-    let allMulticolorLists = `
-@mixin icons-lists($icons-path: "./assets/icons") {
-  ${iconsImports}
-  $all-multicolor-lists: (`;
-    multicolorLists.forEach((list, i) => {
-      allMulticolorLists += `
-    ${list}: $icons-${list}`;
-
-      if (i === multicolorLists.length - 1) {
-        allMulticolorLists += `
-  );`;
-      } else {
-        allMulticolorLists += `,`;
-      }
-    });
-
-    sassContentMulticolor += `
-    ${allMulticolorLists}
-}`;
-  }
-
-  fs.writeFileSync(sassFilePath, sassContentMulticolor);
-}
-
-/**
- * @description It clears the OUTPUT_DIRECTORY
- */
-function clearOutputDir() {
-  fs.rmSync(OUTPUT_DIRECTORY, { recursive: true, force: true }, (err) => {
-    if (err) {
-      throw err;
-    }
-  });
-}
-
-//run
-const statesJson = getStatesJson();
-clearOutputDir();
-const iconsLists = readDirectoriesAndFiles(SRC_DIRECTORY);
-writeSassFiles(iconsLists);
-writeImportScss(iconsLists);