@swell/swell-ui 0.0.0-stage → 0.1.1

package/tokens/field.json

@@ -0,0 +1,158 @@
+{
+  "field": {
+    "$description": "The look of text fields: input, textarea, select and lookup. Checkboxes and radios take its border, and a radio group takes its label.",
+    "$extensions": {
+      "is.swell.ui": {
+        "settings": {
+          "appearance": {
+            "description": "How text fields are drawn when the element has no appearance attribute: outline (border on all sides), filled (fill and a bottom border), underline (bottom border).",
+            "values": ["outline", "filled", "underline"],
+            "default": "outline"
+          }
+        },
+        "states": ["hover", "focus", "invalid"]
+      }
+    },
+    "color": {
+      "background": {
+        "$type": "color",
+        "$value": "{color.secondary.background}",
+        "$description": "Fill of filled fields."
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": "{color.foreground}",
+        "$description": "Text of fields."
+      },
+      "border": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [0.5451, 0.5529, 0.5647],
+          "hex": "#8b8d90"
+        },
+        "$description": "Border of fields, checkboxes and radio circles, at 3:1 against the background."
+      }
+    },
+    "hover": {
+      "color": {
+        "border": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.349, 0.3569, 0.3725],
+            "hex": "#595b5f"
+          },
+          "$description": "Border of fields, checkboxes and radio circles under the pointer."
+        }
+      }
+    },
+    "focus": {
+      "color": {
+        "ring": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.2275, 0.4, 0.9608],
+            "hex": "#3a66f5",
+            "alpha": 0.16
+          },
+          "$description": "Soft ring around a focused outline field, outside its border in focus.color."
+        }
+      }
+    },
+    "invalid": {
+      "color": {
+        "ring": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.8431, 0.2157, 0.2392],
+            "hex": "#d7373d",
+            "alpha": 0.09
+          },
+          "$description": "Soft ring around an invalid outline field, outside its border in color.danger."
+        }
+      }
+    },
+    "label": {
+      "$description": "Labels above fields and radio groups. Their size follows the text of the field's size, one step smaller and at least 12px.",
+      "$extensions": {
+        "is.swell.ui": {
+          "settings": {
+            "position": {
+              "description": "Where the label of a text field sits: above it, or floating inside it.",
+              "values": ["above", "floating"],
+              "default": "floating"
+            }
+          }
+        }
+      },
+      "font": {
+        "family": {
+          "$type": "fontFamily",
+          "$value": "{font.family}",
+          "$description": "Font family of field labels."
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.strong.weight}",
+          "$description": "Font weight of labels above fields; a floating label takes the base font weight at rest and font.medium.weight raised."
+        },
+        "tracking": {
+          "$type": "number",
+          "$value": "{font.tracking}",
+          "$description": "Letter spacing of field labels, in em.",
+          "$extensions": {
+            "is.swell.ui": {
+              "unit": "em"
+            }
+          }
+        }
+      },
+      "color": {
+        "foreground": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.2824, 0.2902, 0.3098],
+            "hex": "#484a4f"
+          },
+          "$description": "Color of labels above fields; a floating label takes color.secondary.foreground."
+        }
+      }
+    },
+    "ring": {
+      "width": {
+        "$type": "dimension",
+        "$value": {
+          "value": 3,
+          "unit": "px"
+        },
+        "$description": "Width of the ring around a focused or invalid outline field, and of the ring around the current step."
+      }
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": {
+        "value": 6,
+        "unit": "px"
+      },
+      "$description": "Space between the label, the field and the hint or error of a field, a checkbox and a radio group."
+    },
+    "outline": {
+      "color": {
+        "background": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0, 0, 0],
+            "alpha": 0,
+            "hex": "#000000"
+          },
+          "$description": "Fill of outline fields, such as a raised surface on a dark page or a field in an area of its own; transparent by default."
+        }
+      }
+    }
+  }
+}

package/tokens/focus.json

@@ -0,0 +1,26 @@
+{
+  "focus": {
+    "$description": "The focus outline, the same on every interactive component.",
+    "color": {
+      "$type": "color",
+      "$value": "{color.accent}",
+      "$description": "Color of the focus outline."
+    },
+    "width": {
+      "$type": "dimension",
+      "$value": {
+        "value": 2,
+        "unit": "px"
+      },
+      "$description": "Width of the focus outline."
+    },
+    "offset": {
+      "$type": "dimension",
+      "$value": {
+        "value": 2,
+        "unit": "px"
+      },
+      "$description": "Gap between a component and its focus outline."
+    }
+  }
+}

package/tokens/font.json

