@wavemaker-ai/foundation-css 1.0.0-rc.647469

package/src/tokens/web/global/colors/color.json

@@ -0,0 +1,566 @@
+{
+  "color": {
+    "primary": {
+      "@": { "value": "#FF7250", "attributes": { "subtype": "color" } },
+      "container": {
+        "@": {
+          "value": "#ffe3dc",
+          "attributes": {
+            "derivedFrom": "color.primary.@",
+            "formula": "lighten(40%)",
+            "subtype": "color"
+          }
+        }
+      },
+      "fixed": {
+        "@": {
+          "value": "#ffe8e2",
+          "attributes": {
+            "derivedFrom": "color.primary.@",
+            "formula": "lighten(45%)",
+            "subtype": "color"
+          }
+        },
+        "dim": {
+          "value": "#ffe8e2",
+          "attributes": {
+            "derivedFrom": "color.primary.@",
+            "formula": "lighten(45%)",
+            "subtype": "color"
+          }
+        }
+      }
+    },
+    "on-primary": {
+      "@": {
+        "value": "#FFFFFF",
+        "attributes": {
+          "derivedFrom": "color.primary.@",
+          "formula": "contrast('#FFFFFF') > 4.5 ? '#FFFFFF' : '#000000'",
+          "subtype": "color"
+        }
+      },
+      "container": {
+        "@": {
+          "value": "#2d201d",
+          "attributes": {
+            "derivedFrom": "color.primary.@",
+            "formula": "darken(20%)",
+            "subtype": "color"
+          }
+        }
+      },
+      "fixed": {
+        "@": {
+          "value": "#1d0600",
+          "attributes": {
+            "derivedFrom": "color.primary.@",
+            "formula": "darken(50%)",
+            "subtype": "color"
+          }
+        },
+        "variant": {
+          "value": "#804536",
+          "attributes": {
+            "derivedFrom": "color.primary.@",
+            "formula": "darken(30%)",
+            "subtype": "color"
+          }
+        }
+      }
+    },
+    "secondary": {
+      "@": { "value": "#656DF9", "attributes": { "subtype": "color" } },
+      "container": {
+        "@": {
+          "value": "#e2e3ff",
+          "attributes": {
+            "derivedFrom": "color.secondary.@",
+            "formula": "lighten(40%)",
+            "subtype": "color"
+          }
+        }
+      },
+      "fixed": {
+        "@": {
+          "value": "#dcdef6",
+          "attributes": {
+            "derivedFrom": "color.secondary.@",
+            "formula": "lighten(45%)",
+            "subtype": "color"
+          }
+        },
+        "dim": {
+          "value": "#bbbcd6",
+          "attributes": {
+            "derivedFrom": "color.secondary.@",
+            "formula": "lighten(45%)",
+            "subtype": "color"
+          }
+        }
+      }
+    },
+    "on-secondary": {
+      "@": {
+        "value": "#FFFFFF",
+        "attributes": {
+          "derivedFrom": "color.secondary.@",
+          "formula": "contrast('#FFFFFF') > 4.5 ? '#FFFFFF' : '#000000'",
+          "subtype": "color"
+        }
+      },
+      "container": {
+        "@": {
+          "value": "#1c1c2b",
+          "attributes": {
+            "derivedFrom": "color.secondary.@",
+            "formula": "darken(20%)",
+            "subtype": "color"
+          }
+        }
+      },
+      "fixed": {
+        "@": {
+          "value": "#171828",
+          "attributes": {
+            "derivedFrom": "color.secondary.@",
+            "formula": "darken(50%)",
+            "subtype": "color"
+          }
+        },
+        "variant": {
+          "value": "#404154",
+          "attributes": {
+            "derivedFrom": "color.secondary.@",
+            "formula": "darken(30%)",
+            "subtype": "color"
+          }
+        }
+      }
+    },
+    "tertiary": {
+      "@": { "value": "#E0B313", "attributes": { "subtype": "color" } },
+      "container": {
+        "@": {
+          "value": "#fff5d3",
+          "attributes": {
+            "derivedFrom": "color.tertiary.@",
+            "formula": "lighten(40%)",
+            "subtype": "color"
+          }
+        }
+      },
+      "fixed": {
+        "@": {
+          "value": "#fff5d2",
+          "attributes": {
+            "derivedFrom": "color.tertiary.@",
+            "formula": "lighten(45%)",
+            "subtype": "color"
+          }
+        },
+        "dim": {
+          "value": "#e9e1c3",
+          "attributes": {
+            "derivedFrom": "color.tertiary.@",
+            "formula": "lighten(45%)",
+            "subtype": "color"
+          }
+        }
+      }
+    },
+    "on-tertiary": {
+      "@": {
+        "value": "#FFFFFF",
+        "attributes": {
+          "derivedFrom": "color.tertiary.@",
+          "formula": "contrast('#FFFFFF') > 4.5 ? '#FFFFFF' : '#000000'",
+          "subtype": "color"
+        }
+      },
+      "container": {
+        "@": {
+          "value": "#27210c",
+          "attributes": {
+            "derivedFrom": "color.tertiary.@",
+            "formula": "darken(20%)",
+            "subtype": "color"
+          }
+        }
+      },
+      "fixed": {
+        "@": {
+          "value": "#362e12",
+          "attributes": {
+            "derivedFrom": "color.tertiary.@",
+            "formula": "darken(50%)",
+            "subtype": "color"
+          }
+        },
+        "variant": {
+          "value": "#544c31",
+          "attributes": {
+            "derivedFrom": "color.tertiary.@",
+            "formula": "darken(30%)",
+            "subtype": "color"
+          }
+        }
+      }
+    },
+    "success": {
+      "@": { "value": "#5AC588", "attributes": { "subtype": "color" } },
+      "container": {
+        "@": {
+          "value": "#d6ffe8",
+          "attributes": {
+            "derivedFrom": "color.success.@",
+            "formula": "lighten(45%)",
+            "subtype": "color"
+          }
+        }
+      }
+    },
+    "on-success": {
+      "@": {
+        "value": "#FFFFFF",
+        "attributes": {
+          "derivedFrom": "color.success.@",
+          "formula": "contrast('#FFFFFF') > 4.5 ? '#FFFFFF' : '#000000'",
+          "subtype": "color"
+        }
+      },
+      "container": {
+        "@": {
+          "value": "#11251a",
+          "attributes": {
+            "derivedFrom": "color.success.@",
+            "formula": "darken(30%)",
+            "subtype": "color"
+          }
+        }
+      }
+    },
+    "info": {
+      "@": { "value": "#00c8ff", "attributes": { "subtype": "color" } },
+      "container": {
+        "@": {
+          "value": "#ddf7ff",
+          "attributes": {
+            "derivedFrom": "color.info.@",
+            "formula": "lighten(40%)",
+            "subtype": "color"
+          }
+        }
+      }
+    },
+    "on-info": {
+      "@": {
+        "value": "#FFFFFF",
+        "attributes": {
+          "derivedFrom": "color.info.@",
+          "formula": "contrast('#FFFFFF') > 4.5 ? '#FFFFFF' : '#000000'",
+          "subtype": "color"
+        }
+      },
+      "container": {
+        "@": {
+          "value": "#191919",
+          "attributes": {
+            "derivedFrom": "color.info.@",
+            "formula": "darken(15%)",
+            "subtype": "color"
+          }
+        }
+      }
+    },
+    "warning": {
+      "@": { "value": "#ffae00", "attributes": { "subtype": "color" } },
+      "container": {
+        "@": {
+          "value": "#fff4d5",
+          "attributes": {
+            "derivedFrom": "color.warning.@",
+            "formula": "lighten(40%)",
+            "subtype": "color"
+          }
+        }
+      }
+    },
+    "on-warning": {
+      "@": {
+        "value": "#FFFFFF",
+        "attributes": {
+          "derivedFrom": "color.warning.@",
+          "formula": "contrast('#FFFFFF') > 4.5 ? '#FFFFFF' : '#000000'",
+          "subtype": "color"
+        }
+      },
+      "container": {
+        "@": {
+          "value": "#1b1b1b",
+          "attributes": {
+            "derivedFrom": "color.warning.@",
+            "formula": "darken(15%)",
+            "subtype": "color"
+          }
+        }
+      }
+    },
+    "error": {
+      "@": { "value": "#f44336", "attributes": { "subtype": "color" } },
+      "container": {
+        "@": {
+          "value": "#F9DEDC",
+          "attributes": {
+            "derivedFrom": "color.error.@",
+            "formula": "lighten(40%)",
+            "subtype": "color"
+          }
+        }
+      }
+    },
+    "on-error": {
+      "@": {
+        "value": "#FFFFFF",
+        "attributes": {
+          "derivedFrom": "color.error.@",
+          "formula": "contrast('#FFFFFF') > 4.5 ? '#FFFFFF' : '#000000'",
+          "subtype": "color"
+        }
+      },
+      "container": {
+        "@": {
+          "value": "#410E0B",
+          "attributes": {
+            "derivedFrom": "color.error.@",
+            "formula": "darken(25%)",
+            "subtype": "color"
+          }
+        }
+      }
+    },
+    "background": {
+      "@": { "value": "#FFFFFF", "attributes": { "subtype": "color" } }
+    },
+    "on-background": {
+      "@": {
+        "value": "#35363B",
+        "attributes": {
+          "derivedFrom": "color.background.@",
+          "formula": "darken(80%)",
+          "subtype": "color"
+        }
+      }
+    },
+    "outline": {
+      "@": {
+        "value": "#79747E",
+        "attributes": {
+          "derivedFrom": "color.background.@",
+          "formula": "darken(30%)",
+          "subtype": "color"
+        }
+      },
+      "variant": {
+        "value": "#E4E4E4",
+        "attributes": {
+          "derivedFrom": "color.background.@",
+          "formula": "lighten(10%)",
+          "subtype": "color"
+        }
+      }
+    },
+    "shadow": {
+      "@": {
+        "value": "#dfdfdf",
+        "attributes": {
+          "derivedFrom": "color.background.@",
+          "formula": "darken(12.25%)",
+          "subtype": "color"
+        }
+      }
+    },
+    "scrim": {
+      "@": {
+        "value": "#000000",
+        "attributes": {
+          "derivedFrom": "color.background.@",
+          "formula": "rgba(0, 0, 0, 0.5)",
+          "subtype": "color"
+        }
+      }
+    },
+    "surface": {
+      "@": { "value": "#FFFFFF", "attributes": { "subtype": "color" } },
+      "variant": {
+        "@": {
+          "value": "#FBFBFC",
+          "attributes": {
+            "derivedFrom": "color.surface.@",
+            "formula": "lighten(6%)",
+            "subtype": "color"
+          }
+        }
+      },
+      "bright": {
+        "@": {
+          "value": "#f3f4fe",
+          "attributes": {
+            "derivedFrom": "color.surface.@",
+            "formula": "lighten(0%)",
+            "subtype": "color"
+          }
+        }
+      },
+      "dim": {
+        "@": {
+          "value": "#c5c6d4",
+          "attributes": {
+            "derivedFrom": "color.surface.@",
+            "formula": "darken(10%)",
+            "subtype": "color"
+          }
+        }
+      },
+      "tint": {
+        "@": {
+          "value": "#474b98",
+          "attributes": {
+            "derivedFrom": "color.surface.@",
+            "formula": "darken(10%)",
+            "subtype": "color"
+          }
+        }
+      },
+      "container": {
+        "@": {
+          "value": "#ebebf7",
+          "attributes": {
+            "derivedFrom": "color.surface.@",
+            "formula": "lighten(6%)",
+            "subtype": "color"
+          }
+        },
+        "low": {
+          "@": {
+            "value": "#f0f2ff",
+            "attributes": {
+              "derivedFrom": "color.surface.@",
+              "formula": "lighten(10%)",
+              "subtype": "color"
+            }
+          }
+        },
+        "lowest": {
+          "@": {
+            "value": "#f5f7ff",
+            "attributes": {
+              "derivedFrom": "color.surface.@",
+              "formula": "lighten(10%)",
+              "subtype": "color"
+            }
+          }
+        },
+        "high": {
+          "@": {
+            "value": "#e8e8f1",
+            "attributes": {
+              "derivedFrom": "color.surface.@",
+              "formula": "lighten(3%)",
+              "subtype": "color"
+            }
+          }
+        },
+        "highest": {
+          "@": {
+            "value": "#dfe0e9",
+            "attributes": {
+              "derivedFrom": "color.surface.@",
+              "formula": "lighten(1%)",
+              "subtype": "color"
+            }
+          }
+        }
+      }
+    },
+    "on-surface": {
+      "@": {
+        "value": "#1D1B20",
+        "attributes": {
+          "derivedFrom": "color.surface.@",
+          "formula": "lighten(70%)",
+          "subtype": "color"
+        }
+      },
+      "variant": {
+        "@": {
+          "value": "#4F556D",
+          "attributes": {
+            "derivedFrom": "color.surface.@",
+            "formula": "lighten(40%)",
+            "subtype": "color"
+          }
+        }
+      }
+    },
+    "inverse": {
+      "surface": {
+        "@": {
+          "value": "#2d2d33",
+          "attributes": {
+            "derivedFrom": "color.surface.@",
+            "formula": "lighten(12%)",
+            "subtype": "color"
+          }
+        }
+      },
+      "on-surface": {
+        "@": {
+          "value": "#f5f5ff",
+          "attributes": {
+            "derivedFrom": "color.surface.@",
+            "formula": "lighten(70%)",
+            "subtype": "color"
+          }
+        }
+      },
+      "primary": {
+        "@": {
+          "value": "#ffd4c9",
+          "attributes": {
+            "derivedFrom": "color.primary.@",
+            "formula": "lighten(65%)",
+            "subtype": "color"
+          }
+        }
+      }
+    },
+    "white": {
+      "@": {
+        "value": "#FFFFFF",
+        "attributes": { "subtype": "color" }
+      }
+    },
+    "black": {
+      "@": {
+        "value": "#000000",
+        "attributes": { "subtype": "color" }
+      }
+    },
+    "inherit": {
+      "value": "inherit",
+      "attributes": { "subtype": "color" }
+    },
+    "transparent": {
+      "value": "transparent",
+      "attributes": { "subtype": "color" }
+    },
+    "border": {
+      "@": { "value": "#E4E4E4", "attributes": { "subtype": "color" } },
+      "translucent": {
+        "value": "#0000002D",
+        "attributes": { "subtype": "color" }
+      }
+    }
+  }
+}

