@polyxd/ds-sketch 0.3.0

package/tokens/system.json

@@ -0,0 +1,310 @@
+{
+  "$description": "Sketch primitives shared by both modes: type, spacing, radii, borders, motion. Original template by Polyxd; every value here is yours to change.",
+  "sketch": {
+    "font": {
+      "$type": "fontFamily",
+      "display": {
+        "$value": "Caveat, 'Segoe Print', 'Bradley Hand', cursive",
+        "$type": "fontFamily"
+      },
+      "label": {
+        "$value": "'Patrick Hand', 'Segoe Print', 'Comic Sans MS', cursive",
+        "$type": "fontFamily"
+      },
+      "body": {
+        "$value": "Nunito, 'Segoe UI', 'Trebuchet MS', Verdana, sans-serif",
+        "$type": "fontFamily"
+      },
+      "mono": {
+        "$value": "ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace",
+        "$type": "fontFamily"
+      }
+    },
+    "text": {
+      "$type": "dimension",
+      "title-page": {
+        "$value": {
+          "value": 38,
+          "unit": "px"
+        }
+      },
+      "title-section": {
+        "$value": {
+          "value": 28,
+          "unit": "px"
+        }
+      },
+      "title-item": {
+        "$value": {
+          "value": 22,
+          "unit": "px"
+        }
+      },
+      "body-default": {
+        "$value": {
+          "value": 16,
+          "unit": "px"
+        }
+      },
+      "body-small": {
+        "$value": {
+          "value": 14,
+          "unit": "px"
+        }
+      },
+      "label-default": {
+        "$value": {
+          "value": 17,
+          "unit": "px"
+        }
+      },
+      "label-small": {
+        "$value": {
+          "value": 15,
+          "unit": "px"
+        }
+      },
+      "numeric-display": {
+        "$value": {
+          "value": 34,
+          "unit": "px"
+        }
+      }
+    },
+    "weight": {
+      "$type": "number",
+      "400": {
+        "$value": 400
+      },
+      "700": {
+        "$value": 700
+      }
+    },
+    "space": {
+      "$type": "dimension",
+      "inset": {
+        "compact": {
+          "$value": {
+            "value": 8,
+            "unit": "px"
+          }
+        },
+        "default": {
+          "$value": {
+            "value": 14,
+            "unit": "px"
+          }
+        },
+        "comfortable": {
+          "$value": {
+            "value": 22,
+            "unit": "px"
+          }
+        }
+      },
+      "stack": {
+        "tight": {
+          "$value": {
+            "value": 4,
+            "unit": "px"
+          }
+        },
+        "default": {
+          "$value": {
+            "value": 8,
+            "unit": "px"
+          }
+        },
+        "loose": {
+          "$value": {
+            "value": 14,
+            "unit": "px"
+          }
+        },
+        "section": {
+          "$value": {
+            "value": 32,
+            "unit": "px"
+          }
+        }
+      },
+      "inline": {
+        "tight": {
+          "$value": {
+            "value": 4,
+            "unit": "px"
+          }
+        },
+        "default": {
+          "$value": {
+            "value": 8,
+            "unit": "px"
+          }
+        },
+        "loose": {
+          "$value": {
+            "value": 14,
+            "unit": "px"
+          }
+        }
+      }
+    },
+    "size": {
+      "$type": "dimension",
+      "target": {
+        "$value": {
+          "value": 44,
+          "unit": "px"
+        }
+      },
+      "icon-small": {
+        "$value": {
+          "value": 16,
+          "unit": "px"
+        }
+      },
+      "icon-default": {
+        "$value": {
+          "value": 20,
+          "unit": "px"
+        }
+      }
+    },
+    "radius": {
+      "$type": "dimension",
+      "small": {
+        "$value": {
+          "value": 6,
+          "unit": "px"
+        }
+      },
+      "control": {
+        "$value": {
+          "value": 12,
+          "unit": "px"
+        }
+      },
+      "default": {
+        "$value": {
+          "value": 10,
+          "unit": "px"
+        }
+      },
+      "large": {
+        "$value": {
+          "value": 18,
+          "unit": "px"
+        }
+      },
+      "full": {
+        "$value": {
+          "value": 999,
+          "unit": "px"
+        }
+      }
+    },
+    "border": {
+      "$type": "dimension",
+      "default": {
+        "$value": {
+          "value": 2,
+          "unit": "px"
+        }
+      },
+      "strong": {
+        "$value": {
+          "value": 3,
+          "unit": "px"
+        }
+      }
+    },
+    "focus": {
+      "$type": "dimension",
+      "width": {
+        "$value": {
+          "value": 3,
+          "unit": "px"
+        }
+      },
+      "offset": {
+        "$value": {
+          "value": 2,
+          "unit": "px"
+        }
+      }
+    },
+    "measure": {
+      "$value": 62,
+      "$type": "number"
+    },
+    "opacity": {
+      "$type": "number",
+      "hover": {
+        "$value": 0.06
+      },
+      "pressed": {
+        "$value": 0.12
+      },
+      "focus": {
+        "$value": 0.12
+      },
+      "disabled": {
+        "$value": 0.4
+      }
+    },
+    "duration": {
+      "$type": "duration",
+      "instant": {
+        "$value": {
+          "value": 0,
+          "unit": "ms"
+        }
+      },
+      "short": {
+        "$value": {
+          "value": 120,
+          "unit": "ms"
+        }
+      },
+      "medium": {
+        "$value": {
+          "value": 180,
+          "unit": "ms"
+        }
+      },
+      "long": {
+        "$value": {
+          "value": 260,
+          "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,275 @@
+{
+  "$description": "Sketch, 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.",
+  "sketch": {
+    "palette": {
+      "$type": "color",
+      "paper": {
+        "$value": "#fbf7ee"
+      },
+      "paper-deep": {
+        "$value": "#f2ebdc"
+      },
+      "paper-bright": {
+        "$value": "#fffdf7"
+      },
+      "ink": {
+        "$value": "#2b2a26"
+      },
+      "ink-soft": {
+        "$value": "#5c584f"
+      },
+      "pencil": {
+        "$value": "#a8a39a"
+      },
+      "pencil-dark": {
+        "$value": "#6b675f"
+      },
+      "pen-blue": {
+        "$value": "#1f5fa8"
+      },
+      "pen-blue-deep": {
+        "$value": "#1a4a80"
+      },
+      "pen-blue-wash": {
+        "$value": "#e4eef9"
+      },
+      "highlighter": {
+        "$value": "#fbe8a6"
+      },
+      "highlighter-deep": {
+        "$value": "#5a4300"
+      },
+      "red-pen": {
+        "$value": "#b3261e"
+      },
+      "red-pen-deep": {
+        "$value": "#8c1d18"
+      },
+      "red-wash": {
+        "$value": "#fae4e1"
+      },
+      "green-pen": {
+        "$value": "#2e7d32"
+      },
+      "green-pen-deep": {
+        "$value": "#1e5e2a"
+      },
+      "green-wash": {
+        "$value": "#e3f1e1"
+      },
+      "orange-pen": {
+        "$value": "#b26a00"
+      },
+      "orange-pen-deep": {
+        "$value": "#7a4a00"
+      },
+      "orange-wash": {
+        "$value": "#fdf0d5"
+      },
+      "purple-pen": {
+        "$value": "#7c3aed"
+      },
+      "brown-pen": {
+        "$value": "#b45309"
+      },
+      "teal-pen": {
+        "$value": "#0e7490"
+      },
+      "rust-pen": {
+        "$value": "#c2410c"
+      },
+      "white": {
+        "$value": "#ffffff"
+      }
+    },
+    "sys": {
+      "$type": "color",
+      "surface-default": {
+        "$value": "{sketch.palette.paper}",
+        "$description": "Main page background"
+      },
+      "surface-subtle": {
+        "$value": "{sketch.palette.paper-deep}",
+        "$description": "Grouping background: table headers, wells"
+      },
+      "surface-raised": {
+        "$value": "{sketch.palette.paper-bright}",
+        "$description": "Cards and sheets"
+      },
+      "surface-overlay": {
+        "$value": "{sketch.palette.paper-bright}",
+        "$description": "Dialogs and popovers"
+      },
+      "surface-inverse": {
+        "$value": "{sketch.palette.ink}",
+        "$description": "Snackbars and tooltips"
+      },
+      "scrim": {
+        "$value": "rgba(43, 42, 38, 0.5)"
+      },
+      "text-default": {
+        "$value": "{sketch.palette.ink}"
+      },
+      "text-muted": {
+        "$value": "{sketch.palette.ink-soft}"
+      },
+      "text-inverse": {
+        "$value": "{sketch.palette.paper}"
+      },
+      "text-link": {
+        "$value": "{sketch.palette.pen-blue}",
+        "$description": "Inline links"
+      },
+      "border-default": {
+        "$value": "{sketch.palette.pencil}"
+      },
+      "border-strong": {
+        "$value": "{sketch.palette.pencil-dark}",
+        "$description": "Input outlines (3:1 on the page)"
+      },
+      "border-focus": {
+        "$value": "{sketch.palette.pen-blue}",
+        "$description": "Keyboard focus ring (3:1 on the page)"
+      },
+      "action-primary-background": {
+        "$value": "{sketch.palette.ink}"
+      },
+      "action-primary-foreground": {
+        "$value": "{sketch.palette.paper}"
+      },
+      "action-secondary-background": {
+        "$value": "{sketch.palette.paper-bright}"
+      },
+      "action-secondary-foreground": {
+        "$value": "{sketch.palette.ink}"
+      },
+      "action-secondary-border": {
+        "$value": "{sketch.palette.ink}"
+      },
+      "action-danger-background": {
+        "$value": "{sketch.palette.red-pen}"
+      },
+      "action-danger-foreground": {
+        "$value": "{sketch.palette.white}"
+      },
+      "selection-background": {
+        "$value": "{sketch.palette.highlighter}"
+      },
+      "selection-foreground": {
+        "$value": "{sketch.palette.ink}"
+      },
+      "status-info-background": {
+        "$value": "{sketch.palette.pen-blue-wash}"
+      },
+      "status-info-foreground": {
+        "$value": "{sketch.palette.pen-blue-deep}"
+      },
+      "status-info-emphasis": {
+        "$value": "{sketch.palette.pen-blue}"
+      },
+      "status-success-background": {
+        "$value": "{sketch.palette.green-wash}"
+      },
+      "status-success-foreground": {
+        "$value": "{sketch.palette.green-pen-deep}"
+      },
+      "status-success-emphasis": {
+        "$value": "{sketch.palette.green-pen}"
+      },
+      "status-warning-background": {
+        "$value": "{sketch.palette.orange-wash}"
+      },
+      "status-warning-foreground": {
+        "$value": "{sketch.palette.orange-pen-deep}"
+      },
+      "status-warning-emphasis": {
+        "$value": "{sketch.palette.orange-pen}"
+      },
+      "status-danger-background": {
+        "$value": "{sketch.palette.red-wash}"
+      },
+      "status-danger-foreground": {
+        "$value": "{sketch.palette.red-pen-deep}"
+      },
+      "status-danger-emphasis": {
+        "$value": "{sketch.palette.red-pen}"
+      },
+      "data-1": {
+        "$value": "{sketch.palette.pen-blue}"
+      },
+      "data-2": {
+        "$value": "{sketch.palette.rust-pen}"
+      },
+      "data-3": {
+        "$value": "{sketch.palette.green-pen}"
+      },
+      "data-4": {
+        "$value": "{sketch.palette.purple-pen}"
+      },
+      "data-5": {
+        "$value": "{sketch.palette.brown-pen}"
+      },
+      "data-6": {
+        "$value": "{sketch.palette.teal-pen}"
+      },
+      "data-positive": {
+        "$value": "{sketch.palette.green-pen}"
+      },
+      "data-negative": {
+        "$value": "{sketch.palette.red-pen}"
+      },
+      "data-neutral": {
+        "$value": "{sketch.palette.pencil-dark}"
+      }
+    },
+    "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": 0,
+              "unit": "px"
+            },
+            "blur": {
+              "value": 0,
+              "unit": "px"
+            },
+            "spread": {
+              "value": 0,
+              "unit": "px"
+            },
+            "color": "rgba(0, 0, 0, 0)"
+          }
+        ]
+      }
+    }
+  }
+}