@wavemaker/foundation-css 11.10.0-next.25079

foundation-css/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@wavemaker/foundation-css",
+  "version": "11.10.0-next.25079",
+  "description": "Foundation of CSS used in WaveMaker with custom widgets.",
+  "main": "foundation.css",
+  "type": "module",
+  "scripts": {
+    "build": "npm run build:style-dist && npm run compile-css && npm run minify-css && npm run copy-fonts && npm run copy-tokens && node ./scripts/build.js post-build",
+    "build:style-dist": "node scripts/style-dist-build.js",
+    "compile-css": "lessc src/style.less dist/styles/foundation/foundation.css",
+    "minify-css": "lessc src/style.less dist/styles/foundation/foundation.min.css --clean-css",
+    "copy-fonts": "mkdir -p dist/styles/foundation/fonts && cp -r src/fonts/* dist/styles/foundation/fonts/",
+    "copy-tokens": "mkdir -p dist/styles/tokens && cp -r tokens/* dist/styles/tokens/ && cp ./index.js ./index.d.ts dist/styles/"
+  },
+  "devDependencies": {
+    "execa": "^5.0.0",
+    "fs-extra": "^11.2.0",
+    "less": "^4.2.0",
+    "less-plugin-clean-css": "^1.6.0",
+    "style-dictionary": "^4.1.0",
+    "tar": "^7.4.3",
+    "yargs": "^17.7.2"
+  },
+  "author": "",
+  "license": "ISC",
+  "style": "foundation.css",
+  "exports": {
+    ".": "./index"
+  }
+}

foundation-css/tokens/primitives/border/border.json

@@ -0,0 +1,10 @@
+{
+  "border": {
+    "color": {
+      "@": { "value": "{color.outline.variant.value}" },
+      "translucent": { "value": "rgba(0, 0, 0, 0.175)" }
+    },
+    "width": { "value": "1px" },
+    "style": { "value": "solid" }
+  }
+}

foundation-css/tokens/primitives/colors/color.dark.json

@@ -0,0 +1,124 @@
+{
+  "color": {
+    "primary": {
+      "@": { "value": "#d0bcfe" },
+      "container": {
+        "@": { "value": "#4f378b" }
+      },
+      "fixed": {
+        "@": { "value": "#eaddff" },
+        "dim": { "value": "#d0bcff" }
+      }
+    },
+    "on-primary": {
+      "@": { "value": "#381e72" },
+      "container": {
+        "@": { "value": "#eaddff" }
+      },
+      "fixed": {
+        "@": { "value": "#21005d" },
+        "variant": { "value": "#4f378b" }
+      }
+    },
+    "secondary": {
+      "@": { "value": "#ccc2dc" },
+      "container": {
+        "@": { "value": "#4a4458" }
+      },
+      "fixed": {
+        "@": { "value": "#e8def8" },
+        "dim": { "value": "#ccc2dc" }
+      }
+    },
+    "on-secondary": {
+      "@": { "value": "#332d41" },
+      "container": {
+        "@": { "value": "#e8def8" }
+      },
+      "fixed": {
+        "@": { "value": "#1d192b" },
+        "variant": { "value": "#4a4458" }
+      }
+    },
+    "tertiary": {
+      "@": { "value": "#efb8c8" },
+      "container": {
+        "@": { "value": "#633b48" }
+      },
+      "fixed": {
+        "@": { "value": "#ffd8e4" },
+        "dim": { "value": "#efb8c8" }
+      }
+    },
+    "on-tertiary": {
+      "@": { "value": "#492532" },
+      "container": {
+        "@": { "value": "#ffd8e4" }
+      },
+      "fixed": {
+        "@": { "value": "#31111d" },
+        "variant": { "value": "#633b48" }
+      }
+    },
+    "error": {
+      "@": { "value": "#f2b8b5" },
+      "container": {
+        "@": { "value": "#8c1d18" }
+      }
+    },
+    "on-error": {
+      "@": { "value": "#601410" },
+      "container": {
+        "@": { "value": "#f9dedc" }
+      }
+    },
+    "background": {
+      "@": { "value": "#141218" }
+    },
+    "on-background": {
+      "@": { "value": "#e6e0e9" }
+    },
+    "surface": {
+      "@": { "value": "#141218" },
+      "variant": { "value": "#49454f" },
+      "bright": { "value": "#3b383e" },
+      "dim": { "value": "#141218" },
+      "tint": { "value": "#d0bcff" },
+      "container": {
+        "@": { "value": "#211f26" },
+        "low": { "value": "#1d1b20" },
+        "lowest": { "value": "#0f0d13" },
+        "high": { "value": "#2b2930" },
+        "highest": { "value": "#36343b" }
+      }
+    },
+    "on-surface": {
+      "@": { "value": "#e6e0e9" },
+      "variant": { "value": "#cac4d0" }
+    },
+    "inverse": {
+      "surface": {
+        "@": { "value": "#e6e0e9" }
+      },
+      "on-surface": {
+        "@": { "value": "#322f35" }
+      },
+      "primary": {
+        "@": { "value": "#6750a4" }
+      }
+    },
+    "outline": {
+      "@": { "value": "#938f99" },
+      "variant": { "value": "#49454f" }
+    },
+    "shadow": {
+      "@": { "value": "#ffffff" }
+    },
+    "scrim": {
+      "@": { "value": "#000000" }
+    },
+    "on-success": {
+      "@": { "value": "#1d192b" }
+    }
+  }
+}