package/src/tokens/web/global/colors/color.light.json

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

package/src/tokens/web/global/elevation/elevation.json

@@ -0,0 +1,48 @@
+{
+  "elevation": {
+    "shadow": {
+      "1": {
+        "value": "0px 4px 11px 0px color-mix(in srgb, {color.shadow.@.value}, transparent 20%)",
+        "type": "radius",
+        "attributes": {
+          "subtype": "elevation"
+        }
+      },
+      "2": {
+        "value": "0px 1px 2px 0px color-mix(in srgb, {color.shadow.@.value}, transparent 70%),0px 2px 6px 2px color-mix(in srgb, {color.shadow.@.value}, transparent 85%)",
+        "type": "radius",
+        "attributes": {
+          "subtype": "elevation"
+        }
+      },
+      "3": {
+        "value": "0px 4px 8px 3px color-mix(in srgb, {color.shadow.@.value}, transparent 85%),0px 1px 3px 0px color-mix(in srgb, {color.shadow.@.value}, transparent 70%)",
+        "type": "radius",
+        "attributes": {
+          "subtype": "elevation"
+        }
+      },
+      "4": {
+        "value": "0px 6px 10px 4px color-mix(in srgb, {color.shadow.@.value}, transparent 85%),0px 2px 3px 0px color-mix(in srgb, {color.shadow.@.value}, transparent 70%)",
+        "type": "radius",
+        "attributes": {
+          "subtype": "elevation"
+        }
+      },
+      "5": {
+        "value": "0px 8px 12px 6px color-mix(in srgb, {color.shadow.@.value}, transparent 85%),0px 4px 4px 0px color-mix(in srgb, {color.shadow.@.value}, transparent 70%)",
+        "type": "radius",
+        "attributes": {
+          "subtype": "elevation"
+        }
+      },
+      "none": {
+        "value": "none",
+        "type": "radius",
+        "attributes": {
+          "subtype": "elevation"
+        }
+      }
+    }
+  }
+}