@swell/swell-ui 0.0.0-stage → 0.1.0

package/tokens/color.json

@@ -0,0 +1,115 @@
+{
+  "color": {
+    "$description": "The global palette. The group level is the primary palette; `secondary` is the quieter one: its background and its text.",
+    "$extensions": {
+      "is.swell.ui": {
+        "attributes": {
+          "variant": ["secondary"]
+        }
+      }
+    },
+    "background": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [1, 1, 1],
+        "hex": "#ffffff"
+      },
+      "$description": "Page background."
+    },
+    "foreground": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [0.0549, 0.0667, 0.0902],
+        "hex": "#0e1117"
+      },
+      "$description": "Text and icons on the page background."
+    },
+    "border": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [0.8941, 0.898, 0.898],
+        "hex": "#e4e5e5"
+      },
+      "$description": "Decorative borders and dividers."
+    },
+    "accent": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [0.2275, 0.4, 0.9608],
+        "hex": "#3a66f5"
+      },
+      "$description": "The brand color: filled buttons, links, checked controls, focus."
+    },
+    "danger": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [0.8431, 0.2157, 0.2392],
+        "hex": "#d7373d"
+      },
+      "$description": "Errors: invalid fields, error messages."
+    },
+    "success": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [0.0706, 0.5804, 0.3686],
+        "hex": "#12945e"
+      },
+      "$description": "Success: success messages and a successful button."
+    },
+    "warning": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [0.7255, 0.4392, 0.0392],
+        "hex": "#b9700a"
+      },
+      "$description": "Warnings: warning messages."
+    },
+    "secondary": {
+      "background": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [0.9608, 0.9608, 0.9647],
+          "hex": "#f5f5f6"
+        },
+        "$description": "Quiet areas: secondary buttons, status messages, filled fields."
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [0.4157, 0.4196, 0.4353],
+          "hex": "#6a6b6f"
+        },
+        "$description": "Quiet text: hints, captions, placeholders, secondary text."
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.border}",
+        "$description": "Borders of secondary buttons, badges and thumbnails."
+      },
+      "accent": {
+        "$type": "color",
+        "$value": "{color.secondary.foreground}",
+        "$description": "The quiet color where there is no fill: secondary text and links, and the text of outline and plain secondary buttons and badges."
+      },
+      "shadow": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [0.9608, 0.9608, 0.9647],
+          "hex": "#f5f5f6",
+          "alpha": 0.6
+        },
+        "$description": "Color of the shadow of filled secondary buttons."
+      }
+    }
+  }
+}

package/tokens/control.json

@@ -0,0 +1,115 @@
+{
+  "control": {
+    "$description": "The control scale: the height and text size of each of the five steps, shared by buttons, fields, selects, lookups, quantities, checkboxes, radio groups, status messages, plain links and skeletons. Every other measure of a sized component follows from these two. The group also holds the opacity of a disabled control.",
+    "$extensions": {
+      "is.swell.ui": {
+        "attributes": {
+          "size": ["xsmall", "small", "large", "xlarge"]
+        },
+        "states": ["disabled"]
+      }
+    },
+    "height": {
+      "$type": "dimension",
+      "$value": {
+        "value": 48,
+        "unit": "px"
+      },
+      "$description": "Height of medium controls."
+    },
+    "font": {
+      "size": {
+        "$type": "dimension",
+        "$value": "{font.size}",
+        "$description": "Font size of medium controls."
+      }
+    },
+    "xsmall": {
+      "height": {
+        "$type": "dimension",
+        "$value": {
+          "value": 32,
+          "unit": "px"
+        },
+        "$description": "Height of extra small controls, the smallest that holds a 16px line on a touch screen."
+      },
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": {
+            "value": 12,
+            "unit": "px"
+          },
+          "$description": "Font size of extra small controls."
+        }
+      }
+    },
+    "small": {
+      "height": {
+        "$type": "dimension",
+        "$value": {
+          "value": 40,
+          "unit": "px"
+        },
+        "$description": "Height of small controls."
+      },
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": {
+            "value": 13,
+            "unit": "px"
+          },
+          "$description": "Font size of small controls."
+        }
+      }
+    },
+    "large": {
+      "height": {
+        "$type": "dimension",
+        "$value": {
+          "value": 56,
+          "unit": "px"
+        },
+        "$description": "Height of large controls."
+      },
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": {
+            "value": 16,
+            "unit": "px"
+          },
+          "$description": "Font size of large controls."
+        }
+      }
+    },
+    "xlarge": {
+      "height": {
+        "$type": "dimension",
+        "$value": {
+          "value": 64,
+          "unit": "px"
+        },
+        "$description": "Height of extra large controls."
+      },
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": {
+            "value": 18,
+            "unit": "px"
+          },
+          "$description": "Font size of extra large controls."
+        }
+      }
+    },
+    "disabled": {
+      "opacity": {
+        "$type": "number",
+        "$value": 0.5,
+        "$description": "Opacity of a disabled control, the disabled options of a choice, a busy quantity and the step of a quantity at its limit."
+      }
+    }
+  }
+}

package/tokens/field.dark.json

@@ -0,0 +1,65 @@
+{
+  "field": {
+    "$description": "Dark theme values of field.",
+    "color": {
+      "border": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [0.4784, 0.4863, 0.5098],
+          "hex": "#7a7c82"
+        }
+      }
+    },
+    "hover": {
+      "color": {
+        "border": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.651, 0.6588, 0.6784],
+            "hex": "#a6a8ad"
+          }
+        }
+      }
+    },
+    "focus": {
+      "color": {
+        "ring": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.3569, 0.549, 1.0],
+            "hex": "#5b8cff",
+            "alpha": 0.16
+          }
+        }
+      }
+    },
+    "invalid": {
+      "color": {
+        "ring": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.949, 0.3333, 0.3529],
+            "hex": "#f2555a",
+            "alpha": 0.09
+          }
+        }
+      }
+    },
+    "label": {
+      "color": {
+        "foreground": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.7098, 0.7176, 0.7412],
+            "hex": "#b5b7bd"
+          }
+        }
+      }
+    }
+  }
+}

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."
+    }
+  }
+}