npm - @gainsight-hub/design-tokens - Versions diffs - 0.1.0 - Mend

@gainsight-hub/design-tokens 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (26) hide show

package/README.md +305 -0
package/dist/applyTheme.d.ts +14 -0
package/dist/applyTheme.js +66 -0
package/dist/index.d.ts +3 -0
package/dist/index.js +3 -0
package/dist/styles.css +457 -0
package/dist/tailwind.preset.cjs +289 -0
package/dist/tailwind.preset.mjs +289 -0
package/dist/theme-manifest.json +212 -0
package/dist/themes/antd.css +48 -0
package/dist/themes/antd.css.d.ts +2 -0
package/dist/themes/dark.css +47 -0
package/dist/themes/dark.css.d.ts +2 -0
package/dist/themes/legacy.css +165 -0
package/dist/themes/legacy.css.d.ts +2 -0
package/dist/themes/mui.css +48 -0
package/dist/themes/mui.css.d.ts +2 -0
package/dist/themes/spectrum.css +48 -0
package/dist/themes/spectrum.css.d.ts +2 -0
package/dist/themes.css +8 -0
package/dist/token-catalog.json +5107 -0
package/dist/tokens.d.ts +525 -0
package/dist/tokens.js +371 -0
package/dist/tokens.json +617 -0
package/dist/tokens.scss +360 -0
package/package.json +55 -0

package/dist/tokens.json ADDED Viewed

