@polyxd/ds-finance 0.3.0

package/tokens/system.json

@@ -0,0 +1,310 @@
+{
+  "$description": "Finance primitives shared by both modes: type, spacing, radii, borders, motion. Original template by Polyxd; every value here is yours to change.",
+  "finance": {
+    "font": {
+      "$type": "fontFamily",
+      "display": {
+        "$value": "Georgia, 'Times New Roman', Times, serif",
+        "$type": "fontFamily"
+      },
+      "body": {
+        "$value": "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+        "$type": "fontFamily"
+      },
+      "label": {
+        "$value": "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+        "$type": "fontFamily"
+      },
+      "mono": {
+        "$value": "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
+        "$type": "fontFamily"
+      }
+    },
+    "text": {
+      "$type": "dimension",
+      "title-page": {
+        "$value": {
+          "value": 28,
+          "unit": "px"
+        }
+      },
+      "title-section": {
+        "$value": {
+          "value": 21,
+          "unit": "px"
+        }
+      },
+      "title-item": {
+        "$value": {
+          "value": 16,
+          "unit": "px"
+        }
+      },
+      "body-default": {
+        "$value": {
+          "value": 16,
+          "unit": "px"
+        }
+      },
+      "body-small": {
+        "$value": {
+          "value": 13,
+          "unit": "px"
+        }
+      },
+      "label-default": {
+        "$value": {
+          "value": 13,
+          "unit": "px"
+        }
+      },
+      "label-small": {
+        "$value": {
+          "value": 11,
+          "unit": "px"
+        }
+      },
+      "numeric-display": {
+        "$value": {
+          "value": 30,
+          "unit": "px"
+        }
+      }
+    },
+    "weight": {
+      "$type": "number",
+      "400": {
+        "$value": 400
+      },
+      "600": {
+        "$value": 600
+      }
+    },
+    "space": {
+      "$type": "dimension",
+      "inset": {
+        "compact": {
+          "$value": {
+            "value": 6,
+            "unit": "px"
+          }
+        },
+        "default": {
+          "$value": {
+            "value": 12,
+            "unit": "px"
+          }
+        },
+        "comfortable": {
+          "$value": {
+            "value": 20,
+            "unit": "px"
+          }
+        }
+      },
+      "stack": {
+        "tight": {
+          "$value": {
+            "value": 4,
+            "unit": "px"
+          }
+        },
+        "default": {
+          "$value": {
+            "value": 8,
+            "unit": "px"
+          }
+        },
+        "loose": {
+          "$value": {
+            "value": 12,
+            "unit": "px"
+          }
+        },
+        "section": {
+          "$value": {
+            "value": 24,
+            "unit": "px"
+          }
+        }
+      },
+      "inline": {
+        "tight": {
+          "$value": {
+            "value": 4,
+            "unit": "px"
+          }
+        },
+        "default": {
+          "$value": {
+            "value": 8,
+            "unit": "px"
+          }
+        },
+        "loose": {
+          "$value": {
+            "value": 12,
+            "unit": "px"
+          }
+        }
+      }
+    },
+    "size": {
+      "$type": "dimension",
+      "target": {
+        "$value": {
+          "value": 36,
+          "unit": "px"
+        }
+      },
+      "icon-small": {
+        "$value": {
+          "value": 14,
+          "unit": "px"
+        }
+      },
+      "icon-default": {
+        "$value": {
+          "value": 18,
+          "unit": "px"
+        }
+      }
+    },
+    "radius": {
+      "$type": "dimension",
+      "small": {
+        "$value": {
+          "value": 2,
+          "unit": "px"
+        }
+      },
+      "control": {
+        "$value": {
+          "value": 3,
+          "unit": "px"
+        }
+      },
+      "default": {
+        "$value": {
+          "value": 4,
+          "unit": "px"
+        }
+      },
+      "large": {
+        "$value": {
+          "value": 6,
+          "unit": "px"
+        }
+      },
+      "full": {
+        "$value": {
+          "value": 999,
+          "unit": "px"
+        }
+      }
+    },
+    "border": {
+      "$type": "dimension",
+      "default": {
+        "$value": {
+          "value": 1,
+          "unit": "px"
+        }
+      },
+      "strong": {
+        "$value": {
+          "value": 2,
+          "unit": "px"
+        }
+      }
+    },
+    "focus": {
+      "$type": "dimension",
+      "width": {
+        "$value": {
+          "value": 2,
+          "unit": "px"
+        }
+      },
+      "offset": {
+        "$value": {
+          "value": 2,
+          "unit": "px"
+        }
+      }
+    },
+    "measure": {
+      "$value": 65,
+      "$type": "number"
+    },
+    "opacity": {
+      "$type": "number",
+      "hover": {
+        "$value": 0.05
+      },
+      "pressed": {
+        "$value": 0.1
+      },
+      "focus": {
+        "$value": 0.1
+      },
+      "disabled": {
+        "$value": 0.45
+      }
+    },
+    "duration": {
+      "$type": "duration",
+      "instant": {
+        "$value": {
+          "value": 50,
+          "unit": "ms"
+        }
+      },
+      "short": {
+        "$value": {
+          "value": 100,
+          "unit": "ms"
+        }
+      },
+      "medium": {
+        "$value": {
+          "value": 150,
+          "unit": "ms"
+        }
+      },
+      "long": {
+        "$value": {
+          "value": 200,
+          "unit": "ms"
+        }
+      }
+    },
+    "ease": {
+      "$type": "cubicBezier",
+      "standard": {
+        "$value": [
+          0.4,
+          0,
+          0.2,
+          1
+        ]
+      },
+      "enter": {
+        "$value": [
+          0,
+          0,
+          0.2,
+          1
+        ]
+      },
+      "exit": {
+        "$value": [
+          0.4,
+          0,
+          1,
+          1
+        ]
+      }
+    }
+  }
+}

