@valancex/style 0.0.0-stage → 0.15.0

package/schema/style-contract-v1.schema.json

@@ -0,0 +1,171 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "https://valancex.dev/schema/style-contract-v1.json",
+  "title": "The style contract (style-contract-v1)",
+  "type": "object",
+  "additionalProperties": false,
+  "required": [
+    "version",
+    "parts",
+    "interactionStates",
+    "semanticStates",
+    "variants",
+    "conditions",
+    "properties"
+  ],
+  "properties": {
+    "version": {
+      "const": 1
+    },
+    "note": {
+      "type": "string"
+    },
+    "parts": {
+      "type": "object",
+      "minProperties": 1,
+      "additionalProperties": {
+        "type": "string"
+      }
+    },
+    "interactionStates": {
+      "type": "object",
+      "minProperties": 1,
+      "additionalProperties": {
+        "type": "string",
+        "pattern": "^:[a-z-]+$"
+      }
+    },
+    "interactionMedia": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "string",
+        "pattern": "^\\(.+\\)$"
+      }
+    },
+    "semanticStates": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "uniqueItems": true
+    },
+    "variants": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": [
+          "values",
+          "default"
+        ],
+        "properties": {
+          "values": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            },
+            "minItems": 2,
+            "uniqueItems": true
+          },
+          "default": {
+            "type": "string"
+          }
+        }
+      }
+    },
+    "conditions": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": [
+          "values"
+        ],
+        "properties": {
+          "values": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            },
+            "minItems": 1
+          },
+          "web": {
+            "type": "object",
+            "additionalProperties": {
+              "type": "string"
+            }
+          },
+          "desktop": {
+            "enum": [
+              "supported",
+              "unsupported"
+            ]
+          }
+        }
+      }
+    },
+    "properties": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": [
+          "accepts",
+          "web",
+          "desktop"
+        ],
+        "properties": {
+          "accepts": {
+            "enum": [
+              "color",
+              "stroke",
+              "dimension",
+              "space-list",
+              "typography",
+              "shadow",
+              "opacity",
+              "alignment"
+            ]
+          },
+          "web": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            },
+            "minItems": 1
+          },
+          "desktop": {
+            "enum": [
+              "supported",
+              "partial",
+              "unsupported"
+            ]
+          }
+        }
+      }
+    },
+    "desktopNotes": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "string"
+      }
+    },
+    "modeConditions": {
+      "type": "object",
+      "additionalProperties": {
+        "type": "string",
+        "pattern": "^[a-z-]+:[a-z-]+$"
+      }
+    },
+    "desktopStates": {
+      "type": "object",
+      "additionalProperties": {
+        "enum": [
+          "supported",
+          "partial",
+          "unsupported"
+        ]
+      }
+    }
+  }
+}

package/schema/theme-v1.schema.json

@@ -0,0 +1,78 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "$id": "https://valancex.dev/schema/theme-v1.json",
+  "title": "A theme (theme-v1): its token documents by mode, its recipes, and the pairs whose contrast it declares",
+  "type": "object",
+  "additionalProperties": false,
+  "required": [
+    "version",
+    "name",
+    "modes",
+    "recipes"
+  ],
+  "properties": {
+    "version": {
+      "const": 1
+    },
+    "name": {
+      "type": "string",
+      "pattern": "^[a-z][a-z0-9-]*$"
+    },
+    "modes": {
+      "type": "object",
+      "required": [
+        "light"
+      ],
+      "propertyNames": {
+        "pattern": "^[a-z][a-z0-9-]*$"
+      },
+      "additionalProperties": {
+        "type": "string",
+        "minLength": 1
+      }
+    },
+    "recipes": {
+      "type": "array",
+      "items": {
+        "type": "string",
+        "minLength": 1
+      }
+    },
+    "contrast": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "additionalProperties": false,
+        "required": [
+          "text",
+          "on",
+          "min"
+        ],
+        "properties": {
+          "text": {
+            "type": "string"
+          },
+          "on": {
+            "type": "string"
+          },
+          "min": {
+            "type": "number",
+            "minimum": 1,
+            "maximum": 21
+          },
+          "modes": {
+            "type": "array",
+            "items": {
+              "type": "string"
+            },
+            "minItems": 1
+          }
+        }
+      }
+    },
+    "base": {
+      "type": "string",
+      "minLength": 1
+    }
+  }
+}

package/themes/default/recipes/button.json

