@polyxd/ds-civic 0.3.0

package/tokens/system.json

@@ -0,0 +1,313 @@
+{
+  "$description": "Civic primitives shared by both modes: type, spacing, radii, borders, motion. Original template by Polyxd; every value here is yours to change.",
+  "civic": {
+    "font": {
+      "$type": "fontFamily",
+      "display": {
+        "$value": "system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-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": 36,
+          "unit": "px"
+        }
+      },
+      "title-section": {
+        "$value": {
+          "value": 26,
+          "unit": "px"
+        }
+      },
+      "title-item": {
+        "$value": {
+          "value": 20,
+          "unit": "px"
+        }
+      },
+      "body-default": {
+        "$value": {
+          "value": 18,
+          "unit": "px"
+        }
+      },
+      "body-small": {
+        "$value": {
+          "value": 16,
+          "unit": "px"
+        }
+      },
+      "label-default": {
+        "$value": {
+          "value": 18,
+          "unit": "px"
+        }
+      },
+      "label-small": {
+        "$value": {
+          "value": 16,
+          "unit": "px"
+        }
+      },
+      "numeric-display": {
+        "$value": {
+          "value": 36,
+          "unit": "px"
+        }
+      }
+    },
+    "weight": {
+      "$type": "number",
+      "400": {
+        "$value": 400
+      },
+      "600": {
+        "$value": 600
+      },
+      "700": {
+        "$value": 700
+      }
+    },
+    "space": {
+      "$type": "dimension",
+      "inset": {
+        "compact": {
+          "$value": {
+            "value": 12,
+            "unit": "px"
+          }
+        },
+        "default": {
+          "$value": {
+            "value": 20,
+            "unit": "px"
+          }
+        },
+        "comfortable": {
+          "$value": {
+            "value": 32,
+            "unit": "px"
+          }
+        }
+      },
+      "stack": {
+        "tight": {
+          "$value": {
+            "value": 8,
+            "unit": "px"
+          }
+        },
+        "default": {
+          "$value": {
+            "value": 12,
+            "unit": "px"
+          }
+        },
+        "loose": {
+          "$value": {
+            "value": 20,
+            "unit": "px"
+          }
+        },
+        "section": {
+          "$value": {
+            "value": 48,
+            "unit": "px"
+          }
+        }
+      },
+      "inline": {
+        "tight": {
+          "$value": {
+            "value": 8,
+            "unit": "px"
+          }
+        },
+        "default": {
+          "$value": {
+            "value": 12,
+            "unit": "px"
+          }
+        },
+        "loose": {
+          "$value": {
+            "value": 20,
+            "unit": "px"
+          }
+        }
+      }
+    },
+    "size": {
+      "$type": "dimension",
+      "target": {
+        "$value": {
+          "value": 48,
+          "unit": "px"
+        }
+      },
+      "icon-small": {
+        "$value": {
+          "value": 18,
+          "unit": "px"
+        }
+      },
+      "icon-default": {
+        "$value": {
+          "value": 24,
+          "unit": "px"
+        }
+      }
+    },
+    "radius": {
+      "$type": "dimension",
+      "small": {
+        "$value": {
+          "value": 2,
+          "unit": "px"
+        }
+      },
+      "control": {
+        "$value": {
+          "value": 2,
+          "unit": "px"
+        }
+      },
+      "default": {
+        "$value": {
+          "value": 4,
+          "unit": "px"
+        }
+      },
+      "large": {
+        "$value": {
+          "value": 4,
+          "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": 3,
+          "unit": "px"
+        }
+      },
+      "offset": {
+        "$value": {
+          "value": 0,
+          "unit": "px"
+        }
+      }
+    },
+    "measure": {
+      "$value": 65,
+      "$type": "number"
+    },
+    "opacity": {
+      "$type": "number",
+      "hover": {
+        "$value": 0.08
+      },
+      "pressed": {
+        "$value": 0.16
+      },
+      "focus": {
+        "$value": 0.16
+      },
+      "disabled": {
+        "$value": 0.5
+      }
+    },
+    "duration": {
+      "$type": "duration",
+      "instant": {
+        "$value": {
+          "value": 0,
+          "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": "Civic, 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.",
+  "civic": {
+    "palette": {
+      "$type": "color",
+      "white": {
+        "$value": "#ffffff"
+      },
+      "grey-50": {
+        "$value": "#f0f0f0"
+      },
+      "black": {
+        "$value": "#111111"
+      },
+      "grey-700": {
+        "$value": "#454545"
+      },
+      "grey-500": {
+        "$value": "#4d4d4d"
+      },
+      "grey-300": {
+        "$value": "#8a8a8a"
+      },
+      "blue": {
+        "$value": "#0d4f9c"
+      },
+      "blue-deep": {
+        "$value": "#0b3a73"
+      },
+      "blue-wash": {
+        "$value": "#e6effa"
+      },
+      "red": {
+        "$value": "#b21f1f"
+      },
+      "red-deep": {
+        "$value": "#7d1414"
+      },
+      "red-wash": {
+        "$value": "#fbe3e3"
+      },
+      "green": {
+        "$value": "#1e7a30"
+      },
+      "green-deep": {
+        "$value": "#0f5a1f"
+      },
+      "green-wash": {
+        "$value": "#e3f3e3"
+      },
+      "gold": {
+        "$value": "#946c00"
+      },
+      "gold-deep": {
+        "$value": "#5c4300"
+      },
+      "gold-wash": {
+        "$value": "#fff2cc"
+      },
+      "purple": {
+        "$value": "#6b2f9e"
+      },
+      "teal": {
+        "$value": "#0b6e7a"
+      }
+    },
+    "sys": {
+      "$type": "color",
+      "surface-default": {
+        "$value": "{civic.palette.white}",
+        "$description": "Main page background"
+      },
+      "surface-subtle": {
+        "$value": "{civic.palette.grey-50}",
+        "$description": "Grouping background: table headers, wells"
+      },
+      "surface-raised": {
+        "$value": "{civic.palette.white}",
+        "$description": "Cards and sheets"
+      },
+      "surface-overlay": {
+        "$value": "{civic.palette.white}",
+        "$description": "Dialogs and popovers"
+      },
+      "surface-inverse": {
+        "$value": "{civic.palette.black}",
+        "$description": "Snackbars and tooltips"
+      },
+      "scrim": {
+        "$value": "rgba(0, 0, 0, 0.6)"
+      },
+      "text-default": {
+        "$value": "{civic.palette.black}"
+      },
+      "text-muted": {
+        "$value": "{civic.palette.grey-700}"
+      },
+      "text-inverse": {
+        "$value": "{civic.palette.white}"
+      },
+      "text-link": {
+        "$value": "{civic.palette.blue}",
+        "$description": "Inline links"
+      },
+      "border-default": {
+        "$value": "{civic.palette.grey-300}"
+      },
+      "border-strong": {
+        "$value": "{civic.palette.grey-500}",
+        "$description": "Input outlines (3:1 on the page)"
+      },
+      "border-focus": {
+        "$value": "{civic.palette.black}",
+        "$description": "Keyboard focus ring (3:1 on the page)"
+      },
+      "action-primary-background": {
+        "$value": "{civic.palette.blue}"
+      },
+      "action-primary-foreground": {
+        "$value": "{civic.palette.white}"
+      },
+      "action-secondary-background": {
+        "$value": "{civic.palette.white}"
+      },
+      "action-secondary-foreground": {
+        "$value": "{civic.palette.black}"
+      },
+      "action-secondary-border": {
+        "$value": "{civic.palette.black}"
+      },
+      "action-danger-background": {
+        "$value": "{civic.palette.red}"
+      },
+      "action-danger-foreground": {
+        "$value": "{civic.palette.white}"
+      },
+      "selection-background": {
+        "$value": "{civic.palette.blue-wash}"
+      },
+      "selection-foreground": {
+        "$value": "{civic.palette.blue-deep}"
+      },
+      "status-info-background": {
+        "$value": "{civic.palette.blue-wash}"
+      },
+      "status-info-foreground": {
+        "$value": "{civic.palette.blue-deep}"
+      },
+      "status-info-emphasis": {
+        "$value": "{civic.palette.blue}"
+      },
+      "status-success-background": {
+        "$value": "{civic.palette.green-wash}"
+      },
+      "status-success-foreground": {
+        "$value": "{civic.palette.green-deep}"
+      },
+      "status-success-emphasis": {
+        "$value": "{civic.palette.green}"
+      },
+      "status-warning-background": {
+        "$value": "{civic.palette.gold-wash}"
+      },
+      "status-warning-foreground": {
+        "$value": "{civic.palette.gold-deep}"
+      },
+      "status-warning-emphasis": {
+        "$value": "{civic.palette.gold}"
+      },
+      "status-danger-background": {
+        "$value": "{civic.palette.red-wash}"
+      },
+      "status-danger-foreground": {
+        "$value": "{civic.palette.red-deep}"
+      },
+      "status-danger-emphasis": {
+        "$value": "{civic.palette.red}"
+      },
+      "data-1": {
+        "$value": "{civic.palette.blue}"
+      },
+      "data-2": {
+        "$value": "{civic.palette.green}"
+      },
+      "data-3": {
+        "$value": "{civic.palette.red}"
+      },
+      "data-4": {
+        "$value": "{civic.palette.gold}"
+      },
+      "data-5": {
+        "$value": "{civic.palette.purple}"
+      },
+      "data-6": {
+        "$value": "{civic.palette.teal}"
+      },
+      "data-positive": {
+        "$value": "{civic.palette.green}"
+      },
+      "data-negative": {
+        "$value": "{civic.palette.red}"
+      },
+      "data-neutral": {
+        "$value": "{civic.palette.grey-500}"
+      }
+    },
+    "shadow": {
+      "$type": "shadow",
+      "raised": {
+        "$value": [
+          {
+            "offsetX": {
+              "value": 0,
+              "unit": "px"
+            },
+            "offsetY": {
+              "value": 0,
+              "unit": "px"
+            },
+            "blur": {
+              "value": 0,
+              "unit": "px"
+            },
+            "spread": {
+              "value": 0,
+              "unit": "px"
+            },
+            "color": "rgba(0, 0, 0, 0)"
+          }
+        ]
+      },
+      "overlay": {
+        "$value": [
+          {
+            "offsetX": {
+              "value": 0,
+              "unit": "px"
+            },
+            "offsetY": {
+              "value": 8,
+              "unit": "px"
+            },
+            "blur": {
+              "value": 24,
+              "unit": "px"
+            },
+            "spread": {
+              "value": 0,
+              "unit": "px"
+            },
+            "color": "rgba(0, 0, 0, 0.25)"
+          }
+        ]
+      }
+    }
+  }
+}