@swell/swell-ui 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,232 @@
+{
+  "button": {
+    "$description": "Buttons. The appearance lays the palette out: filled uses background, border and foreground; outline uses border and accent; plain uses accent.",
+    "$extensions": {
+      "is.swell.ui": {
+        "attributes": {
+          "size": ["xsmall", "small", "large", "xlarge"]
+        },
+        "settings": {
+          "appearance": {
+            "description": "How primary buttons are drawn when the element has no appearance attribute.",
+            "values": ["filled", "outline", "plain"],
+            "default": "filled"
+          }
+        },
+        "variants": true,
+        "states": ["hover"]
+      }
+    },
+    "height": {
+      "$type": "dimension",
+      "$value": "{control.height}",
+      "$description": "Height of medium buttons."
+    },
+    "font": {
+      "size": {
+        "$type": "dimension",
+        "$value": "{control.font.size}",
+        "$description": "Font size of medium buttons."
+      },
+      "tracking": {
+        "$type": "number",
+        "$value": "{font.tracking}",
+        "$description": "Letter spacing of buttons, in em.",
+        "$extensions": {
+          "is.swell.ui": {
+            "unit": "em"
+          }
+        }
+      },
+      "weight": {
+        "$type": "fontWeight",
+        "$value": 650,
+        "$description": "Font weight of button labels."
+      }
+    },
+    "xsmall": {
+      "height": {
+        "$type": "dimension",
+        "$value": "{control.xsmall.height}",
+        "$description": "Height of extra small buttons."
+      },
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{control.xsmall.font.size}",
+          "$description": "Font size of extra small buttons."
+        }
+      }
+    },
+    "small": {
+      "height": {
+        "$type": "dimension",
+        "$value": "{control.small.height}",
+        "$description": "Height of small buttons."
+      },
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{control.small.font.size}",
+          "$description": "Font size of small buttons."
+        }
+      }
+    },
+    "large": {
+      "height": {
+        "$type": "dimension",
+        "$value": "{control.large.height}",
+        "$description": "Height of large buttons."
+      },
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{control.large.font.size}",
+          "$description": "Font size of large buttons."
+        },
+        "tracking": {
+          "$type": "number",
+          "$value": -0.01,
+          "$description": "Letter spacing of large buttons, in em.",
+          "$extensions": {
+            "is.swell.ui": {
+              "unit": "em"
+            }
+          }
+        }
+      }
+    },
+    "xlarge": {
+      "height": {
+        "$type": "dimension",
+        "$value": "{control.xlarge.height}",
+        "$description": "Height of extra large buttons."
+      },
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": "{control.xlarge.font.size}",
+          "$description": "Font size of extra large buttons."
+        },
+        "tracking": {
+          "$type": "number",
+          "$value": -0.01,
+          "$description": "Letter spacing of extra large buttons, in em.",
+          "$extensions": {
+            "is.swell.ui": {
+              "unit": "em"
+            }
+          }
+        }
+      }
+    },
+    "border": {
+      "radius": {
+        "$type": "dimension",
+        "$value": "{border.radius}",
+        "$description": "Corner radius of buttons."
+      }
+    },
+    "color": {
+      "accent": {
+        "$type": "color",
+        "$value": "{color.accent}",
+        "$description": "Text and border of outline and plain primary buttons."
+      },
+      "background": {
+        "$type": "color",
+        "$value": "{button.color.accent}",
+        "$description": "Fill of filled primary buttons."
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": "{color.background}",
+        "$description": "Text of filled primary buttons."
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{button.color.accent}",
+        "$description": "Border of filled and outline primary buttons."
+      },
+      "shadow": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [0.2275, 0.4, 0.9608],
+          "hex": "#3a66f5",
+          "alpha": 0.6
+        },
+        "$description": "Color of the shadow of filled buttons."
+      }
+    },
+    "secondary": {
+      "$extensions": {
+        "is.swell.ui": {
+          "settings": {
+            "appearance": {
+              "description": "How secondary buttons are drawn when the element has no appearance attribute.",
+              "values": ["filled", "outline", "plain"],
+              "default": "outline"
+            }
+          }
+        }
+      }
+    },
+    "shadow": {
+      "$type": "shadow",
+      "$value": {
+        "color": "{button.color.shadow}",
+        "offsetX": {
+          "value": 0,
+          "unit": "px"
+        },
+        "offsetY": {
+          "value": 12,
+          "unit": "px"
+        },
+        "blur": {
+          "value": 24,
+          "unit": "px"
+        },
+        "spread": {
+          "value": -16,
+          "unit": "px"
+        }
+      },
+      "$description": "Shadow of a filled button, in button.color.shadow; a successful button casts it in color.success."
+    },
+    "hover": {
+      "shadow": {
+        "$type": "shadow",
+        "$value": {
+          "color": "{button.color.shadow}",
+          "offsetX": {
+            "value": 0,
+            "unit": "px"
+          },
+          "offsetY": {
+            "value": 16,
+            "unit": "px"
+          },
+          "blur": {
+            "value": 30,
+            "unit": "px"
+          },
+          "spread": {
+            "value": -16,
+            "unit": "px"
+          }
+        },
+        "$description": "Shadow of a filled button under the pointer, in button.color.shadow."
+      },
+      "offset": {
+        "$type": "dimension",
+        "$value": {
+          "value": -1,
+          "unit": "px"
+        },
+        "$description": "How far a button rises under the pointer; 0 keeps it in place."
+      }
+    }
+  }
+}

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

