@prosync_solutions/ui 0.1.0

package/src/styles/tokens.json

@@ -0,0 +1,673 @@
+{
+  "Prosync": {
+    "font": {
+      "family": {
+        "sans-montserrat": {
+          "value": "montserrat",
+          "type": "text"
+        }
+      }
+    },
+    "radius": {
+      "card": {
+        "value": "12",
+        "type": "number"
+      },
+      "container": {
+        "value": "12",
+        "type": "number"
+      },
+      "button": {
+        "value": "6",
+        "type": "number"
+      },
+      "table": {
+        "value": "12",
+        "type": "number"
+      },
+      "tag": {
+        "value": "6",
+        "type": "number"
+      },
+      "avatar": {
+        "value": "9999",
+        "type": "number"
+      }
+    },
+    "brand": {
+      "primary": {
+        "value": "#03439a",
+        "type": "color"
+      },
+      "primary-strong": {
+        "value": "#02367b",
+        "type": "color"
+      },
+      "primary-subtle": {
+        "value": "#dbeafe",
+        "type": "color",
+        "description": "Light tint of primary — used for selected/hover backgrounds"
+      },
+      "primary-tint": {
+        "value": "#93c5fd",
+        "type": "color",
+        "description": "Mid tint of primary — used for focus rings"
+      },
+      "primary-light": {
+        "value": "#3b82f6",
+        "type": "color",
+        "description": "Lighter shade of primary"
+      },
+      "secondary": {
+        "value": "#f0c10f",
+        "type": "color"
+      },
+      "secondary-strong": {
+        "value": "#d4a10c",
+        "type": "color",
+        "description": "Darker shade of secondary — used for hover states"
+      }
+    },
+    "semantic": {
+      "secondary-400": {
+        "value": "#99a1af",
+        "type": "color"
+      },
+      "success-400": {
+        "value": "#05df72",
+        "type": "color"
+      },
+      "info-400": {
+        "value": "#00bcff",
+        "type": "color"
+      },
+      "warn-400": {
+        "value": "#ff8904",
+        "type": "color"
+      },
+      "error-400": {
+        "value": "#ff6467",
+        "type": "color"
+      },
+      "attention-400": {
+        "value": "#a684ff",
+        "type": "color"
+      }
+    },
+    "surface": {
+      "main-bg": {
+        "value": "#f9fafb",
+        "type": "color"
+      },
+      "sub-bg": {
+        "value": "#ffffff",
+        "type": "color"
+      },
+      "dark-bg": {
+        "value": "#1d293d",
+        "type": "color"
+      },
+      "dark-bg-strong": {
+        "value": "#020618",
+        "type": "color"
+      },
+      "gray-bg": {
+        "value": "#f3f4f6",
+        "type": "color"
+      },
+      "gray-bg-strong": {
+        "value": "#e5e7eb",
+        "type": "color"
+      },
+      "disabled": {
+        "value": "#f3f4f6",
+        "type": "color"
+      },
+      "bg-secondary": {
+        "value": "#f1f5f9",
+        "type": "color"
+      },
+      "bg-secondary-50": {
+        "value": "#f1f5f980",
+        "type": "color",
+        "description": "background secondary color with 50% of opacity"
+      },
+      "bg-success": {
+        "value": "#dcfce7",
+        "type": "color"
+      },
+      "bg-success-50": {
+        "value": "#dcfce780",
+        "type": "color",
+        "description": "background success color with 50% of opacity"
+      },
+      "bg-info": {
+        "value": "#dff2fe",
+        "type": "color"
+      },
+      "bg-info-50": {
+        "value": "#dff2fe80",
+        "type": "color",
+        "description": "background info color with 50% of opacity"
+      },
+      "bg-warn": {
+        "value": "#ffedd4",
+        "type": "color"
+      },
+      "bg-warn-50": {
+        "value": "#ffedd480",
+        "type": "color",
+        "description": "background warn color with 50% of opacity"
+      },
+      "bg-error": {
+        "value": "#ffe2e2",
+        "type": "color"
+      },
+      "bg-error-50": {
+        "value": "#ffe2e280",
+        "type": "color",
+        "description": "background error color with 50% of opacity"
+      },
+      "bg-attention": {
+        "value": "#ede9fe",
+        "type": "color"
+      },
+      "bg-toast": {
+        "value": "#ffffff80",
+        "type": "color"
+      }
+    },
+    "text": {
+      "heading": {
+        "value": "#020618",
+        "type": "color"
+      },
+      "body": {
+        "value": "#1d293d",
+        "type": "color"
+      },
+      "subtitle": {
+        "value": "#45556c",
+        "type": "color"
+      },
+      "subsubtitle": {
+        "value": "#62748e",
+        "type": "color"
+      },
+      "placeholder": {
+        "value": "#62748e",
+        "type": "color"
+      },
+      "disabled": {
+        "value": "#90a1b9",
+        "type": "color"
+      },
+      "on-primary": {
+        "value": "#ffffff",
+        "type": "color"
+      },
+      "inverse": {
+        "value": "#ffffff",
+        "type": "color",
+        "description": "Text on dark/inverse backgrounds (tooltips, dark topbar)"
+      },
+      "text-secondary": {
+        "value": "#314158",
+        "type": "color"
+      },
+      "text-success": {
+        "value": "#008236",
+        "type": "color"
+      },
+      "text-info": {
+        "value": "#0069a8",
+        "type": "color"
+      },
+      "text-warn": {
+        "value": "#ca3500",
+        "type": "color"
+      },
+      "text-error": {
+        "value": "#c10007",
+        "type": "color"
+      },
+      "text-attention": {
+        "value": "#7008e7",
+        "type": "color"
+      }
+    },
+    "icon": {
+      "default-soft": {
+        "value": "#62748e",
+        "type": "color"
+      },
+      "default": {
+        "value": "#1d293d",
+        "type": "color"
+      },
+      "disabled": {
+        "value": "#90a1b9",
+        "type": "color"
+      },
+      "on-primary": {
+        "value": "#ffffff",
+        "type": "color"
+      },
+      "icon-secondary": {
+        "value": "#314158",
+        "type": "color"
+      },
+      "icon-success": {
+        "value": "#008236",
+        "type": "color"
+      },
+      "icon-info": {
+        "value": "#0069a8",
+        "type": "color"
+      },
+      "icon-warn": {
+        "value": "#ca3500",
+        "type": "color"
+      },
+      "icon-error": {
+        "value": "#c10007",
+        "type": "color"
+      },
+      "icon-attention": {
+        "value": "#7008e7",
+        "type": "color"
+      }
+    },
+    "border": {
+      "border": {
+        "value": "#e5e7eb",
+        "type": "color"
+      },
+      "border-secondary": {
+        "value": "#cad5e2",
+        "type": "color"
+      },
+      "border-success": {
+        "value": "#7bf1a8",
+        "type": "color"
+      },
+      "border-info": {
+        "value": "#74d4ff",
+        "type": "color"
+      },
+      "border-warn": {
+        "value": "#fdba8c",
+        "type": "color"
+      },
+      "border-error": {
+        "value": "#ffa2a2",
+        "type": "color"
+      },
+      "border-attention": {
+        "value": "#c4b5fd",
+        "type": "color"
+      }
+    },
+    "component": {
+      "tab": {
+        "initial": {
+          "value": "#62748e",
+          "type": "color"
+        }
+      },
+      "topbar": {
+        "height": { "value": "64", "type": "dimension" }
+      },
+      "sidebar": {
+        "width-expanded":  { "value": "220", "type": "dimension" },
+        "width-collapsed": { "value": "64",  "type": "dimension" }
+      },
+      "toast": {
+        "width": { "value": "320", "type": "dimension" }
+      },
+      "avatar": {
+        "size-xs": { "value": "24", "type": "dimension" },
+        "size-sm": { "value": "32", "type": "dimension" },
+        "size-md": { "value": "40", "type": "dimension" },
+        "size-lg": { "value": "48", "type": "dimension" },
+        "size-xl": { "value": "64", "type": "dimension" }
+      },
+      "input": {
+        "height-sm": { "value": "32", "type": "dimension" },
+        "height-md": { "value": "40", "type": "dimension" },
+        "height-lg": { "value": "48", "type": "dimension" }
+      },
+      "button": {
+        "height-sm": { "value": "32", "type": "dimension" },
+        "height-md": { "value": "40", "type": "dimension" },
+        "height-lg": { "value": "48", "type": "dimension" },
+        "disabled-opacity": { "value": "0.5", "type": "number" }
+      }
+    },
+    "shadow": {
+      "xs": {
+        "value": "0 1px 2px rgba(0,0,0,0.05)",
+        "type": "boxShadow",
+        "description": "Subtle lift — cards, input fields"
+      },
+      "sm": {
+        "value": "0 1px 3px rgba(0,0,0,0.10), 0 1px 2px rgba(0,0,0,0.06)",
+        "type": "boxShadow",
+        "description": "Small lift — buttons, tags"
+      },
+      "md": {
+        "value": "0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06)",
+        "type": "boxShadow",
+        "description": "Medium lift — statistic cards hover"
+      },
+      "lg": {
+        "value": "0 10px 15px rgba(0,0,0,0.10), 0 4px 6px rgba(0,0,0,0.05)",
+        "type": "boxShadow",
+        "description": "Large lift — dropdowns, menus, tooltips"
+      },
+      "xl": {
+        "value": "0 20px 25px rgba(0,0,0,0.10), 0 10px 10px rgba(0,0,0,0.04)",
+        "type": "boxShadow",
+        "description": "Extra large — modals, drawers, toasts"
+      }
+    },
+    "zIndex": {
+      "base":     { "value": "0",   "type": "number" },
+      "raised":   { "value": "10",  "type": "number", "description": "Inline tooltips, form helpers" },
+      "dropdown": { "value": "50",  "type": "number", "description": "Menus, selects, sidebar tooltips" },
+      "sticky":   { "value": "100", "type": "number", "description": "Topbar, sticky headers" },
+      "overlay":  { "value": "200", "type": "number", "description": "Modal/drawer backdrop" },
+      "modal":    { "value": "300", "type": "number", "description": "Modal/drawer panel" },
+      "toast":    { "value": "400", "type": "number", "description": "Toast notifications — always on top" }
+    },
+    "opacity": {
+      "disabled": { "value": "0.5",  "type": "number" },
+      "overlay":  { "value": "0.6",  "type": "number", "description": "Modal/drawer backdrop" },
+      "subtle":   { "value": "0.8",  "type": "number", "description": "Hover state dimming" },
+      "ghost":    { "value": "0.05", "type": "number", "description": "Very faint tint backgrounds" }
+    },
+    "lineHeights": {
+      "0": { "value": "40", "type": "lineHeights", "description": "display" },
+      "1": { "value": "36", "type": "lineHeights", "description": "h1" },
+      "2": { "value": "32", "type": "lineHeights", "description": "h2" },
+      "3": { "value": "28", "type": "lineHeights", "description": "h3, body-lg" },
+      "6": { "value": "24", "type": "lineHeights", "description": "body" },
+      "8": { "value": "20", "type": "lineHeights", "description": "body-sm, button" },
+      "10": { "value": "16", "type": "lineHeights", "description": "caption, tag" }
+    },
+    "fontWeights": {
+      "montserrat-0": {
+        "value": "Bold",
+        "type": "fontWeights"
+      },
+      "montserrat-1": {
+        "value": "SemiBold",
+        "type": "fontWeights"
+      },
+      "montserrat-2": {
+        "value": "Regular",
+        "type": "fontWeights"
+      },
+      "montserrat-3": {
+        "value": "Medium",
+        "type": "fontWeights"
+      }
+    },
+    "fontSize": {
+      "0": {
+        "value": "12",
+        "type": "fontSizes"
+      },
+      "1": {
+        "value": "14",
+        "type": "fontSizes"
+      },
+      "2": {
+        "value": "16",
+        "type": "fontSizes"
+      },
+      "3": {
+        "value": "18",
+        "type": "fontSizes"
+      },
+      "4": {
+        "value": "20",
+        "type": "fontSizes"
+      },
+      "5": {
+        "value": "24",
+        "type": "fontSizes"
+      },
+      "6": {
+        "value": "30",
+        "type": "fontSizes"
+      },
+      "7": {
+        "value": "36",
+        "type": "fontSizes"
+      }
+    },
+    "letterSpacing": {
+      "0": {
+        "value": "0",
+        "type": "letterSpacing"
+      }
+    },
+    "paragraphSpacing": {
+      "0": {
+        "value": "0",
+        "type": "paragraphSpacing"
+      }
+    },
+    "text-display": {
+      "value": {
+        "fontFamily": "{font.family.sans-montserrat}",
+        "fontWeight": "{fontWeights.montserrat-0}",
+        "lineHeight": "{lineHeights.0}",
+        "fontSize": "{fontSize.7}",
+        "letterSpacing": "{letterSpacing.0}",
+        "paragraphSpacing": "{paragraphSpacing.0}",
+        "paragraphIndent": "{paragraphIndent.0}",
+        "textCase": "{textCase.none}",
+        "textDecoration": "{textDecoration.none}"
+      },
+      "type": "typography",
+      "description": "page title, hero section"
+    },
+    "text-h1": {
+      "value": {
+        "fontFamily": "{font.family.sans-montserrat}",
+        "fontWeight": "{fontWeights.montserrat-0}",
+        "lineHeight": "{lineHeights.1}",
+        "fontSize": "{fontSize.6}",
+        "letterSpacing": "{letterSpacing.0}",
+        "paragraphSpacing": "{paragraphSpacing.0}",
+        "paragraphIndent": "{paragraphIndent.0}",
+        "textCase": "{textCase.none}",
+        "textDecoration": "{textDecoration.none}"
+      },
+      "type": "typography",
+      "description": "section header / main card title"
+    },
+    "text-h2": {
+      "value": {
+        "fontFamily": "{font.family.sans-montserrat}",
+        "fontWeight": "{fontWeights.montserrat-1}",
+        "lineHeight": "{lineHeights.2}",
+        "fontSize": "{fontSize.5}",
+        "letterSpacing": "{letterSpacing.0}",
+        "paragraphSpacing": "{paragraphSpacing.0}",
+        "paragraphIndent": "{paragraphIndent.0}",
+        "textCase": "{textCase.none}",
+        "textDecoration": "{textDecoration.none}"
+      },
+      "type": "typography",
+      "description": "sub-section title / modal title"
+    },
+    "text-h3": {
+      "value": {
+        "fontFamily": "{font.family.sans-montserrat}",
+        "fontWeight": "{fontWeights.montserrat-1}",
+        "lineHeight": "{lineHeights.3}",
+        "fontSize": "{fontSize.4}",
+        "letterSpacing": "{letterSpacing.0}",
+        "paragraphSpacing": "{paragraphSpacing.0}",
+        "paragraphIndent": "{paragraphIndent.0}",
+        "textCase": "{textCase.none}",
+        "textDecoration": "{textDecoration.none}"
+      },
+      "type": "typography",
+      "description": "small section header / form title"
+    },
+    "text-body-lg": {
+      "value": {
+        "fontFamily": "{font.family.sans-montserrat}",
+        "fontWeight": "{fontWeights.montserrat-2}",
+        "lineHeight": "{lineHeights.3}",
+        "fontSize": "{fontSize.3}",
+        "letterSpacing": "{letterSpacing.0}",
+        "paragraphSpacing": "{paragraphSpacing.0}",
+        "paragraphIndent": "{paragraphIndent.0}",
+        "textCase": "{textCase.none}",
+        "textDecoration": "{textDecoration.none}"
+      },
+      "type": "typography",
+      "description": "main content / important text"
+    },
+    "text-body-lg-bold": {
+      "value": {
+        "fontFamily": "{font.family.sans-montserrat}",
+        "fontWeight": "{fontWeights.montserrat-1}",
+        "lineHeight": "{lineHeights.3}",
+        "fontSize": "{fontSize.3}",
+        "letterSpacing": "{letterSpacing.0}",
+        "paragraphSpacing": "{paragraphSpacing.0}",
+        "paragraphIndent": "{paragraphIndent.0}",
+        "textCase": "{textCase.none}",
+        "textDecoration": "{textDecoration.none}"
+      },
+      "type": "typography"
+    },
+    "text-body": {
+      "value": {
+        "fontFamily": "{font.family.sans-montserrat}",
+        "fontWeight": "{fontWeights.montserrat-2}",
+        "lineHeight": "{lineHeights.6}",
+        "fontSize": "{fontSize.2}",
+        "letterSpacing": "{letterSpacing.0}",
+        "paragraphSpacing": "{paragraphSpacing.0}",
+        "paragraphIndent": "{paragraphIndent.0}",
+        "textCase": "{textCase.none}",
+        "textDecoration": "{textDecoration.none}"
+      },
+      "type": "typography",
+      "description": "default body text, table"
+    },
+    "text-body-bold": {
+      "value": {
+        "fontFamily": "{font.family.sans-montserrat}",
+        "fontWeight": "{fontWeights.montserrat-1}",
+        "lineHeight": "{lineHeights.6}",
+        "fontSize": "{fontSize.2}",
+        "letterSpacing": "{letterSpacing.0}",
+        "paragraphSpacing": "{paragraphSpacing.0}",
+        "paragraphIndent": "{paragraphIndent.0}",
+        "textCase": "{textCase.none}",
+        "textDecoration": "{textDecoration.none}"
+      },
+      "type": "typography"
+    },
+    "text-body-sm": {
+      "value": {
+        "fontFamily": "{font.family.sans-montserrat}",
+        "fontWeight": "{fontWeights.montserrat-2}",
+        "lineHeight": "{lineHeights.8}",
+        "fontSize": "{fontSize.1}",
+        "letterSpacing": "{letterSpacing.0}",
+        "paragraphSpacing": "{paragraphSpacing.0}",
+        "paragraphIndent": "{paragraphIndent.0}",
+        "textCase": "{textCase.none}",
+        "textDecoration": "{textDecoration.none}"
+      },
+      "type": "typography",
+      "description": "secondary text / descriptions"
+    },
+    "text-body-sm-bold": {
+      "value": {
+        "fontFamily": "{font.family.sans-montserrat}",
+        "fontWeight": "{fontWeights.montserrat-1}",
+        "lineHeight": "{lineHeights.8}",
+        "fontSize": "{fontSize.1}",
+        "letterSpacing": "{letterSpacing.0}",
+        "paragraphSpacing": "{paragraphSpacing.0}",
+        "paragraphIndent": "{paragraphIndent.0}",
+        "textCase": "{textCase.none}",
+        "textDecoration": "{textDecoration.none}"
+      },
+      "type": "typography"
+    },
+    "text-caption": {
+      "value": {
+        "fontFamily": "{font.family.sans-montserrat}",
+        "fontWeight": "{fontWeights.montserrat-2}",
+        "lineHeight": "{lineHeights.10}",
+        "fontSize": "{fontSize.0}",
+        "letterSpacing": "{letterSpacing.0}",
+        "paragraphSpacing": "{paragraphSpacing.0}",
+        "paragraphIndent": "{paragraphIndent.0}",
+        "textCase": "{textCase.none}",
+        "textDecoration": "{textDecoration.none}"
+      },
+      "type": "typography",
+      "description": "notes, timestamps, labels"
+    },
+    "text-tag": {
+      "value": {
+        "fontFamily": "{font.family.sans-montserrat}",
+        "fontWeight": "{fontWeights.montserrat-1}",
+        "lineHeight": "{lineHeights.10}",
+        "fontSize": "{fontSize.0}",
+        "letterSpacing": "{letterSpacing.0}",
+        "paragraphSpacing": "{paragraphSpacing.0}",
+        "paragraphIndent": "{paragraphIndent.0}",
+        "textCase": "{textCase.none}",
+        "textDecoration": "{textDecoration.none}"
+      },
+      "type": "typography",
+      "description": "tag / status label"
+    },
+    "text-button": {
+      "value": {
+        "fontFamily": "{font.family.sans-montserrat}",
+        "fontWeight": "{fontWeights.montserrat-3}",
+        "lineHeight": "{lineHeights.8}",
+        "fontSize": "{fontSize.1}",
+        "letterSpacing": "{letterSpacing.0}",
+        "paragraphSpacing": "{paragraphSpacing.0}",
+        "paragraphIndent": "{paragraphIndent.0}",
+        "textCase": "{textCase.none}",
+        "textDecoration": "{textDecoration.none}"
+      },
+      "type": "typography",
+      "description": "for buttons or chips"
+    },
+    "textCase": {
+      "none": {
+        "value": "none",
+        "type": "textCase"
+      }
+    },
+    "textDecoration": {
+      "none": {
+        "value": "none",
+        "type": "textDecoration"
+      }
+    },
+    "paragraphIndent": {
+      "0": {
+        "value": "0px",
+        "type": "dimension"
+      }
+    }
+  }
+}