@@ -0,0 +1,117 @@
+{
+  "font": {
+    "$description": "What every text shares, and the two small sizes that captions, footnotes, badges and chips share.",
+    "$extensions": {
+      "is.swell.ui": {
+        "attributes": {
+          "type": ["caption", "footnote", "heading", "medium", "strong", "bold"]
+        }
+      }
+    },
+    "family": {
+      "$type": "fontFamily",
+      "$value": [
+        "-apple-system",
+        "BlinkMacSystemFont",
+        "Inter",
+        "Segoe UI",
+        "Roboto",
+        "Helvetica",
+        "Arial",
+        "sans-serif"
+      ],
+      "$description": "Font family."
+    },
+    "size": {
+      "$type": "dimension",
+      "$value": {
+        "value": 14,
+        "unit": "px"
+      },
+      "$description": "Base font size."
+    },
+    "weight": {
+      "$type": "fontWeight",
+      "$value": 400,
+      "$description": "Base font weight."
+    },
+    "tracking": {
+      "$type": "number",
+      "$value": 0,
+      "$description": "Base letter spacing, in em.",
+      "$extensions": {
+        "is.swell.ui": {
+          "unit": "em"
+        }
+      }
+    },
+    "leading": {
+      "$type": "number",
+      "$value": 1.5,
+      "$description": "Base line height, as a multiple of the font size."
+    },
+    "caption": {
+      "size": {
+        "$type": "dimension",
+        "$value": {
+          "value": 13,
+          "unit": "px"
+        },
+        "$description": "Small font size: captions, divider labels and medium chips."
+      }
+    },
+    "footnote": {
+      "size": {
+        "$type": "dimension",
+        "$value": {
+          "value": 12,
+          "unit": "px"
+        },
+        "$description": "Smallest font size: footnotes, eyebrows and medium badges."
+      }
+    },
+    "heading": {
+      "family": {
+        "$type": "fontFamily",
+        "$value": "{font.family}",
+        "$description": "Font family of titles, headings, subheadings and the labels of vertical steps."
+      },
+      "weight": {
+        "$type": "fontWeight",
+        "$value": 650,
+        "$description": "Font weight of titles, headings, subheadings and the labels of vertical steps."
+      },
+      "tracking": {
+        "$type": "number",
+        "$value": -0.015,
+        "$description": "Letter spacing of headings and the labels of vertical steps, in em.",
+        "$extensions": {
+          "is.swell.ui": {
+            "unit": "em"
+          }
+        }
+      }
+    },
+    "medium": {
+      "weight": {
+        "$type": "fontWeight",
+        "$value": 500,
+        "$description": "A medium weight: a raised field label and the label of a button option."
+      }
+    },
+    "strong": {
+      "weight": {
+        "$type": "fontWeight",
+        "$value": 600,
+        "$description": "A strong weight: field labels, errors, plain status messages and links, tabs, the labels of outline and segmented options, badges and strong text."
+      }
+    },
+    "bold": {
+      "weight": {
+        "$type": "fontWeight",
+        "$value": 700,
+        "$description": "A bold weight: the count of a quantity, the numbers of steps, the chosen button option, chips, small badges and eyebrows."
+      }
+    }
+  }
+}

package/tokens/motion.json

@@ -0,0 +1,49 @@
+{
+  "motion": {
+    "$description": "Durations and easing of every transition. With reduced motion in the system settings, components change state without movement.",
+    "duration": {
+      "fast": {
+        "$type": "duration",
+        "$value": {
+          "value": 200,
+          "unit": "ms"
+        },
+        "$description": "Color changes on hover and focus."
+      },
+      "base": {
+        "$type": "duration",
+        "$value": {
+          "value": 250,
+          "unit": "ms"
+        },
+        "$description": "Presses, small moves and pops: a check, a rising label, a list or an error appearing."
+      },
+      "slow": {
+        "$type": "duration",
+        "$value": {
+          "value": 450,
+          "unit": "ms"
+        },
+        "$description": "Large moves: a sliding marker, expanding content, a message appearing, a shake, a chip popping in."
+      },
+      "loop": {
+        "$type": "duration",
+        "$value": {
+          "value": 1350,
+          "unit": "ms"
+        },
+        "$description": "Period of a continuous motion: the shimmer of a skeleton; the spinner of a loading button turns in two thirds of it."
+      }
+    },
+    "easing": {
+      "$type": "cubicBezier",
+      "$value": [0.2, 0.8, 0.2, 1],
+      "$description": "Easing of every transition that doesn't overshoot."
+    },
+    "spring": {
+      "$type": "cubicBezier",
+      "$value": [0.34, 1.56, 0.64, 1],
+      "$description": "Easing of pops that overshoot: checks and chips."
+    }
+  }
+}

package/tokens/overlay.json

@@ -0,0 +1,81 @@
+{
+  "overlay": {
+    "$description": "Surfaces that float above the page: the lists of a select and a lookup, and the panel of a popover.",
+    "border": {
+      "radius": {
+        "$type": "dimension",
+        "$value": "{border.radius}",
+        "$description": "Corner radius of a floating surface."
+      }
+    },
+    "color": {
+      "background": {
+        "$type": "color",
+        "$value": "{color.background}",
+        "$description": "Background of a floating surface."
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.border}",
+        "$description": "Border of a floating surface, and the dividers between its rows."
+      },
+      "shadow": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [0, 0, 0],
+          "hex": "#000000",
+          "alpha": 0.35
+        },
+        "$description": "Color of the shadow of surfaces that float above the page."
+      }
+    },
+    "shadow": {
+      "$type": "shadow",
+      "$value": {
+        "color": "{overlay.color.shadow}",
+        "offsetX": {
+          "value": 0,
+          "unit": "px"
+        },
+        "offsetY": {
+          "value": 20,
+          "unit": "px"
+        },
+        "blur": {
+          "value": 40,
+          "unit": "px"
+        },
+        "spread": {
+          "value": -18,
+          "unit": "px"
+        }
+      },
+      "$description": "Shadow of the lists of selects and lookups and the panels of popovers, in overlay.color.shadow."
+    },
+    "padding": {
+      "$type": "dimension",
+      "$value": {
+        "value": 16,
+        "unit": "px"
+      },
+      "$description": "Padding of the panel of a popover."
+    },
+    "offset": {
+      "$type": "dimension",
+      "$value": {
+        "value": 12,
+        "unit": "px"
+      },
+      "$description": "Space between a field or a trigger and the list or panel it opens."
+    },
+    "height": {
+      "$type": "dimension",
+      "$value": {
+        "value": 320,
+        "unit": "px"
+      },
+      "$description": "The tallest a list or a panel grows before it scrolls."
+    }
+  }
+}