@@ -0,0 +1,35 @@
+{
+  "card": {
+    "$description": "Cards: boxes that group content. Outline takes the background and a border; filled takes the quiet background without a border.",
+    "$extensions": {
+      "is.swell.ui": {
+        "settings": {
+          "appearance": {
+            "description": "How cards are drawn when the element has no appearance attribute.",
+            "values": ["outline", "filled"],
+            "default": "outline"
+          }
+        }
+      }
+    },
+    "border": {
+      "radius": {
+        "$type": "dimension",
+        "$value": "{border.radius}",
+        "$description": "Corner radius of cards."
+      }
+    },
+    "color": {
+      "background": {
+        "$type": "color",
+        "$value": "{color.background}",
+        "$description": "Background of outline cards."
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.border}",
+        "$description": "Border of outline cards."
+      }
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+{
+  "checkbox": {
+    "$description": "Checkboxes. Their colors come from field and color.",
+    "border": {
+      "radius": {
+        "$type": "dimension",
+        "$value": {
+          "value": 3,
+          "unit": "px"
+        },
+        "$description": "Corner radius of checkboxes."
+      }
+    }
+  }
+}

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

@@ -0,0 +1,144 @@
+{
+  "chip": {
+    "$description": "Chips: a short value the shopper can remove, such as an applied discount code. A chip draws its background, border and text, and its remove button in the accent.",
+    "$extensions": {
+      "is.swell.ui": {
+        "attributes": {
+          "size": ["xsmall", "small", "large", "xlarge"]
+        }
+      }
+    },
+    "height": {
+      "$type": "dimension",
+      "$value": {
+        "value": 32,
+        "unit": "px"
+      },
+      "$description": "Height of medium chips."
+    },
+    "font": {
+      "size": {
+        "$type": "dimension",
+        "$value": "{font.caption.size}",
+        "$description": "Font size of medium chips."
+      },
+      "weight": {
+        "$type": "fontWeight",
+        "$value": "{font.bold.weight}",
+        "$description": "Font weight of chips."
+      },
+      "tracking": {
+        "$type": "number",
+        "$value": 0.03,
+        "$description": "Letter spacing of chips, in em.",
+        "$extensions": {
+          "is.swell.ui": {
+            "unit": "em"
+          }
+        }
+      }
+    },
+    "xsmall": {
+      "height": {
+        "$type": "dimension",
+        "$value": {
+          "value": 24,
+          "unit": "px"
+        },
+        "$description": "Height of extra small chips."
+      },
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": {
+            "value": 11,
+            "unit": "px"
+          },
+          "$description": "Font size of extra small chips."
+        }
+      }
+    },
+    "small": {
+      "height": {
+        "$type": "dimension",
+        "$value": {
+          "value": 28,
+          "unit": "px"
+        },
+        "$description": "Height of small chips."
+      },
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": {
+            "value": 12,
+            "unit": "px"
+          },
+          "$description": "Font size of small chips."
+        }
+      }
+    },
+    "large": {
+      "height": {
+        "$type": "dimension",
+        "$value": {
+          "value": 36,
+          "unit": "px"
+        },
+        "$description": "Height of large chips."
+      },
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": {
+            "value": 14,
+            "unit": "px"
+          },
+          "$description": "Font size of large chips."
+        }
+      }
+    },
+    "xlarge": {
+      "height": {
+        "$type": "dimension",
+        "$value": {
+          "value": 40,
+          "unit": "px"
+        },
+        "$description": "Height of extra large chips."
+      },
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": {
+            "value": 16,
+            "unit": "px"
+          },
+          "$description": "Font size of extra large chips."
+        }
+      }
+    },
+    "color": {
+      "background": {
+        "$type": "color",
+        "$value": "{color.background}",
+        "$description": "Fill of chips."
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": "{color.foreground}",
+        "$description": "Text of chips."
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.border}",
+        "$description": "Border of chips."
+      },
+      "accent": {
+        "$type": "color",
+        "$value": "{color.secondary.foreground}",
+        "$description": "The remove button of chips."
+      }
+    }
+  }
+}

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