foundation-css/tokens/primitives/colors/color.json

@@ -0,0 +1,163 @@
+{
+  "color": {
+    "primary": {
+      "@": { "value": "#FF7250" },
+      "container": {
+        "@": { "value": "#ffe3dc" }
+      },
+      "fixed": {
+        "@": { "value": "#ffe8e2" },
+        "dim": { "value": "#ffe8e2" }
+      }
+    },
+    "on-primary": {
+      "@": { "value": "#FFFFFF" },
+      "container": {
+        "@": { "value": "#2d201d" }
+      },
+      "fixed": {
+        "@": { "value": "#1d0600" },
+        "variant": { "value": "#804536" }
+      }
+    },
+    "secondary": {
+      "@": { "value": "#656DF9" },
+      "container": {
+        "@": { "value": "#e2e3ff" }
+      },
+      "fixed": {
+        "@": { "value": "#dcdef6" },
+        "dim": { "value": "#bbbcd6" }
+      }
+    },
+    "on-secondary": {
+      "@": { "value": "#FFFFFF" },
+      "container": {
+        "@": { "value": "#1c1c2b" }
+      },
+      "fixed": {
+        "@": { "value": "#171828" },
+        "variant": { "value": "#404154" }
+      }
+    },
+    "tertiary": {
+      "@": { "value": "#E0B313" },
+      "container": {
+        "@": { "value": "#fff5d3" }
+      },
+      "fixed": {
+        "@": { "value": "#fff5d2" },
+        "dim": { "value": "#e9e1c3" }
+      }
+    },
+    "on-tertiary": {
+      "@": { "value": "#FFFFFF" },
+      "container": {
+        "@": { "value": "#27210c" }
+      },
+      "fixed": {
+        "@": { "value": "#362e12" },
+        "variant": { "value": "#544c31" }
+      }
+    },
+    "success": {
+      "@": { "value": "#5AC588" },
+      "container": {
+        "@": { "value": "#d6ffe8" }
+      }
+    },
+    "on-success": {
+      "@": { "value": "#ffffff" },
+      "container": {
+        "@": { "value": "#11251a" }
+      }
+    },
+    "info": {
+      "@": { "value": "#00c8ff" },
+      "container": {
+        "@": { "value": "#ddf7ff" }
+      }
+    },
+    "on-info": {
+      "@": { "value": "#ffffff" },
+      "container": {
+        "@": { "value": "#191919" }
+      }
+    },
+    "warning": {
+      "@": { "value": "#ffae00" },
+      "container": {
+        "@": { "value": "#fff4d5" }
+      }
+    },
+    "on-warning": {
+      "@": { "value": "#ffffff" },
+      "container": {
+        "@": { "value": "#1b1b1b" }
+      }
+    },
+    "error": {
+      "@": { "value": "#EF3F3F" },
+      "container": {
+        "@": { "value": "#F9DEDC" }
+      }
+    },
+    "on-error": {
+      "@": { "value": "#FFFFFF" },
+      "container": {
+        "@": { "value": "#410E0B" }
+      }
+    },
+    "background": {
+      "@": { "value": "#FFFFFF" }
+    },
+    "on-background": {
+      "@": { "value": "#35363B" }
+    },
+    "surface": {
+      "@": { "value": "#FFFFFF" },
+      "variant": { "value": "#FBFBFC" },
+      "bright": { "value": "#f3f4fe" },
+      "dim": { "value": "#c5c6d4" },
+      "tint": { "value": "#474b98" },
+      "container": {
+        "@": { "value": "#ebebf7" },
+        "low": { "value": "#f2f3fc" },
+        "lowest": { "value": "#FFFFFF" },
+        "high": { "value": "#e8e8f1" },
+        "highest": { "value": "#dfe0e9" }
+      }
+    },
+    "on-surface": {
+      "@": { "value": "#1D1B20" },
+      "variant": { "value": "#4F556D" }
+    },
+    "inverse": {
+      "surface": {
+        "@": { "value": "#2d2d33" }
+      },
+      "on-surface": {
+        "@": { "value": "#f5f5ff" }
+      },
+      "primary": {
+        "@": { "value": "#ffd4c9" }
+      }
+    },
+    "outline": {
+      "@": { "value": "#79747E" },
+      "variant": { "value": "#E4E4E4" }
+    },
+    "shadow": {
+      "@": { "value": "#000000" }
+    },
+    "scrim": {
+      "@": { "value": "#000000" }
+    },
+    "white": {
+      "@": { "value": "#FFFFFF" }
+    },
+    "black": {
+      "@": { "value": "#000000" }
+    }
+  }
+}