package/tokens/system.light.json

@@ -0,0 +1,257 @@
+{
+  "$description": "Finance, light mode: the palette (named colours) and the roles that pick from it. Change a palette entry to recolour every role that uses it; point a role at a different entry to change one thing.",
+  "finance": {
+    "palette": {
+      "$type": "color",
+      "white": {
+        "$value": "#ffffff"
+      },
+      "cool-50": {
+        "$value": "#f3f5f8"
+      },
+      "navy": {
+        "$value": "#0e2038"
+      },
+      "navy-text": {
+        "$value": "#101828"
+      },
+      "slate": {
+        "$value": "#4b5565"
+      },
+      "line": {
+        "$value": "#d5dae2"
+      },
+      "line-strong": {
+        "$value": "#6b7484"
+      },
+      "royal": {
+        "$value": "#153d6f"
+      },
+      "royal-mid": {
+        "$value": "#2a5ea8"
+      },
+      "royal-wash": {
+        "$value": "#e8eef7"
+      },
+      "gold": {
+        "$value": "#a67c0c"
+      },
+      "gold-deep": {
+        "$value": "#5c4200"
+      },
+      "gold-wash": {
+        "$value": "#fbf1d6"
+      },
+      "red": {
+        "$value": "#a61b1b"
+      },
+      "red-deep": {
+        "$value": "#7a1414"
+      },
+      "red-wash": {
+        "$value": "#f8e3e3"
+      },
+      "green": {
+        "$value": "#1b7a44"
+      },
+      "green-deep": {
+        "$value": "#0f5132"
+      },
+      "green-wash": {
+        "$value": "#e4f2e8"
+      },
+      "plum": {
+        "$value": "#5b3d7a"
+      }
+    },
+    "sys": {
+      "$type": "color",
+      "surface-default": {
+        "$value": "{finance.palette.white}",
+        "$description": "Main page background"
+      },
+      "surface-subtle": {
+        "$value": "{finance.palette.cool-50}",
+        "$description": "Grouping background: table headers, wells"
+      },
+      "surface-raised": {
+        "$value": "{finance.palette.white}",
+        "$description": "Cards and sheets"
+      },
+      "surface-overlay": {
+        "$value": "{finance.palette.white}",
+        "$description": "Dialogs and popovers"
+      },
+      "surface-inverse": {
+        "$value": "{finance.palette.navy}",
+        "$description": "Snackbars and tooltips"
+      },
+      "scrim": {
+        "$value": "rgba(14, 32, 56, 0.5)"
+      },
+      "text-default": {
+        "$value": "{finance.palette.navy-text}"
+      },
+      "text-muted": {
+        "$value": "{finance.palette.slate}"
+      },
+      "text-inverse": {
+        "$value": "{finance.palette.white}"
+      },
+      "text-link": {
+        "$value": "{finance.palette.royal}",
+        "$description": "Inline links"
+      },
+      "border-default": {
+        "$value": "{finance.palette.line}"
+      },
+      "border-strong": {
+        "$value": "{finance.palette.line-strong}",
+        "$description": "Input outlines (3:1 on the page)"
+      },
+      "border-focus": {
+        "$value": "{finance.palette.gold}",
+        "$description": "Keyboard focus ring (3:1 on the page)"
+      },
+      "action-primary-background": {
+        "$value": "{finance.palette.navy}"
+      },
+      "action-primary-foreground": {
+        "$value": "{finance.palette.white}"
+      },
+      "action-secondary-background": {
+        "$value": "{finance.palette.white}"
+      },
+      "action-secondary-foreground": {
+        "$value": "{finance.palette.navy}"
+      },
+      "action-secondary-border": {
+        "$value": "{finance.palette.navy}"
+      },
+      "action-danger-background": {
+        "$value": "{finance.palette.red}"
+      },
+      "action-danger-foreground": {
+        "$value": "{finance.palette.white}"
+      },
+      "selection-background": {
+        "$value": "{finance.palette.gold-wash}"
+      },
+      "selection-foreground": {
+        "$value": "{finance.palette.gold-deep}"
+      },
+      "status-info-background": {
+        "$value": "{finance.palette.royal-wash}"
+      },
+      "status-info-foreground": {
+        "$value": "{finance.palette.royal}"
+      },
+      "status-info-emphasis": {
+        "$value": "{finance.palette.royal-mid}"
+      },
+      "status-success-background": {
+        "$value": "{finance.palette.green-wash}"
+      },
+      "status-success-foreground": {
+        "$value": "{finance.palette.green-deep}"
+      },
+      "status-success-emphasis": {
+        "$value": "{finance.palette.green}"
+      },
+      "status-warning-background": {
+        "$value": "{finance.palette.gold-wash}"
+      },
+      "status-warning-foreground": {
+        "$value": "{finance.palette.gold-deep}"
+      },
+      "status-warning-emphasis": {
+        "$value": "{finance.palette.gold}"
+      },
+      "status-danger-background": {
+        "$value": "{finance.palette.red-wash}"
+      },
+      "status-danger-foreground": {
+        "$value": "{finance.palette.red-deep}"
+      },
+      "status-danger-emphasis": {
+        "$value": "{finance.palette.red}"
+      },
+      "data-1": {
+        "$value": "{finance.palette.navy}"
+      },
+      "data-2": {
+        "$value": "{finance.palette.gold}"
+      },
+      "data-3": {
+        "$value": "{finance.palette.royal-mid}"
+      },
+      "data-4": {
+        "$value": "{finance.palette.green}"
+      },
+      "data-5": {
+        "$value": "{finance.palette.red}"
+      },
+      "data-6": {
+        "$value": "{finance.palette.plum}"
+      },
+      "data-positive": {
+        "$value": "{finance.palette.green}"
+      },
+      "data-negative": {
+        "$value": "{finance.palette.red}"
+      },
+      "data-neutral": {
+        "$value": "{finance.palette.line-strong}"
+      }
+    },
+    "shadow": {
+      "$type": "shadow",
+      "raised": {
+        "$value": [
+          {
+            "offsetX": {
+              "value": 0,
+              "unit": "px"
+            },
+            "offsetY": {
+              "value": 1,
+              "unit": "px"
+            },
+            "blur": {
+              "value": 2,
+              "unit": "px"
+            },
+            "spread": {
+              "value": 0,
+              "unit": "px"
+            },
+            "color": "rgba(16, 24, 40, 0.08)"
+          }
+        ]
+      },
+      "overlay": {
+        "$value": [
+          {
+            "offsetX": {
+              "value": 0,
+              "unit": "px"
+            },
+            "offsetY": {
+              "value": 12,
+              "unit": "px"
+            },
+            "blur": {
+              "value": 32,
+              "unit": "px"
+            },
+            "spread": {
+              "value": 0,
+              "unit": "px"
+            },
+            "color": "rgba(16, 24, 40, 0.24)"
+          }
+        ]
+      }
+    }
+  }
+}