@swell/swell-ui 0.0.0-stage → 0.1.0

package/src/components/core/status/tokens.json

@@ -0,0 +1,135 @@
+{
+  "status": {
+    "$description": "Status messages. The type picks the color of the icon and border, and tints the background of a filled message; the appearance lays it out: filled adds the background, outline keeps the border, plain keeps the icon and text in the font of a field error, and quiet draws a note in the quiet palette.",
+    "$extensions": {
+      "is.swell.ui": {
+        "attributes": {
+          "type": ["danger", "success", "warning"]
+        },
+        "settings": {
+          "appearance": {
+            "description": "How status messages are drawn when the element has no appearance attribute.",
+            "values": ["filled", "outline", "plain"],
+            "default": "filled"
+          }
+        }
+      }
+    },
+    "border": {
+      "radius": {
+        "$type": "dimension",
+        "$value": "{border.radius}",
+        "$description": "Corner radius of status messages."
+      }
+    },
+    "color": {
+      "background": {
+        "$type": "color",
+        "$value": "{color.secondary.background}",
+        "$description": "Background of filled messages; a type sets its own."
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": "{color.foreground}",
+        "$description": "Text of status messages."
+      },
+      "accent": {
+        "$type": "color",
+        "$value": "{status.color.foreground}",
+        "$description": "Icon of a message without a type, such as the host's start icon; a type sets its own, which also draws the border of an outline message and the text of a plain danger one."
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.border}",
+        "$description": "Border of messages; a type sets its own."
+      }
+    },
+    "danger": {
+      "color": {
+        "accent": {
+          "$type": "color",
+          "$value": "{color.danger}",
+          "$description": "Icon of danger messages, the border of an outline one and the text of a plain one."
+        },
+        "background": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.8431, 0.2157, 0.2392],
+            "hex": "#d7373d",
+            "alpha": 0.09
+          },
+          "$description": "Background of filled danger messages."
+        },
+        "border": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.8431, 0.2157, 0.2392],
+            "hex": "#d7373d",
+            "alpha": 0.35
+          },
+          "$description": "Border of filled danger messages."
+        }
+      }
+    },
+    "success": {
+      "color": {
+        "accent": {
+          "$type": "color",
+          "$value": "{color.success}",
+          "$description": "Icon of success messages, the border of an outline one."
+        },
+        "background": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.0706, 0.5804, 0.3686],
+            "hex": "#12945e",
+            "alpha": 0.09
+          },
+          "$description": "Background of filled success messages."
+        },
+        "border": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.0706, 0.5804, 0.3686],
+            "hex": "#12945e",
+            "alpha": 0.35
+          },
+          "$description": "Border of filled success messages."
+        }
+      }
+    },
+    "warning": {
+      "color": {
+        "accent": {
+          "$type": "color",
+          "$value": "{color.warning}",
+          "$description": "Icon of warning messages, the border of an outline one."
+        },
+        "background": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.7255, 0.4392, 0.0392],
+            "hex": "#b9700a",
+            "alpha": 0.09
+          },
+          "$description": "Background of filled warning messages."
+        },
+        "border": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.7255, 0.4392, 0.0392],
+            "hex": "#b9700a",
+            "alpha": 0.35
+          },
+          "$description": "Border of filled warning messages."
+        }
+      }
+    }
+  }
+}

package/src/components/core/tabs/tokens.json

@@ -0,0 +1,80 @@
+{
+  "tabs": {
+    "$description": "Tabs: a line under the chosen tab, a track with a marker under it, or numbered steps. The colors come from the palette; a segmented track takes color.secondary.background and its marker the background below, with a ring in field.color.border.",
+    "$extensions": {
+      "is.swell.ui": {
+        "settings": {
+          "appearance": {
+            "description": "How tabs are drawn when the element has no appearance attribute; steps come from the attribute only.",
+            "values": ["underline", "segmented"],
+            "default": "underline"
+          }
+        }
+      }
+    },
+    "border": {
+      "radius": {
+        "$type": "dimension",
+        "$value": "{border.radius}",
+        "$description": "Corner radius of the marker of segmented tabs; the track takes 4px more."
+      }
+    },
+    "indicator": {
+      "width": {
+        "$type": "dimension",
+        "$value": {
+          "value": 2,
+          "unit": "px"
+        },
+        "$description": "Width of the line that marks the chosen tab, and of the lines between steps."
+      }
+    },
+    "color": {
+      "background": {
+        "$type": "color",
+        "$value": "{color.background}",
+        "$description": "Background of the marker of segmented tabs."
+      },
+      "shadow": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [0, 0, 0],
+          "alpha": 0.1,
+          "hex": "#000000"
+        },
+        "$description": "Color of the shadow of the marker of segmented tabs."
+      }
+    },
+    "font": {
+      "weight": {
+        "$type": "fontWeight",
+        "$value": "{font.strong.weight}",
+        "$description": "Font weight of tab labels."
+      }
+    },
+    "shadow": {
+      "$type": "shadow",
+      "$value": {
+        "color": "{tabs.color.shadow}",
+        "offsetX": {
+          "value": 0,
+          "unit": "px"
+        },
+        "offsetY": {
+          "value": 1,
+          "unit": "px"
+        },
+        "blur": {
+          "value": 3,
+          "unit": "px"
+        },
+        "spread": {
+          "value": 0,
+          "unit": "px"
+        }
+      },
+      "$description": "Shadow of the marker under the chosen segmented tab, in tabs.color.shadow."
+    }
+  }
+}

