magneto365.ui 2.70.4 → 2.71.0

package/dist/tokens/_scale.scss

@@ -0,0 +1,466 @@
+// Auto-generated DO NOT EDIT
+$scale-inherit: inherit;
+$scale-none: none;
+$scale-auto: auto;
+$scale-full: 100%;
+$scale-min: 0;
+$scale-px-base: 16px;
+$scale-px-2xs: 1px;
+$scale-px-xs: 4px;
+$scale-px-sm: 8px;
+$scale-px-md: 12px;
+$scale-px-lg: 16px;
+$scale-px-xl: 20px;
+$scale-px-2xl: 24px;
+$scale-px-3xl: 28px;
+$scale-px-4xl: 32px;
+$scale-px-container-2xs: 375px;
+$scale-px-container-xs: 480px;
+$scale-px-container-sm: 576px;
+$scale-px-container-md: 768px;
+$scale-px-container-lg: 992px;
+$scale-px-container-xl: 1024px;
+$scale-px-container-2xl: 1280px;
+$scale-px-container-3xl: 1440px;
+$scale-rem-2xs: calc($scale-px-2xs / $scale-px-base) * 1rem;
+$scale-rem-xs: calc($scale-px-xs / $scale-px-base) * 1rem;
+$scale-rem-sm: calc($scale-px-sm / $scale-px-base) * 1rem;
+$scale-rem-md: calc($scale-px-md / $scale-px-base) * 1rem;
+$scale-rem-lg: calc($scale-px-lg / $scale-px-base) * 1rem;
+$scale-rem-xl: calc($scale-px-xl / $scale-px-base) * 1rem;
+$scale-rem-2xl: calc($scale-px-2xl / $scale-px-base) * 1rem;
+$scale-rem-3xl: calc($scale-px-3xl / $scale-px-base) * 1rem;
+$scale-rem-4xl: calc($scale-px-4xl / $scale-px-base) * 1rem;
+$scale-rem-container-2xs: calc($scale-px-container-2xs / $scale-px-base) * 1rem;
+$scale-rem-container-xs: calc($scale-px-container-xs / $scale-px-base) * 1rem;
+$scale-rem-container-sm: calc($scale-px-container-sm / $scale-px-base) * 1rem;
+$scale-rem-container-md: calc($scale-px-container-md / $scale-px-base) * 1rem;
+$scale-rem-container-lg: calc($scale-px-container-lg / $scale-px-base) * 1rem;
+$scale-rem-container-xl: calc($scale-px-container-xl / $scale-px-base) * 1rem;
+$scale-rem-container-2xl: calc($scale-px-container-2xl / $scale-px-base) * 1rem;
+$scale-rem-container-3xl: calc($scale-px-container-3xl / $scale-px-base) * 1rem;
+
+$scale-map: (
+  inherit: $scale-inherit,
+  none: $scale-none,
+  auto: $scale-auto,
+  full: $scale-full,
+  min: $scale-min,
+  px-base: $scale-px-base,
+  px-2xs: $scale-px-2xs,
+  px-xs: $scale-px-xs,
+  px-sm: $scale-px-sm,
+  px-md: $scale-px-md,
+  px-lg: $scale-px-lg,
+  px-xl: $scale-px-xl,
+  px-2xl: $scale-px-2xl,
+  px-3xl: $scale-px-3xl,
+  px-4xl: $scale-px-4xl,
+  px-container-2xs: $scale-px-container-2xs,
+  px-container-xs: $scale-px-container-xs,
+  px-container-sm: $scale-px-container-sm,
+  px-container-md: $scale-px-container-md,
+  px-container-lg: $scale-px-container-lg,
+  px-container-xl: $scale-px-container-xl,
+  px-container-2xl: $scale-px-container-2xl,
+  px-container-3xl: $scale-px-container-3xl,
+  rem-2xs: $scale-rem-2xs,
+  rem-xs: $scale-rem-xs,
+  rem-sm: $scale-rem-sm,
+  rem-md: $scale-rem-md,
+  rem-lg: $scale-rem-lg,
+  rem-xl: $scale-rem-xl,
+  rem-2xl: $scale-rem-2xl,
+  rem-3xl: $scale-rem-3xl,
+  rem-4xl: $scale-rem-4xl,
+  rem-container-2xs: $scale-rem-container-2xs,
+  rem-container-xs: $scale-rem-container-xs,
+  rem-container-sm: $scale-rem-container-sm,
+  rem-container-md: $scale-rem-container-md,
+  rem-container-lg: $scale-rem-container-lg,
+  rem-container-xl: $scale-rem-container-xl,
+  rem-container-2xl: $scale-rem-container-2xl,
+  rem-container-3xl: $scale-rem-container-3xl
+);
+
+.w-inherit {
+  width: $scale-inherit;
+}
+.w-none {
+  width: $scale-none;
+}
+.w-auto {
+  width: $scale-auto;
+}
+.w-full {
+  width: $scale-full;
+}
+.w-min {
+  width: $scale-min;
+}
+.w-2xs {
+  width: $scale-rem-2xs;
+}
+.w-xs {
+  width: $scale-rem-xs;
+}
+.w-sm {
+  width: $scale-rem-sm;
+}
+.w-md {
+  width: $scale-rem-md;
+}
+.w-lg {
+  width: $scale-rem-lg;
+}
+.w-xl {
+  width: $scale-rem-xl;
+}
+.w-2xl {
+  width: $scale-rem-2xl;
+}
+.w-3xl {
+  width: $scale-rem-3xl;
+}
+.w-4xl {
+  width: $scale-rem-4xl;
+}
+.w-container-2xs {
+  width: $scale-rem-container-2xs;
+}
+.w-container-xs {
+  width: $scale-rem-container-xs;
+}
+.w-container-sm {
+  width: $scale-rem-container-sm;
+}
+.w-container-md {
+  width: $scale-rem-container-md;
+}
+.w-container-lg {
+  width: $scale-rem-container-lg;
+}
+.w-container-xl {
+  width: $scale-rem-container-xl;
+}
+.w-container-2xl {
+  width: $scale-rem-container-2xl;
+}
+.w-container-3xl {
+  width: $scale-rem-container-3xl;
+}
+
+.min-w-inherit {
+  min-width: $scale-inherit;
+}
+.min-w-none {
+  min-width: $scale-none;
+}
+.min-w-auto {
+  min-width: $scale-auto;
+}
+.min-w-full {
+  min-width: $scale-full;
+}
+.min-w-min {
+  min-width: $scale-min;
+}
+.min-w-2xs {
+  min-width: $scale-rem-2xs;
+}
+.min-w-xs {
+  min-width: $scale-rem-xs;
+}
+.min-w-sm {
+  min-width: $scale-rem-sm;
+}
+.min-w-md {
+  min-width: $scale-rem-md;
+}
+.min-w-lg {
+  min-width: $scale-rem-lg;
+}
+.min-w-xl {
+  min-width: $scale-rem-xl;
+}
+.min-w-2xl {
+  min-width: $scale-rem-2xl;
+}
+.min-w-3xl {
+  min-width: $scale-rem-3xl;
+}
+.min-w-4xl {
+  min-width: $scale-rem-4xl;
+}
+.min-w-container-2xs {
+  min-width: $scale-rem-container-2xs;
+}
+.min-w-container-xs {
+  min-width: $scale-rem-container-xs;
+}
+.min-w-container-sm {
+  min-width: $scale-rem-container-sm;
+}
+.min-w-container-md {
+  min-width: $scale-rem-container-md;
+}
+.min-w-container-lg {
+  min-width: $scale-rem-container-lg;
+}
+.min-w-container-xl {
+  min-width: $scale-rem-container-xl;
+}
+.min-w-container-2xl {
+  min-width: $scale-rem-container-2xl;
+}
+.min-w-container-3xl {
+  min-width: $scale-rem-container-3xl;
+}
+
+.h-inherit {
+  height: $scale-inherit;
+}
+.h-none {
+  height: $scale-none;
+}
+.h-auto {
+  height: $scale-auto;
+}
+.h-full {
+  height: $scale-full;
+}
+.h-min {
+  height: $scale-min;
+}
+.h-2xs {
+  height: $scale-rem-2xs;
+}
+.h-xs {
+  height: $scale-rem-xs;
+}
+.h-sm {
+  height: $scale-rem-sm;
+}
+.h-md {
+  height: $scale-rem-md;
+}
+.h-lg {
+  height: $scale-rem-lg;
+}
+.h-xl {
+  height: $scale-rem-xl;
+}
+.h-2xl {
+  height: $scale-rem-2xl;
+}
+.h-3xl {
+  height: $scale-rem-3xl;
+}
+.h-4xl {
+  height: $scale-rem-4xl;
+}
+.h-container-2xs {
+  height: $scale-rem-container-2xs;
+}
+.h-container-xs {
+  height: $scale-rem-container-xs;
+}
+.h-container-sm {
+  height: $scale-rem-container-sm;
+}
+.h-container-md {
+  height: $scale-rem-container-md;
+}
+.h-container-lg {
+  height: $scale-rem-container-lg;
+}
+.h-container-xl {
+  height: $scale-rem-container-xl;
+}
+.h-container-2xl {
+  height: $scale-rem-container-2xl;
+}
+.h-container-3xl {
+  height: $scale-rem-container-3xl;
+}
+
+.min-h-inherit {
+  min-height: $scale-inherit;
+}
+.min-h-none {
+  min-height: $scale-none;
+}
+.min-h-auto {
+  min-height: $scale-auto;
+}
+.min-h-full {
+  min-height: $scale-full;
+}
+.min-h-min {
+  min-height: $scale-min;
+}
+.min-h-2xs {
+  min-height: $scale-rem-2xs;
+}
+.min-h-xs {
+  min-height: $scale-rem-xs;
+}
+.min-h-sm {
+  min-height: $scale-rem-sm;
+}
+.min-h-md {
+  min-height: $scale-rem-md;
+}
+.min-h-lg {
+  min-height: $scale-rem-lg;
+}
+.min-h-xl {
+  min-height: $scale-rem-xl;
+}
+.min-h-2xl {
+  min-height: $scale-rem-2xl;
+}
+.min-h-3xl {
+  min-height: $scale-rem-3xl;
+}
+.min-h-4xl {
+  min-height: $scale-rem-4xl;
+}
+.min-h-container-2xs {
+  min-height: $scale-rem-container-2xs;
+}
+.min-h-container-xs {
+  min-height: $scale-rem-container-xs;
+}
+.min-h-container-sm {
+  min-height: $scale-rem-container-sm;
+}
+.min-h-container-md {
+  min-height: $scale-rem-container-md;
+}
+.min-h-container-lg {
+  min-height: $scale-rem-container-lg;
+}
+.min-h-container-xl {
+  min-height: $scale-rem-container-xl;
+}
+.min-h-container-2xl {
+  min-height: $scale-rem-container-2xl;
+}
+.min-h-container-3xl {
+  min-height: $scale-rem-container-3xl;
+}
+
+.sq-inherit {
+  width: $scale-inherit;
+  height: $scale-inherit;
+}
+.sq-none {
+  width: $scale-none;
+  height: $scale-none;
+}
+.sq-auto {
+  width: $scale-auto;
+  height: $scale-auto;
+}
+.sq-full {
+  width: $scale-full;
+  height: $scale-full;
+}
+.sq-min {
+  width: $scale-min;
+  height: $scale-min;
+}
+.sq-2xs {
+  width: $scale-rem-2xs;
+  height: $scale-rem-2xs;
+}
+.sq-xs {
+  width: $scale-rem-xs;
+  height: $scale-rem-xs;
+}
+.sq-sm {
+  width: $scale-rem-sm;
+  height: $scale-rem-sm;
+}
+.sq-md {
+  width: $scale-rem-md;
+  height: $scale-rem-md;
+}
+.sq-lg {
+  width: $scale-rem-lg;
+  height: $scale-rem-lg;
+}
+.sq-xl {
+  width: $scale-rem-xl;
+  height: $scale-rem-xl;
+}
+.sq-2xl {
+  width: $scale-rem-2xl;
+  height: $scale-rem-2xl;
+}
+.sq-3xl {
+  width: $scale-rem-3xl;
+  height: $scale-rem-3xl;
+}
+.sq-4xl {
+  width: $scale-rem-4xl;
+  height: $scale-rem-4xl;
+}
+
+.min-sq-inherit {
+  min-width: $scale-inherit;
+  min-height: $scale-inherit;
+}
+.min-sq-none {
+  min-width: $scale-none;
+  min-height: $scale-none;
+}
+.min-sq-auto {
+  min-width: $scale-auto;
+  min-height: $scale-auto;
+}
+.min-sq-full {
+  min-width: $scale-full;
+  min-height: $scale-full;
+}
+.min-sq-min {
+  min-width: $scale-min;
+  min-height: $scale-min;
+}
+.min-sq-2xs {
+  min-width: $scale-rem-2xs;
+  min-height: $scale-rem-2xs;
+}
+.min-sq-xs {
+  min-width: $scale-rem-xs;
+  min-height: $scale-rem-xs;
+}
+.min-sq-sm {
+  min-width: $scale-rem-sm;
+  min-height: $scale-rem-sm;
+}
+.min-sq-md {
+  min-width: $scale-rem-md;
+  min-height: $scale-rem-md;
+}
+.min-sq-lg {
+  min-width: $scale-rem-lg;
+  min-height: $scale-rem-lg;
+}
+.min-sq-xl {
+  min-width: $scale-rem-xl;
+  min-height: $scale-rem-xl;
+}
+.min-sq-2xl {
+  min-width: $scale-rem-2xl;
+  min-height: $scale-rem-2xl;
+}
+.min-sq-3xl {
+  min-width: $scale-rem-3xl;
+  min-height: $scale-rem-3xl;
+}
+.min-sq-4xl {
+  min-width: $scale-rem-4xl;
+  min-height: $scale-rem-4xl;
+}