foundation-css/tokens/primitives/colors/color.light.json

@@ -0,0 +1 @@
+{}

foundation-css/tokens/primitives/font/font.json

@@ -0,0 +1,20 @@
+{
+  "font": {
+    "weight": {
+      "thin": { "value": 100 },
+      "extralight": { "value": 200 },
+      "light": { "value": 300 },
+      "regular": { "value": 400 },
+      "medium": { "value": 500 },
+      "semibold": { "value": 600 },
+      "bold": { "value": 700 },
+      "extrabold": { "value": 800 },
+      "black": { "value": 900 }
+    },
+    "family": {
+      "brand": { "value": "Roboto, {font.family.backup.value}" },
+      "plain": { "value": "Roboto, {font.family.backup.value}" },
+      "backup": { "value": "Arial, Helvetica, sans-serif" }
+    }
+  }
+}

foundation-css/tokens/primitives/radius/radius.json

@@ -0,0 +1,14 @@
+{
+  "radius": {
+    "none": { "value": "0px" },
+    "xxs": { "value": "2px" },
+    "xs": { "value": "4px" },
+    "sm": { "value": "8px" },
+    "md": { "value": "12px" },
+    "lg": { "value": "16px" },
+    "xl": { "value": "28px" },
+    "xxl": { "value": "32px" },
+    "pill": { "value": "1000px" },
+    "circle": { "value": "50%" }
+  }
+}

foundation-css/tokens/primitives/space/space.json

