@wavemaker/foundation-css 12.0.0-next.45188 → 12.0.0-next.45189

foundation-css/index.d.ts

@@ -0,0 +1,30 @@
+// TokenSet Interface
+export interface TokenSet {
+  default: Record<string, any>;
+  light?: Record<string, any>;
+  dark?: Record<string, any>;
+}
+
+// Tokens Interface
+export interface Tokens {
+  reference: {
+    color: TokenSet;
+    font: TokenSet;
+    space: TokenSet;
+    radius: TokenSet;
+  };
+  system: {
+    color: TokenSet;
+    font: TokenSet;
+    space: TokenSet;
+    opacity: TokenSet;
+  };
+  [key: string]: any;
+}
+
+// Primitives
+export declare const reference: Tokens['reference'];
+
+// Semantics
+export declare const system: Tokens['system'];
+

foundation-css/index.js

@@ -0,0 +1,46 @@
+// Primitives
+import colorDefault from './tokens/primitives/colors/color.json';
+import colorLight from './tokens/primitives/colors/color.light.json';
+import colorDark from './tokens/primitives/colors/color.dark.json';
+
+import fontDefault from './tokens/primitives/font/font.json';
+import spacingDefault from './tokens/primitives/space/space.json';
+import radiusDefault from './tokens/primitives/radius/radius.json';
+
+// Semantics
+import semanticColorDefault from './tokens/semantics/colors/color.json';
+import semanticFontDefault from './tokens/semantics/font/font.json';
+import opacityDefault from './tokens/semantics/opacity/opacity.json';
+
+// Organized Tokens
+export const reference = {
+  color: {
+    default: colorDefault,
+    light: colorLight,
+    dark: colorDark,
+  },
+  font: {
+    default: fontDefault,
+  },
+  space: {
+    default: spacingDefault,
+  },
+  radius: {
+    default: radiusDefault,
+  },
+};
+
+export const system = {
+  color: {
+    default: semanticColorDefault,
+  },
+  font: {
+    default: semanticFontDefault,
+  },
+  space: {
+    default: spacingDefault,
+  },
+  opacity: {
+    default: opacityDefault,
+  },
+};

foundation-css/package.json

@@ -1,15 +1,16 @@
 {
   "name": "@wavemaker/foundation-css",
-  "version": "12.0.0-next.45188",
+  "version": "12.0.0-next.45189",
   "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 && node ./scripts/build.js post-build",
+    "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-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",
@@ -24,6 +25,6 @@
   "license": "ISC",
   "style": "foundation.css",
   "exports": {
-    ".": "./foundation.css"
+    ".": "./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)" }
+  }
+}