package/src/components/core/text/tokens.json

@@ -0,0 +1,222 @@
+{
+  "text": {
+    "$description": "Text: a title, headings, subheadings, strong text, body text, captions, footnotes and eyebrows. `secondary` is quiet text.",
+    "$extensions": {
+      "is.swell.ui": {
+        "attributes": {
+          "type": [
+            "title",
+            "heading",
+            "subheading",
+            "strong",
+            "caption",
+            "footnote",
+            "eyebrow"
+          ]
+        },
+        "variants": true
+      }
+    },
+    "font": {
+      "family": {
+        "$type": "fontFamily",
+        "$value": "{font.family}",
+        "$description": "Font family of text."
+      },
+      "size": {
+        "$type": "dimension",
+        "$value": "{font.size}",
+        "$description": "Font size of body text."
+      },
+      "weight": {
+        "$type": "fontWeight",
+        "$value": "{font.weight}",
+        "$description": "Font weight of body text."
+      },
+      "tracking": {
+        "$type": "number",
+        "$value": "{font.tracking}",
+        "$description": "Letter spacing of body text, in em.",
+        "$extensions": {
+          "is.swell.ui": {
+            "unit": "em"
+          }
+        }
+      },
+      "leading": {
+        "$type": "number",
+        "$value": "{font.leading}",
+        "$description": "Line height of body text, as a multiple of the font size."
+      }
+    },
+    "color": {
+      "accent": {
+        "$type": "color",
+        "$value": "{color.foreground}",
+        "$description": "Color of text: text has no fill, so a variant colors it with its accent."
+      }
+    },
+    "title": {
+      "font": {
+        "family": {
+          "$type": "fontFamily",
+          "$value": "{font.heading.family}",
+          "$description": "Font family of titles."
+        },
+        "size": {
+          "$type": "dimension",
+          "$value": {
+            "value": 32,
+            "unit": "px"
+          },
+          "$description": "Font size of titles."
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.heading.weight}",
+          "$description": "Font weight of titles."
+        },
+        "tracking": {
+          "$type": "number",
+          "$value": -0.025,
+          "$description": "Letter spacing of titles, in em.",
+          "$extensions": {
+            "is.swell.ui": {
+              "unit": "em"
+            }
+          }
+        },
+        "leading": {
+          "$type": "number",
+          "$value": 1.1,
+          "$description": "Line height of titles."
+        }
+      }
+    },
+    "heading": {
+      "font": {
+        "family": {
+          "$type": "fontFamily",
+          "$value": "{font.heading.family}",
+          "$description": "Font family of headings."
+        },
+        "size": {
+          "$type": "dimension",
+          "$value": {
+            "value": 20,
+            "unit": "px"
+          },
+          "$description": "Font size of headings."
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.heading.weight}",
+          "$description": "Font weight of headings."
+        },
+        "tracking": {
+          "$type": "number",
+          "$value": "{font.heading.tracking}",
+          "$description": "Letter spacing of headings, in em.",
+          "$extensions": {
+            "is.swell.ui": {
+              "unit": "em"
+            }
+          }
+        },
+        "leading": {
+          "$type": "number",
+          "$value": 1.4,
+          "$description": "Line height of headings."
+        }
+      }
+    },
+    "subheading": {
+      "font": {
+        "family": {
+          "$type": "fontFamily",
+          "$value": "{font.heading.family}",
+          "$description": "Font family of subheadings."
+        },
+        "size": {
+          "$type": "dimension",
+          "$value": {
+            "value": 16,
+            "unit": "px"
+          },
+          "$description": "Font size of subheadings."
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.heading.weight}",
+          "$description": "Font weight of subheadings."
+        },
+        "tracking": {
+          "$type": "number",
+          "$value": -0.01,
+          "$description": "Letter spacing of subheadings, in em.",
+          "$extensions": {
+            "is.swell.ui": {
+              "unit": "em"
+            }
+          }
+        },
+        "leading": {
+          "$type": "number",
+          "$value": "{font.leading}",
+          "$description": "Line height of subheadings."
+        }
+      }
+    },
+    "strong": {
+      "font": {
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.strong.weight}",
+          "$description": "Font weight of strong text, such as the title of a group of fields."
+        }
+      }
+    },
+    "caption": {
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.caption.size}",
+          "$description": "Font size of captions."
+        }
+      }
+    },
+    "footnote": {
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.footnote.size}",
+          "$description": "Font size of footnotes: legal text, footers and notes."
+        }
+      }
+    },
+    "eyebrow": {
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{font.footnote.size}",
+          "$description": "Font size of eyebrows, the short uppercase lines above content."
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.bold.weight}",
+          "$description": "Font weight of eyebrows."
+        },
+        "tracking": {
+          "$type": "number",
+          "$value": 0.08,
+          "$description": "Letter spacing of eyebrows, in em.",
+          "$extensions": {
+            "is.swell.ui": {
+              "unit": "em"
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/components/core/thumbnail/tokens.json

@@ -0,0 +1,46 @@
+{
+  "thumbnail": {
+    "$description": "Thumbnails: a picture, an icon or initials in a small box, such as the photo of a cart line or an avatar. Primary fills the box with the accent; secondary is quiet, with a border.",
+    "$extensions": {
+      "is.swell.ui": {
+        "variants": true
+      }
+    },
+    "border": {
+      "radius": {
+        "$type": "dimension",
+        "$value": "{border.radius}",
+        "$description": "Corner radius of thumbnails that aren't circles."
+      }
+    },
+    "color": {
+      "background": {
+        "$type": "color",
+        "$value": "{color.accent}",
+        "$description": "Fill of primary thumbnails, such as an avatar's initials."
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": "{color.background}",
+        "$description": "Initials and icons of primary thumbnails."
+      },
+      "border": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [0, 0, 0],
+          "alpha": 0,
+          "hex": "#000000"
+        },
+        "$description": "Border of primary thumbnails; none by default, also over a photo."
+      }
+    },
+    "font": {
+      "weight": {
+        "$type": "fontWeight",
+        "$value": 650,
+        "$description": "Font weight of the initials in a thumbnail."
+      }
+    }
+  }
+}

package/tokens/border.json

@@ -0,0 +1,38 @@
+{
+  "border": {
+    "$description": "Borders of every component.",
+    "$extensions": {
+      "is.swell.ui": {
+        "attributes": {
+          "type": ["strong"]
+        }
+      }
+    },
+    "radius": {
+      "$type": "dimension",
+      "$value": {
+        "value": 8,
+        "unit": "px"
+      },
+      "$description": "Base corner radius."
+    },
+    "width": {
+      "$type": "dimension",
+      "$value": {
+        "value": 1,
+        "unit": "px"
+      },
+      "$description": "Width of a border or a line: the frames of fields, checkboxes, overlays, cards, chips, badges, thumbnails, status messages, quantities and button options, buttons, dividers, the lines between the options of a select, above a lookup's action and under tabs."
+    },
+    "strong": {
+      "width": {
+        "$type": "dimension",
+        "$value": {
+          "value": 1.5,
+          "unit": "px"
+        },
+        "$description": "Width of a border that marks a control: outline buttons, the frames of outline radio options, radio circles, the circles of steps and skeleton cards."
+      }
+    }
+  }
+}

package/tokens/color.dark.json

@@ -0,0 +1,88 @@
+{
+  "color": {
+    "$description": "Dark theme values of color.",
+    "background": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [0.0784, 0.0902, 0.1137],
+        "hex": "#14171d"
+      }
+    },
+    "foreground": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [0.9098, 0.9176, 0.9373],
+        "hex": "#e8eaef"
+      }
+    },
+    "border": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [0.1686, 0.1804, 0.2039],
+        "hex": "#2b2e34"
+      }
+    },
+    "accent": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [0.3569, 0.549, 1],
+        "hex": "#5b8cff"
+      }
+    },
+    "danger": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [0.949, 0.3333, 0.3529],
+        "hex": "#f2555a"
+      }
+    },
+    "success": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [0.2431, 0.8118, 0.5569],
+        "hex": "#3ecf8e"
+      }
+    },
+    "warning": {
+      "$type": "color",
+      "$value": {
+        "colorSpace": "srgb",
+        "components": [0.9412, 0.6667, 0.2353],
+        "hex": "#f0aa3c"
+      }
+    },
+    "secondary": {
+      "background": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [0.1098, 0.1216, 0.1451],
+          "hex": "#1c1f25"
+        }
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [0.5922, 0.6039, 0.6235],
+          "hex": "#979a9f"
+        }
+      },
+      "shadow": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [0.1098, 0.1216, 0.1451],
+          "hex": "#1c1f25",
+          "alpha": 0.6
+        }
+      }
+    }
+  }
+}