@@ -0,0 +1,87 @@
+{
+  "version": 1,
+  "target": {
+    "primitive": "button",
+    "part": "root"
+  },
+  "base": {
+    "radius": "radius.2",
+    "padding": [
+      "space.2",
+      "space.4"
+    ],
+    "type": "type.label",
+    "min-size": "size.target"
+  },
+  "variants": {
+    "intent": {
+      "neutral": {
+        "background": "color.surface",
+        "text": "color.text",
+        "border": {
+          "width": "border.1",
+          "color": "color.border"
+        }
+      },
+      "primary": {
+        "background": "color.accent",
+        "text": "color.on-accent",
+        "border": {
+          "width": "border.1",
+          "color": "color.accent"
+        }
+      },
+      "danger": {
+        "background": "color.danger",
+        "text": "color.on-danger",
+        "border": {
+          "width": "border.1",
+          "color": "color.danger"
+        }
+      }
+    },
+    "size": {
+      "sm": {
+        "padding": [
+          "space.1",
+          "space.3"
+        ]
+      },
+      "md": {
+        "padding": [
+          "space.2",
+          "space.4"
+        ]
+      },
+      "lg": {
+        "padding": [
+          "space.3",
+          "space.6"
+        ]
+      }
+    }
+  },
+  "states": {
+    "hovered": {
+      "elevation": "elevation.1"
+    },
+    "pressed": {
+      "elevation": "none"
+    },
+    "focus-visible": {
+      "outline": {
+        "width": "border.2",
+        "color": "color.focus",
+        "offset": "space.1"
+      }
+    },
+    "disabled": {
+      "opacity": 0.5
+    }
+  },
+  "when": {
+    "viewport:compact": {
+      "min-size": "size.target-touch"
+    }
+  }
+}

package/themes/default/recipes/checkbox.json

@@ -0,0 +1,26 @@
+{
+  "version": 1,
+  "target": {
+    "primitive": "checkbox",
+    "part": "root"
+  },
+  "base": {
+    "min-size": "space.5"
+  },
+  "states": {
+    "focus-visible": {
+      "outline": {
+        "width": "border.2",
+        "color": "color.focus",
+        "offset": "space.1"
+      }
+    },
+    "invalid": {
+      "outline": {
+        "width": "border.2",
+        "color": "color.danger",
+        "offset": "space.1"
+      }
+    }
+  }
+}

package/themes/default/recipes/column.json

@@ -0,0 +1,10 @@
+{
+  "version": 1,
+  "target": {
+    "primitive": "column",
+    "part": "root"
+  },
+  "base": {
+    "gap": "space.3"
+  }
+}

package/themes/default/recipes/heading.json

@@ -0,0 +1,11 @@
+{
+  "version": 1,
+  "target": {
+    "primitive": "heading",
+    "part": "root"
+  },
+  "base": {
+    "text": "color.text",
+    "type": "type.heading"
+  }
+}

package/themes/default/recipes/row.json

@@ -0,0 +1,10 @@
+{
+  "version": 1,
+  "target": {
+    "primitive": "row",
+    "part": "root"
+  },
+  "base": {
+    "gap": "space.2"
+  }
+}

package/themes/default/recipes/text.json

@@ -0,0 +1,12 @@
+{
+  "version": 1,
+  "target": {
+    "primitive": "text",
+    "part": "root"
+  },
+  "base": {
+    "text": "color.text",
+    "type": "type.body",
+    "min-size": "size.line"
+  }
+}

package/themes/default/recipes/textfield.json

@@ -0,0 +1,37 @@
+{
+  "version": 1,
+  "target": {
+    "primitive": "textfield",
+    "part": "root"
+  },
+  "base": {
+    "background": "color.surface-field",
+    "text": "color.text",
+    "border": {
+      "width": "border.1",
+      "color": "color.border"
+    },
+    "radius": "radius.2",
+    "padding": [
+      "space.2",
+      "space.3"
+    ],
+    "type": "type.body",
+    "min-size": "size.target"
+  },
+  "states": {
+    "focus-visible": {
+      "outline": {
+        "width": "border.2",
+        "color": "color.focus",
+        "offset": "space.1"
+      }
+    },
+    "invalid": {
+      "border": {
+        "width": "border.2",
+        "color": "color.danger"
+      }
+    }
+  }
+}

package/themes/default/theme.json

@@ -0,0 +1,61 @@
+{
+  "version": 1,
+  "name": "default",
+  "base": "tokens/base.tokens.json",
+  "modes": {
+    "light": "tokens/light.tokens.json",
+    "dark": "tokens/dark.tokens.json",
+    "contrast": "tokens/contrast.tokens.json"
+  },
+  "recipes": [
+    "recipes/column.json",
+    "recipes/row.json",
+    "recipes/heading.json",
+    "recipes/text.json",
+    "recipes/button.json",
+    "recipes/checkbox.json",
+    "recipes/textfield.json"
+  ],
+  "contrast": [
+    {
+      "text": "color.text",
+      "on": "color.surface",
+      "min": 4.5
+    },
+    {
+      "text": "color.text-muted",
+      "on": "color.surface",
+      "min": 4.5
+    },
+    {
+      "text": "color.text",
+      "on": "color.surface-field",
+      "min": 4.5
+    },
+    {
+      "text": "color.on-accent",
+      "on": "color.accent",
+      "min": 4.5
+    },
+    {
+      "text": "color.on-danger",
+      "on": "color.danger",
+      "min": 4.5
+    },
+    {
+      "text": "color.border",
+      "on": "color.surface",
+      "min": 3
+    },
+    {
+      "text": "color.border",
+      "on": "color.surface-field",
+      "min": 3
+    },
+    {
+      "text": "color.focus",
+      "on": "color.surface",
+      "min": 3
+    }
+  ]
+}