@@ -0,0 +1,617 @@
+{
+  "border": {
+    "width": {
+      "100": "1px",
+      "200": "2px"
+    }
+  },
+  "color": {
+    "brand": {
+      "100": "#E9F2FF",
+      "200": "#CCE0FF",
+      "300": "#85B8FF",
+      "400": "#579DFF",
+      "500": "#388BFF",
+      "600": "#1D7AFC",
+      "700": "#0C66E4",
+      "800": "#0055CC",
+      "900": "#09326C",
+      "1000": "#1C2B41"
+    },
+    "neutral": {
+      "0": "#FFFFFF",
+      "100": "#FAFAFA",
+      "200": "#F4F5F6",
+      "300": "#DEDFE2",
+      "400": "#B8BBC2",
+      "500": "#8D919B",
+      "600": "#7B808E",
+      "700": "#696E7C",
+      "800": "#4F5663",
+      "900": "#3B4254",
+      "1000": "#2B3346",
+      "A100": "#2b33460a",
+      "A200": "#2b334614",
+      "A300": "#2b334629",
+      "A400": "#2b334652",
+      "A500": "#2b33467a"
+    },
+    "blue": {
+      "100": "#e9f2ff",
+      "200": "#cce0ff",
+      "300": "#85b8ff",
+      "400": "#579dff",
+      "500": "#388bff",
+      "600": "#1d7afc",
+      "700": "#0c66e4",
+      "800": "#0055cc",
+      "900": "#09326c",
+      "1000": "#1c2b41"
+    },
+    "green": {
+      "100": "#dcffeb",
+      "200": "#baf3d2",
+      "300": "#7ee2a6",
+      "400": "#4bce7f",
+      "500": "#2abb62",
+      "600": "#22a052",
+      "700": "#1f8444",
+      "800": "#216e3d",
+      "900": "#164b29",
+      "1000": "#1c3324"
+    },
+    "red": {
+      "100": "#ffeceb",
+      "200": "#ffd3d2",
+      "300": "#fd9391",
+      "400": "#f86a68",
+      "500": "#f15050",
+      "600": "#e23d3d",
+      "700": "#c92c2f",
+      "800": "#ae2426",
+      "900": "#5d1a1c",
+      "1000": "#421f21"
+    },
+    "yellow": {
+      "100": "#fff7d6",
+      "200": "#f8e6a0",
+      "300": "#f5cd47",
+      "400": "#e2b203",
+      "500": "#cf9f02",
+      "600": "#b38600",
+      "700": "#946f00",
+      "800": "#7f5f01",
+      "900": "#533f04",
+      "1000": "#332e1b"
+    },
+    "action": {
+      "primary": {
+        "default": "#0C66E4",
+        "hover": "#0055CC",
+        "pressed": "#09326C"
+      },
+      "neutral": {
+        "default": "#FFFFFF",
+        "hover": "#FAFAFA",
+        "pressed": "#F4F5F6"
+      },
+      "destructive": {
+        "default": "#c92c2f",
+        "hover": "#ae2426",
+        "pressed": "#5d1a1c"
+      }
+    },
+    "surface": {
+      "page": "#FAFAFA",
+      "default": "#FFFFFF",
+      "muted": "#F4F5F6",
+      "disabled": "#F4F5F6",
+      "overlay": "#FFFFFF",
+      "inverse": "#2B3346"
+    },
+    "content": {
+      "default": "#2B3346",
+      "subtle": "#4F5663",
+      "subtlest": "#696E7C",
+      "heading": {
+        "default": "#2B3346",
+        "hero": "#FFFFFF"
+      },
+      "inverse": "#FFFFFF",
+      "disabled": "#B8BBC2"
+    },
+    "line": {
+      "default": "#DEDFE2",
+      "disabled": "#DEDFE2"
+    },
+    "status": {
+      "success": {
+        "bold": "#1f8444"
+      },
+      "information": {
+        "bold": "#0c66e4"
+      },
+      "danger": {
+        "bold": "#c92c2f"
+      }
+    },
+    "community": {
+      "answered": "#1f8444",
+      "unanswered": "#696E7C",
+      "highlighted": "#0C66E4",
+      "pinned": "#0C66E4"
+    },
+    "link": {
+      "default": "#0C66E4",
+      "hover": "#0055CC"
+    },
+    "focus": {
+      "ring": "#388bff"
+    },
+    "overlay": {
+      "backdrop": "#2b33467a",
+      "interactive": {
+        "hover": "#2b33460a",
+        "pressed": "#2b334614"
+      }
+    },
+    "skeleton": {
+      "default": "#F4F5F6",
+      "subtle": "#2b33460a"
+    }
+  },
+  "font": {
+    "family": {
+      "sans": "Roboto",
+      "mono": "Roboto Mono"
+    },
+    "weight": {
+      "regular": 400,
+      "medium": 500,
+      "bold": 700
+    },
+    "size": {
+      "100": "0.75rem",
+      "200": "0.875rem",
+      "300": "1rem",
+      "400": "1.25rem",
+      "500": "1.5rem",
+      "600": "1.75rem",
+      "700": "2rem"
+    }
+  },
+  "line": {
+    "height": {
+      "ratio": {
+        "tight": 1.25,
+        "relaxed": 1.5
+      },
+      "grid": {
+        "100": "1rem",
+        "200": "1.25rem",
+        "300": "1.5rem",
+        "400": "1.75rem",
+        "500": "2rem",
+        "600": "2.25rem",
+        "700": "2.5rem"
+      }
+    }
+  },
+  "radius": {
+    "100": "8px",
+    "150": "12px",
+    "200": "16px",
+    "025": "2px",
+    "050": "4px",
+    "full": "9999px"
+  },
+  "shadow": {
+    "100": "0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)",
+    "200": "0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1)",
+    "300": "0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 20px 25px -5px rgba(0, 0, 0, 0.1)"
+  },
+  "space": {
+    "0": "0px",
+    "100": "8px",
+    "125": "12px",
+    "200": "16px",
+    "250": "20px",
+    "300": "24px",
+    "400": "32px",
+    "500": "40px",
+    "600": "48px",
+    "800": "64px",
+    "1000": "80px",
+    "025": "2px",
+    "050": "4px",
+    "075": "6px",
+    "layout": {
+      "gutter": "12px"
+    }
+  },
+  "elevation": {
+    "1": "0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)",
+    "2": "0px 4px 6px -4px rgba(0, 0, 0, 0.1), 0px 10px 15px -3px rgba(0, 0, 0, 0.1)",
+    "3": "0px 8px 10px -6px rgba(0, 0, 0, 0.1), 0px 20px 25px -5px rgba(0, 0, 0, 0.1)"
+  },
+  "text": {
+    "hero": {
+      "font": {
+        "family": "Roboto",
+        "weight": 700,
+        "size": "2rem"
+      },
+      "lineHeight": 1.25
+    },
+    "heading": {
+      "small": {
+        "font": {
+          "family": "Roboto",
+          "weight": 500,
+          "size": "1.25rem"
+        },
+        "lineHeight": 1.25
+      },
+      "medium": {
+        "font": {
+          "family": "Roboto",
+          "weight": 500,
+          "size": "1.5rem"
+        },
+        "lineHeight": 1.25
+      },
+      "large": {
+        "font": {
+          "family": "Roboto",
+          "weight": 700,
+          "size": "1.75rem"
+        },
+        "lineHeight": 1.25
+      },
+      "xlarge": {
+        "font": {
+          "family": "Roboto",
+          "weight": 700,
+          "size": "2rem"
+        },
+        "lineHeight": 1.25
+      }
+    },
+    "body": {
+      "small": {
+        "font": {
+          "family": "Roboto",
+          "weight": 400,
+          "size": "0.875rem"
+        },
+        "lineHeight": 1.5
+      },
+      "medium": {
+        "font": {
+          "family": "Roboto",
+          "weight": 400,
+          "size": "1rem"
+        },
+        "lineHeight": 1.5
+      },
+      "large": {
+        "font": {
+          "family": "Roboto",
+          "weight": 400,
+          "size": "1.25rem"
+        },
+        "lineHeight": 1.5
+      }
+    },
+    "navigation": {
+      "font": {
+        "family": "Roboto",
+        "weight": 400,
+        "size": "0.875rem"
+      },
+      "lineHeight": "1.25rem"
+    },
+    "menu": {
+      "font": {
+        "family": "Roboto",
+        "weight": 400,
+        "size": "0.875rem"
+      },
+      "lineHeight": "1.25rem"
+    },
+    "button": {
+      "font": {
+        "family": "Roboto",
+        "weight": 500,
+        "size": "0.875rem"
+      },
+      "lineHeight": "1.25rem"
+    },
+    "label": {
+      "small": {
+        "font": {
+          "family": "Roboto",
+          "weight": 500,
+          "size": "0.875rem"
+        },
+        "lineHeight": "1.25rem"
+      },
+      "medium": {
+        "font": {
+          "family": "Roboto",
+          "weight": 500,
+          "size": "1rem"
+        },
+        "lineHeight": "1.5rem"
+      }
+    },
+    "caption": {
+      "font": {
+        "family": "Roboto",
+        "weight": 400,
+        "size": "0.75rem"
+      },
+      "lineHeight": "1rem"
+    },
+    "code": {
+      "font": {
+        "family": "Roboto Mono",
+        "weight": 400,
+        "size": "1rem"
+      },
+      "lineHeight": 1.5
+    }
+  },
+  "backtotop": {
+    "background": "#2B3346",
+    "content": "#FFFFFF"
+  },
+  "button": {
+    "radius": "8px",
+    "border": {
+      "width": "1px"
+    },
+    "font": {
+      "weight": 500
+    },
+    "text": {
+      "transform": "none"
+    },
+    "primary": {
+      "background": {
+        "default": "#0C66E4",
+        "hover": "#0055CC",
+        "pressed": "#09326C"
+      },
+      "content": {
+        "default": "#FFFFFF",
+        "hover": "#FFFFFF",
+        "pressed": "#FFFFFF"
+      },
+      "border": {
+        "default": "#00000000",
+        "hover": "#00000000",
+        "pressed": "#00000000"
+      },
+      "shadow": "none"
+    },
+    "secondary": {
+      "background": {
+        "default": "#FFFFFF",
+        "hover": "#FAFAFA",
+        "pressed": "#F4F5F6"
+      },
+      "content": {
+        "default": "#2B3346",
+        "hover": "#2B3346",
+        "pressed": "#2B3346"
+      },
+      "border": {
+        "default": "#DEDFE2",
+        "hover": "#DEDFE2",
+        "pressed": "#DEDFE2"
+      },
+      "shadow": "none"
+    },
+    "destructive": {
+      "background": {
+        "default": "#c92c2f",
+        "hover": "#ae2426",
+        "pressed": "#5d1a1c"
+      },
+      "content": {
+        "default": "#FFFFFF",
+        "hover": "#FFFFFF",
+        "pressed": "#FFFFFF"
+      },
+      "border": {
+        "default": "#00000000",
+        "hover": "#00000000",
+        "pressed": "#00000000"
+      },
+      "shadow": "none"
+    },
+    "vote": {
+      "background": {
+        "default": "#FFFFFF",
+        "hover": "#FAFAFA",
+        "pressed": "#F4F5F6"
+      },
+      "content": {
+        "default": "#2B3346",
+        "hover": "#2B3346",
+        "pressed": "#2B3346"
+      },
+      "border": {
+        "default": "#DEDFE2",
+        "hover": "#DEDFE2",
+        "pressed": "#DEDFE2"
+      },
+      "shadow": {
+        "default": "none",
+        "hover": "none",
+        "pressed": "none"
+      },
+      "selected": {
+        "background": {
+          "default": "#0C66E4",
+          "hover": "#0055CC",
+          "pressed": "#09326C"
+        },
+        "content": {
+          "default": "#FFFFFF",
+          "hover": "#FFFFFF",
+          "pressed": "#FFFFFF"
+        },
+        "border": {
+          "default": "#00000000",
+          "hover": "#00000000",
+          "pressed": "#00000000"
+        },
+        "shadow": {
+          "default": "none",
+          "hover": "none",
+          "pressed": "none"
+        }
+      }
+    }
+  },
+  "card": {
+    "radius": "8px",
+    "border": {
+      "width": "1px",
+      "default": "#DEDFE2",
+      "hover": "#DEDFE2",
+      "pressed": "#DEDFE2"
+    },
+    "background": {
+      "default": "#FFFFFF",
+      "hover": "#FFFFFF",
+      "pressed": "#FFFFFF"
+    },
+    "title": {
+      "default": "#2B3346",
+      "hover": "#0C66E4",
+      "pressed": "#2B3346"
+    },
+    "content": {
+      "default": "#2B3346",
+      "hover": "#2B3346",
+      "pressed": "#0055CC"
+    },
+    "shadow": {
+      "default": "none",
+      "hover": "0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)",
+      "pressed": "0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)"
+    }
+  },
+  "feed": {
+    "container": {
+      "radius": "8px",
+      "border": {
+        "width": "1px",
+        "color": "#DEDFE2"
+      },
+      "background": "#FFFFFF",
+      "shadow": "none"
+    },
+    "item": {
+      "radius": "8px",
+      "border": {
+        "width": "1px",
+        "default": "#DEDFE2",
+        "hover": "#DEDFE2",
+        "pressed": "#DEDFE2"
+      },
+      "background": {
+        "default": "#FFFFFF",
+        "hover": "#FFFFFF",
+        "pressed": "#FFFFFF"
+      },
+      "title": {
+        "default": "#2B3346",
+        "hover": "#0C66E4",
+        "pressed": "#0055CC"
+      },
+      "content": {
+        "default": "#2B3346",
+        "hover": "#2B3346",
+        "pressed": "#0055CC"
+      },
+      "shadow": {
+        "default": "none",
+        "hover": "0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)",
+        "pressed": "0px 2px 4px -2px rgba(0, 0, 0, 0.1), 0px 4px 6px -1px rgba(0, 0, 0, 0.1)"
+      }
+    }
+  },
+  "navigation": {
+    "background": "#FFFFFF",
+    "content": "#2B3346",
+    "dropdown": {
+      "background": "#FFFFFF",
+      "content": "#2B3346"
+    },
+    "border": {
+      "top": "#00000000",
+      "bottom": "#DEDFE2"
+    }
+  },
+  "widget": {
+    "title": "#2B3346",
+    "subtitle": "#2B3346",
+    "background": "#FAFAFA",
+    "shadow": "none",
+    "hero": {
+      "title": "#FFFFFF",
+      "subtitle": "#FFFFFF",
+      "content": {
+        "shadow": "none"
+      },
+      "background": "uploaded image",
+      "height": "240px"
+    },
+    "featured": {
+      "background": "#0c66e4",
+      "content": "#FFFFFF"
+    },
+    "introduction": {
+      "background": "#FFFFFF",
+      "content": "#2B3346",
+      "icon": {
+        "background": "#1f8444",
+        "content": "#FFFFFF"
+      },
+      "close": {
+        "content": "#696E7C"
+      }
+    }
+  },
+  "theme": {
+    "brand": {
+      "100": "#E9F2FF",
+      "200": "#CCE0FF",
+      "300": "#85B8FF",
+      "400": "#579DFF",
+      "500": "#388BFF",
+      "600": "#1D7AFC",
+      "700": "#0C66E4",
+      "800": "#0055CC",
+      "900": "#09326C",
+      "1000": "#1C2B41"
+    },
+    "neutral": {
+      "0": "#FFFFFF",
+      "100": "#FAFAFA",
+      "200": "#F4F5F6",
+      "300": "#DEDFE2",
+      "400": "#B8BBC2",
+      "500": "#8D919B",
+      "600": "#7B808E",
+      "700": "#696E7C",
+      "800": "#4F5663",
+      "900": "#3B4254",
+      "1000": "#2B3346"
+    }
+  }
+}