package/dist/tokens/_screen.scss

@@ -0,0 +1,22 @@
+// Auto-generated DO NOT EDIT
+@use '_scale.scss' as scale;
+
+$screen-2xs: scale.$scale-rem-container-2xs;
+$screen-xs: scale.$scale-rem-container-xs;
+$screen-sm: scale.$scale-rem-container-sm;
+$screen-md: scale.$scale-rem-container-md;
+$screen-lg: scale.$scale-rem-container-lg;
+$screen-xl: scale.$scale-rem-container-xl;
+$screen-2xl: scale.$scale-rem-container-2xl;
+$screen-3xl: scale.$scale-rem-container-3xl;
+
+$screen-map: (
+  2xs: $screen-2xs,
+  xs: $screen-xs,
+  sm: $screen-sm,
+  md: $screen-md,
+  lg: $screen-lg,
+  xl: $screen-xl,
+  2xl: $screen-2xl,
+  3xl: $screen-3xl
+);

package/dist/tokens/_shadow.scss

@@ -0,0 +1,18 @@
+// Auto-generated DO NOT EDIT
+@use '_color.scss' as color;
+@use '_opacity.scss' as opacity;
+@use '_scale.scss' as scale;
+
+$shadow-10: scale.$scale-min scale.$scale-min 10px rgba(color.$color-grey-600, opacity.$opacity-10);
+$shadow-20: scale.$scale-min scale.$scale-min scale.$scale-rem-md rgba(color.$color-grey-600, opacity.$opacity-12);
+$shadow-30: scale.$scale-min scale.$scale-min scale.$scale-rem-md rgba(color.$color-grey-600, opacity.$opacity-30);
+$shadow-inherit: scale.$scale-inherit;
+$shadow-none: scale.$scale-none;
+
+$shadow-map: (
+  10: $shadow-10,
+  20: $shadow-20,
+  30: $shadow-30,
+  inherit: $shadow-inherit,
+  none: $shadow-none
+);

