@swell/swell-ui 0.0.0-stage → 0.1.1

package/resolver.json

@@ -0,0 +1,111 @@
+{
+  "name": "Swell UI",
+  "version": "2025.10",
+  "description": "Swell UI token contract: global groups and components, then the theme.",
+  "sets": {
+    "global": {
+      "description": "Global groups.",
+      "sources": [
+        {
+          "$ref": "tokens/color.json"
+        },
+        {
+          "$ref": "tokens/font.json"
+        },
+        {
+          "$ref": "tokens/border.json"
+        },
+        {
+          "$ref": "tokens/focus.json"
+        },
+        {
+          "$ref": "tokens/motion.json"
+        },
+        {
+          "$ref": "tokens/control.json"
+        },
+        {
+          "$ref": "tokens/field.json"
+        },
+        {
+          "$ref": "tokens/overlay.json"
+        }
+      ]
+    },
+    "components": {
+      "description": "Components.",
+      "sources": [
+        {
+          "$ref": "src/components/core/text/tokens.json"
+        },
+        {
+          "$ref": "src/components/core/link/tokens.json"
+        },
+        {
+          "$ref": "src/components/core/button/tokens.json"
+        },
+        {
+          "$ref": "src/components/core/checkbox/tokens.json"
+        },
+        {
+          "$ref": "src/components/core/radio/tokens.json"
+        },
+        {
+          "$ref": "src/components/core/status/tokens.json"
+        },
+        {
+          "$ref": "src/components/core/badge/tokens.json"
+        },
+        {
+          "$ref": "src/components/core/chip/tokens.json"
+        },
+        {
+          "$ref": "src/components/core/thumbnail/tokens.json"
+        },
+        {
+          "$ref": "src/components/core/card/tokens.json"
+        },
+        {
+          "$ref": "src/components/core/tabs/tokens.json"
+        }
+      ]
+    }
+  },
+  "modifiers": {
+    "theme": {
+      "description": "Light or dark theme. Light values are in the base files.",
+      "contexts": {
+        "light": [],
+        "dark": [
+          {
+            "$ref": "tokens/color.dark.json"
+          },
+          {
+            "$ref": "tokens/field.dark.json"
+          },
+          {
+            "$ref": "src/components/core/button/tokens.dark.json"
+          },
+          {
+            "$ref": "src/components/core/radio/tokens.dark.json"
+          },
+          {
+            "$ref": "src/components/core/status/tokens.dark.json"
+          }
+        ]
+      },
+      "default": "light"
+    }
+  },
+  "resolutionOrder": [
+    {
+      "$ref": "#/sets/global"
+    },
+    {
+      "$ref": "#/sets/components"
+    },
+    {
+      "$ref": "#/modifiers/theme"
+    }
+  ]
+}

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

@@ -0,0 +1,152 @@
+{
+  "badge": {
+    "$description": "Badges: short labels and counts that are text only. The appearance lays the palette out: filled uses background and foreground, without a border; outline uses border and accent on a transparent background.",
+    "$extensions": {
+      "is.swell.ui": {
+        "attributes": {
+          "size": ["xsmall", "small", "large", "xlarge"]
+        },
+        "settings": {
+          "appearance": {
+            "description": "How badges are drawn when the element has no appearance attribute.",
+            "values": ["filled", "outline"],
+            "default": "outline"
+          }
+        },
+        "variants": true
+      }
+    },
+    "height": {
+      "$type": "dimension",
+      "$value": {
+        "value": 24,
+        "unit": "px"
+      },
+      "$description": "Height and least width of medium badges."
+    },
+    "font": {
+      "size": {
+        "$type": "dimension",
+        "$value": "{font.footnote.size}",
+        "$description": "Font size of medium badges."
+      },
+      "weight": {
+        "$type": "fontWeight",
+        "$value": "{font.strong.weight}",
+        "$description": "Font weight of medium badges."
+      }
+    },
+    "xsmall": {
+      "height": {
+        "$type": "dimension",
+        "$value": {
+          "value": 16,
+          "unit": "px"
+        },
+        "$description": "Height and least width of extra small badges, such as a count on an icon."
+      },
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": {
+            "value": 10,
+            "unit": "px"
+          },
+          "$description": "Font size of extra small badges."
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.bold.weight}",
+          "$description": "Font weight of extra small badges."
+        }
+      }
+    },
+    "small": {
+      "height": {
+        "$type": "dimension",
+        "$value": {
+          "value": 20,
+          "unit": "px"
+        },
+        "$description": "Height and least width of small badges, such as a count."
+      },
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": {
+            "value": 11,
+            "unit": "px"
+          },
+          "$description": "Font size of small badges."
+        },
+        "weight": {
+          "$type": "fontWeight",
+          "$value": "{font.bold.weight}",
+          "$description": "Font weight of small badges."
+        }
+      }
+    },
+    "large": {
+      "height": {
+        "$type": "dimension",
+        "$value": {
+          "value": 28,
+          "unit": "px"
+        },
+        "$description": "Height and least width of large badges."
+      },
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": {
+            "value": 13,
+            "unit": "px"
+          },
+          "$description": "Font size of large badges."
+        }
+      }
+    },
+    "xlarge": {
+      "height": {
+        "$type": "dimension",
+        "$value": {
+          "value": 32,
+          "unit": "px"
+        },
+        "$description": "Height and least width of extra large badges."
+      },
+      "font": {
+        "size": {
+          "$type": "dimension",
+          "$value": {
+            "value": 14,
+            "unit": "px"
+          },
+          "$description": "Font size of extra large badges."
+        }
+      }
+    },
+    "color": {
+      "background": {
+        "$type": "color",
+        "$value": "{color.foreground}",
+        "$description": "Fill of filled primary badges, such as a count."
+      },
+      "foreground": {
+        "$type": "color",
+        "$value": "{color.background}",
+        "$description": "Text of filled primary badges."
+      },
+      "border": {
+        "$type": "color",
+        "$value": "{color.border}",
+        "$description": "Border of outline primary badges."
+      },
+      "accent": {
+        "$type": "color",
+        "$value": "{color.foreground}",
+        "$description": "Text of outline primary badges."
+      }
+    }
+  }
+}

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

@@ -0,0 +1,16 @@
+{
+  "button": {
+    "$description": "Dark theme values of button.",
+    "color": {
+      "shadow": {
+        "$type": "color",
+        "$value": {
+          "colorSpace": "srgb",
+          "components": [0.3569, 0.549, 1],
+          "hex": "#5b8cff",
+          "alpha": 0.6
+        }
+      }
+    }
+  }
+}

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