@swell/swell-ui 0.0.0-stage → 0.1.1

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

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