package/dist/tokens/_text.scss

@@ -0,0 +1,20 @@
+// Auto-generated DO NOT EDIT
+@use '_scale.scss' as scale;
+
+$text-sm: scale.$scale-rem-sm;
+$text-md: scale.$scale-rem-md;
+$text-lg: scale.$scale-rem-lg;
+$text-xl: scale.$scale-rem-xl;
+$text-2xl: scale.$scale-rem-2xl;
+$text-3xl: scale.$scale-rem-3xl;
+$text-4xl: scale.$scale-rem-4xl;
+
+$text-map: (
+  sm: $text-sm,
+  md: $text-md,
+  lg: $text-lg,
+  xl: $text-xl,
+  2xl: $text-2xl,
+  3xl: $text-3xl,
+  4xl: $text-4xl
+);

package/package.json

@@ -4,18 +4,19 @@
     "type": "git",
     "url": "https://github.com/W170/talenta.magneto365.ui.git"
   },
-  "version": "2.70.4",
+  "version": "2.71.0",
   "description": "Magneto365 UI common components",
   "scripts": {
+    "generate:tokens": "node ./.scripts/generateTokens.js",
     "lint": "eslint ./src --ext .js,.ts,.jsx,.tsx",
     "prepare": "husky install && chmod +x .husky/pre-commit .husky/pre-push .husky/commit-msg",
     "prettier": "prettier --write ./**/*.{js,ts,jsx,tsx}  --list-different",
-    "build": "rollup -c rollup.config.js --configPlugin typescript",
-    "rollup": "bash rollup.builder.sh",
+    "build": "yarn generate:tokens && rollup -c rollup.config.js --configPlugin typescript",
+    "rollup": "yarn generate:tokens && bash rollup.builder.sh",
     "postrollup": "bash aws.postbuild.sh",
     "test": "jest",
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "storybook": "yarn generate:tokens && storybook dev -p 6006",
+    "build-storybook": "yarn generate:tokens && storybook build"
   },
   "author": "Wilmer H Muñoz Gomez",
   "license": "UNLICENSED",
@@ -72,6 +73,7 @@
     "react-dom": "^17.0.2",
     "rollup": "^2.60.0",
     "rollup-plugin-babel": "^4.4.0",
+    "rollup-plugin-copy": "^3.5.0",
     "rollup-plugin-dts": "^4.0.1",
     "rollup-plugin-generate-package-json": "^3.2.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",