@@ -0,0 +1,24 @@
+{
+  "link": {
+    "$description": "Links: underlined in text, and plain ones on their own.",
+    "$extensions": {
+      "is.swell.ui": {
+        "variants": true
+      }
+    },
+    "font": {
+      "weight": {
+        "$type": "fontWeight",
+        "$value": "{font.strong.weight}",
+        "$description": "Font weight of plain links."
+      }
+    },
+    "color": {
+      "accent": {
+        "$type": "color",
+        "$value": "{color.accent}",
+        "$description": "Color of links."
+      }
+    }
+  }
+}

package/src/components/core/radio/tokens.dark.json

@@ -0,0 +1,17 @@
+{
+  "radio": {
+    "$description": "Dark theme values of radio.",
+    "checked": {
+      "color": {
+        "background": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.098, 0.1216, 0.1765],
+            "hex": "#191f2d"
+          }
+        }
+      }
+    }
+  }
+}

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

@@ -0,0 +1,114 @@
+{
+  "radio": {
+    "$description": "Radio groups and their options. The appearance lays the options out: plain draws the circle and the label; outline puts each option in a frame with the background, border and radius below; segmented, set with the attribute only, puts the options on a track and marks the chosen one with a marker in that background, rounded by border.radius; button, set with the attribute only, draws each option as a button in that background and a 1px border, rounded by border.radius.",
+    "$extensions": {
+      "is.swell.ui": {
+        "settings": {
+          "appearance": {
+            "description": "How the options of a radio group are drawn when the group has no appearance attribute: plain (the circle and the label) or outline (each option in a frame). Segmented and button are set on a group with its attribute only.",
+            "values": ["plain", "outline"],
+            "default": "plain"
+          }
+        },
+        "states": ["checked"]
+      }
+    },
+    "border": {
+      "radius": {
+        "$type": "dimension",
+        "$value": "{border.radius}",
+        "$description": "Corner radius of outline options and of skeleton cards."
+      }
+    },
+    "color": {
+      "background": {
+        "$type": "color",
+        "$value": "{color.background}",
+        "$description": "Background of outline and button options and of the marker of a segmented group."
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.border}",
+        "$description": "Border of outline and button options; decorative: the circle of an outline option and the label of a button option mark the control."
+      },
+      "shadow": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [0, 0, 0],
+          "hex": "#000000",
+          "alpha": 0.1
+        },
+        "$description": "Color of the shadow of the marker of a segmented group."
+      }
+    },
+    "indicator": {
+      "$description": "The circle that marks the chosen option.",
+      "$extensions": {
+        "is.swell.ui": {
+          "settings": {
+            "position": {
+              "description": "Where the circle sits in the row of an option: at the start or at the end.",
+              "values": ["start", "end"],
+              "default": "start"
+            }
+          }
+        }
+      }
+    },
+    "checked": {
+      "color": {
+        "background": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.9451, 0.9569, 0.9961],
+            "hex": "#f1f4fe"
+          },
+          "$description": "Fill of the chosen option of a group drawn as buttons."
+        }
+      }
+    },
+    "shadow": {
+      "$type": "shadow",
+      "$value": {
+        "color": "{radio.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 option of a segmented group, in radio.color.shadow."
+    },
+    "gap": {
+      "$type": "dimension",
+      "$value": {
+        "value": 8,
+        "unit": "px"
+      },
+      "$description": "Space between the options of a radio group."
+    },
+    "button": {
+      "gap": {
+        "$type": "dimension",
+        "$value": {
+          "value": 6,
+          "unit": "px"
+        },
+        "$description": "Space between the options of a radio group drawn as buttons."
+      }
+    }
+  }
+}

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

@@ -0,0 +1,71 @@
+{
+  "status": {
+    "$description": "Dark theme values of status.",
+    "danger": {
+      "color": {
+        "background": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.949, 0.3333, 0.3529],
+            "hex": "#f2555a",
+            "alpha": 0.09
+          }
+        },
+        "border": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.949, 0.3333, 0.3529],
+            "hex": "#f2555a",
+            "alpha": 0.35
+          }
+        }
+      }
+    },
+    "success": {
+      "color": {
+        "background": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.2431, 0.8118, 0.5569],
+            "hex": "#3ecf8e",
+            "alpha": 0.09
+          }
+        },
+        "border": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.2431, 0.8118, 0.5569],
+            "hex": "#3ecf8e",
+            "alpha": 0.35
+          }
+        }
+      }
+    },
+    "warning": {
+      "color": {
+        "background": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.9412, 0.6667, 0.2353],
+            "hex": "#f0aa3c",
+            "alpha": 0.09
+          }
+        },
+        "border": {
+          "$type": "color",
+          "$value": {
+            "colorSpace": "srgb",
+            "components": [0.9412, 0.6667, 0.2353],
+            "hex": "#f0aa3c",
+            "alpha": 0.35
+          }
+        }
+      }
+    }
+  }
+}