@swell/swell-ui 0.0.0-stage → 0.1.1

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

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