package/themes/default/tokens/base.tokens.json

@@ -0,0 +1,193 @@
+{
+  "$schema": "https://www.designtokens.org/schemas/2025.10/format.json",
+  "$description": "The tokens that do not change with the mode.",
+  "space": {
+    "$type": "dimension",
+    "1": {
+      "$value": {
+        "value": 0.25,
+        "unit": "rem"
+      }
+    },
+    "2": {
+      "$value": {
+        "value": 0.5,
+        "unit": "rem"
+      }
+    },
+    "3": {
+      "$value": {
+        "value": 0.75,
+        "unit": "rem"
+      }
+    },
+    "4": {
+      "$value": {
+        "value": 1,
+        "unit": "rem"
+      }
+    },
+    "5": {
+      "$value": {
+        "value": 1.5,
+        "unit": "rem"
+      }
+    },
+    "6": {
+      "$value": {
+        "value": 2,
+        "unit": "rem"
+      }
+    }
+  },
+  "radius": {
+    "$type": "dimension",
+    "1": {
+      "$value": {
+        "value": 0.25,
+        "unit": "rem"
+      }
+    },
+    "2": {
+      "$value": {
+        "value": 0.5,
+        "unit": "rem"
+      }
+    },
+    "3": {
+      "$value": {
+        "value": 999,
+        "unit": "px"
+      }
+    }
+  },
+  "border": {
+    "$type": "dimension",
+    "1": {
+      "$value": {
+        "value": 1,
+        "unit": "px"
+      }
+    },
+    "2": {
+      "$value": {
+        "value": 2,
+        "unit": "px"
+      }
+    }
+  },
+  "size": {
+    "$type": "dimension",
+    "target": {
+      "$value": {
+        "value": 2.5,
+        "unit": "rem"
+      },
+      "$description": "The least height of a control a finger or a pointer must hit."
+    },
+    "target-touch": {
+      "$value": {
+        "value": 3,
+        "unit": "rem"
+      },
+      "$description": "The least height of a control on a compact screen, where a finger is the pointer."
+    },
+    "line": {
+      "$value": {
+        "value": 1.5,
+        "unit": "rem"
+      },
+      "$description": "The height of one line of body text (its line height): the room a message that comes and goes keeps, so what is below it does not move."
+    }
+  },
+  "type": {
+    "$type": "typography",
+    "body": {
+      "$value": {
+        "fontFamily": [
+          "system-ui",
+          "sans-serif"
+        ],
+        "fontSize": {
+          "value": 1,
+          "unit": "rem"
+        },
+        "fontWeight": 400,
+        "letterSpacing": {
+          "value": 0,
+          "unit": "px"
+        },
+        "lineHeight": 1.5
+      }
+    },
+    "label": {
+      "$value": {
+        "fontFamily": [
+          "system-ui",
+          "sans-serif"
+        ],
+        "fontSize": {
+          "value": 0.9375,
+          "unit": "rem"
+        },
+        "fontWeight": 500,
+        "letterSpacing": {
+          "value": 0,
+          "unit": "px"
+        },
+        "lineHeight": 1.25
+      }
+    },
+    "heading": {
+      "$value": {
+        "fontFamily": [
+          "system-ui",
+          "sans-serif"
+        ],
+        "fontSize": {
+          "value": 1.5,
+          "unit": "rem"
+        },
+        "fontWeight": 700,
+        "letterSpacing": {
+          "value": 0,
+          "unit": "px"
+        },
+        "lineHeight": 1.2
+      }
+    }
+  },
+  "elevation": {
+    "$type": "shadow",
+    "1": {
+      "$value": {
+        "color": {
+          "colorSpace": "srgb",
+          "components": [
+            0.0,
+            0.0,
+            0.0
+          ],
+          "hex": "#000000",
+          "alpha": 0.18
+        },
+        "offsetX": {
+          "value": 0,
+          "unit": "px"
+        },
+        "offsetY": {
+          "value": 1,
+          "unit": "px"
+        },
+        "blur": {
+          "value": 3,
+          "unit": "px"
+        },
+        "spread": {
+          "value": 0,
+          "unit": "px"
+        }
+      }
+    }
+  }
+}