@@ -0,0 +1,57 @@
+{
+  "space": {
+    "rule": { "value": "0.25rem", "comment": "4px" },
+    "0": {
+      "value": "{space.rule.value}",
+      "attributes": { "comment": "0px", "multiple": "0" }
+    },
+    "1": {
+      "value": "{space.rule.value}",
+      "attributes": { "multiple": "1", "comment": "4px" }
+    },
+    "2": {
+      "value": "{space.rule.value}",
+      "attributes": { "multiple": "2", "comment": "8px" }
+    },
+    "3": {
+      "value": "{space.rule.value}",
+      "attributes": { "multiple": "3", "comment": "12px" }
+    },
+    "4": {
+      "value": "{space.rule.value}",
+      "attributes": { "multiple": "4", "comment": "16px" }
+    },
+    "5": {
+      "value": "{space.rule.value}",
+      "attributes": { "multiple": "5", "comment": "20px" }
+    },
+    "6": {
+      "value": "{space.rule.value}",
+      "attributes": { "multiple": "6", "comment": "24px" }
+    },
+    "7": {
+      "value": "{space.rule.value}",
+      "attributes": { "multiple": "7", "comment": "28px" }
+    },
+    "8": {
+      "value": "{space.rule.value}",
+      "attributes": { "multiple": "8", "comment": "32px" }
+    },
+    "9": {
+      "value": "{space.rule.value}",
+      "attributes": { "multiple": "9", "comment": "36px" }
+    },
+    "10": {
+      "value": "{space.rule.value}",
+      "attributes": { "multiple": "10", "comment": "40px" }
+    },
+    "11": {
+      "value": "{space.rule.value}",
+      "attributes": { "multiple": "11", "comment": "44px" }
+    },
+    "12": {
+      "value": "{space.rule.value}",
+      "attributes": { "multiple": "12", "comment": "48px" }
+    }
+  }
+}

foundation-css/tokens/primitives/spacer/spacer.json

@@ -0,0 +1,45 @@
+{
+  "spacer": {
+    "@": { "value": "1rem" },
+    "0": {
+      "value": "{spacer.@.value}",
+      "attributes": { "multiple": "0", "transform": "calc" }
+    },
+    "1": {
+      "value": "{spacer.@.value}",
+      "attributes": { "multiple": "0.25", "transform": "calc" }
+    },
+    "2": {
+      "value": "{spacer.@.value}",
+      "attributes": { "multiple": "0.5", "transform": "calc" }
+    },
+    "3": {
+      "value": "{spacer.@.value}",
+      "attributes": { "multiple": "1", "transform": "calc" }
+    },
+    "4": {
+      "value": "{spacer.@.value}",
+      "attributes": { "multiple": "1.6", "transform": "calc" }
+    },
+    "5": {
+      "value": "{spacer.@.value}",
+      "attributes": { "multiple": "2.5", "transform": "calc" }
+    },
+    "6": {
+      "value": "{spacer.@.value}",
+      "attributes": { "multiple": "3.5", "transform": "calc" }
+    },
+    "7": {
+      "value": "{spacer.@.value}",
+      "attributes": { "multiple": "4", "transform": "calc" }
+    },
+    "8": {
+      "value": "{spacer.@.value}",
+      "attributes": { "multiple": "8", "transform": "calc" }
+    },
+    "9": {
+      "value": "{spacer.@.value}",
+      "attributes": { "multiple": "11", "transform": "calc" }
+    }
+  }
+}

foundation-css/tokens/semantics/box-shadow/box-shadow.json

@@ -0,0 +1,8 @@
+{
+  "box-shadow": {
+    "@": { "value": "0px 0px 40px rgba(29, 58, 83, 0.1)" },
+    "sm": { "value": "0 0.125rem 0.25rem rgba(29, 58, 83, 0.15)" },
+    "lg": { "value": "0 1rem 3rem rgba(29, 58, 83, 0.15)" },
+    "inset": { "value": "inset 0 1px 2px rgba(0, 0, 0, 0.075)" }
+  }
+}