@webstudio-is/css-data 0.83.0 → 0.85.0

package/lib/html.js

@@ -1,181 +1,208 @@
-const displayBlock = {
+const display = (value) => ({
   property: "display",
-  value: { type: "keyword", value: "block" }
-};
-const mt1em = {
+  value: { type: "keyword", value }
+});
+const marginTop = (value, unit) => ({
   property: "marginTop",
-  value: { type: "unit", value: 1, unit: "em" }
-};
-const mb1em = {
+  value: { type: "unit", value, unit: unit ?? "number" }
+});
+const marginRight = (value, unit) => ({
+  property: "marginRight",
+  value: { type: "unit", value, unit: unit ?? "number" }
+});
+const marginBottom = (value, unit) => ({
   property: "marginBottom",
-  value: { type: "unit", value: 1, unit: "em" }
-};
-const ml40px = {
+  value: { type: "unit", value, unit: unit ?? "number" }
+});
+const marginLeft = (value, unit) => ({
   property: "marginLeft",
-  value: { type: "unit", value: 40, unit: "px" }
-};
-const mr40px = {
-  property: "marginRight",
-  value: { type: "unit", value: 40, unit: "px" }
-};
-const pl40px = {
-  property: "paddingLeft",
-  value: { type: "unit", value: 40, unit: "px" }
-};
-const fontWeightBold = {
-  property: "fontWeight",
-  value: { type: "keyword", value: "bold" }
-};
-const fontStyleItalic = {
-  property: "fontStyle",
-  value: { type: "keyword", value: "italic" }
-};
-const pt1px = {
+  value: { type: "unit", value, unit: unit ?? "number" }
+});
+const paddingTop = (value, unit) => ({
   property: "paddingTop",
-  value: { type: "unit", value: 1, unit: "px" }
-};
-const pr1px = {
+  value: { type: "unit", value, unit }
+});
+const paddingRight = (value, unit) => ({
   property: "paddingRight",
-  value: { type: "unit", value: 1, unit: "px" }
-};
-const pb1px = {
+  value: { type: "unit", value, unit }
+});
+const paddingBottom = (value, unit) => ({
   property: "paddingBottom",
-  value: { type: "unit", value: 1, unit: "px" }
-};
-const pl1px = {
+  value: { type: "unit", value, unit }
+});
+const paddingLeft = (value, unit) => ({
   property: "paddingLeft",
-  value: { type: "unit", value: 1, unit: "px" }
-};
-const article = [displayBlock];
-const body = [
-  displayBlock,
+  value: { type: "unit", value, unit }
+});
+const color = (value) => ({
+  property: "color",
+  value: { type: "keyword", value }
+});
+const fontSize = (value, unit) => ({
+  property: "fontSize",
+  value: { type: "unit", value, unit }
+});
+const fontWeight = (value) => ({
+  property: "fontWeight",
+  value: { type: "keyword", value }
+});
+const fontStyle = (value) => ({
+  property: "fontStyle",
+  value: { type: "keyword", value }
+});
+const textAlign = (value) => ({
+  property: "textAlign",
+  value: { type: "keyword", value }
+});
+const verticalAlign = (value) => ({
+  property: "verticalAlign",
+  value: { type: "keyword", value }
+});
+const whiteSpace = (value) => ({
+  property: "whiteSpace",
+  value: { type: "keyword", value }
+});
+const cursor = (value) => ({
+  property: "cursor",
+  value: { type: "keyword", value }
+});
+const borderWidth = (value, unit) => [
   {
-    property: "marginTop",
-    value: { type: "unit", value: 8, unit: "px" }
+    property: "borderTopWidth",
+    value: { type: "unit", value, unit }
   },
   {
-    property: "marginRight",
-    value: { type: "unit", value: 8, unit: "px" }
+    property: "borderRightWidth",
+    value: { type: "unit", value, unit }
   },
   {
-    property: "marginBottom",
-    value: { type: "unit", value: 8, unit: "px" }
+    property: "borderBottomWidth",
+    value: { type: "unit", value, unit }
   },
   {
-    property: "marginLeft",
-    value: { type: "unit", value: 8, unit: "px" }
+    property: "borderLeftWidth",
+    value: { type: "unit", value, unit }
   }
 ];
-const p = [displayBlock, mt1em, mb1em];
-const dd = [displayBlock, ml40px];
-const blockquote = [displayBlock, mt1em, mb1em, ml40px, mr40px];
-const address = [displayBlock, fontStyleItalic];
-const h1 = [
-  displayBlock,
-  fontWeightBold,
+const borderStyle = (value) => [
   {
-    property: "fontSize",
-    value: { type: "unit", value: 2, unit: "em" }
-  },
-  {
-    property: "marginTop",
-    value: { type: "unit", value: 0.67, unit: "em" }
+    property: "borderTopStyle",
+    value: { type: "keyword", value }
   },
   {
-    property: "marginBottom",
-    value: { type: "unit", value: 0.67, unit: "em" }
-  }
-];
-const h2 = [
-  displayBlock,
-  fontWeightBold,
-  {
-    property: "fontSize",
-    value: { type: "unit", value: 1.5, unit: "em" }
+    property: "borderRightStyle",
+    value: { type: "keyword", value }
   },
   {
-    property: "marginTop",
-    value: { type: "unit", value: 0.83, unit: "em" }
+    property: "borderBottomStyle",
+    value: { type: "keyword", value }
   },
   {
-    property: "marginBottom",
-    value: { type: "unit", value: 0.83, unit: "em" }
+    property: "borderLeftStyle",
+    value: { type: "keyword", value }
   }
 ];
-const h3 = [
-  displayBlock,
-  fontWeightBold,
+const borderColor = (value) => [
   {
-    property: "fontSize",
-    value: { type: "unit", value: 1.17, unit: "em" }
+    property: "borderTopColor",
+    value: { type: "keyword", value }
   },
   {
-    property: "marginTop",
-    value: { type: "unit", value: 1, unit: "em" }
+    property: "borderRightColor",
+    value: { type: "keyword", value }
   },
   {
-    property: "marginBottom",
-    value: { type: "unit", value: 1, unit: "em" }
-  }
-];
-const h4 = [
-  displayBlock,
-  fontWeightBold,
-  {
-    property: "marginTop",
-    value: { type: "unit", value: 1.33, unit: "em" }
+    property: "borderBottomColor",
+    value: { type: "keyword", value }
   },
   {
-    property: "marginBottom",
-    value: { type: "unit", value: 1.33, unit: "em" }
+    property: "borderLeftColor",
+    value: { type: "keyword", value }
   }
 ];
+const appearance = (value) => ({
+  property: "appearance",
+  value: { type: "keyword", value }
+});
+const userSelect = (value) => ({
+  property: "userSelect",
+  value: { type: "keyword", value }
+});
+const boxSizing = (value) => ({
+  property: "boxSizing",
+  value: { type: "keyword", value }
+});
+const article = [display("block")];
+const body = [
+  display("block"),
+  marginTop(8, "px"),
+  marginRight(8, "px"),
+  marginBottom(8, "px"),
+  marginLeft(8, "px")
+];
+const p = [
+  display("block"),
+  marginTop(1, "em"),
+  marginBottom(1, "em")
+];
+const dd = [display("block"), marginLeft(40, "px")];
+const blockquote = [
+  display("block"),
+  marginTop(1, "em"),
+  marginBottom(1, "em"),
+  marginLeft(40, "px"),
+  marginRight(40, "px")
+];
+const address = [display("block"), fontStyle("italic")];
+const h1 = [
+  display("block"),
+  fontWeight("bold"),
+  fontSize(2, "em"),
+  marginTop(0.67, "em"),
+  marginBottom(0.67, "em")
+];
+const h2 = [
+  display("block"),
+  fontWeight("bold"),
+  fontSize(1.5, "em"),
+  marginTop(0.83, "em"),
+  marginBottom(0.83, "em")
+];
+const h3 = [
+  display("block"),
+  fontWeight("bold"),
+  fontSize(1.17, "em"),
+  marginTop(1, "em"),
+  marginBottom(1, "em")
+];
+const h4 = [
+  display("block"),
+  fontWeight("bold"),
+  marginTop(1.33, "em"),
+  marginBottom(1.33, "em")
+];
 const h5 = [
-  displayBlock,
-  fontWeightBold,
-  {
-    property: "fontSize",
-    value: { type: "unit", value: 0.83, unit: "em" }
-  },
-  {
-    property: "marginTop",
-    value: { type: "unit", value: 1.67, unit: "em" }
-  },
-  {
-    property: "marginBottom",
-    value: { type: "unit", value: 1.67, unit: "em" }
-  }
+  display("block"),
+  fontWeight("bold"),
+  fontSize(0.83, "em"),
+  marginTop(1.67, "em"),
+  marginBottom(1.67, "em")
 ];
 const h6 = [
-  displayBlock,
-  fontWeightBold,
-  {
-    property: "fontSize",
-    value: { type: "unit", value: 0.67, unit: "em" }
-  },
-  {
-    property: "marginTop",
-    value: { type: "unit", value: 2.33, unit: "em" }
-  },
-  {
-    property: "marginBottom",
-    value: { type: "unit", value: 2.33, unit: "em" }
-  }
+  display("block"),
+  fontWeight("bold"),
+  fontSize(0.67, "em"),
+  marginTop(2.33, "em"),
+  marginBottom(2.33, "em")
 ];
 const pre = [
-  displayBlock,
-  {
-    property: "whiteSpace",
-    value: { type: "keyword", value: "pre" }
-  },
-  mt1em,
-  mb1em
+  display("block"),
+  whiteSpace("pre"),
+  marginTop(1, "em"),
+  marginBottom(1, "em")
 ];
 const table = [
-  {
-    property: "display",
-    value: { type: "keyword", value: "table" }
-  },
+  display("table"),
   {
     property: "borderSpacing",
     value: { type: "unit", value: 2, unit: "px" }
@@ -184,115 +211,50 @@ const table = [
     property: "borderCollapse",
     value: { type: "keyword", value: "separate" }
   },
+  boxSizing("border-box"),
   {
-    property: "boxSizing",
-    value: { type: "keyword", value: "border-box" }
-  },
-  {
-    property: "borderSpacing",
+    property: "textIndent",
     value: { type: "unit", value: 0, unit: "number" }
   }
 ];
-const caption = [
-  {
-    property: "display",
-    value: { type: "keyword", value: "table" }
-  },
-  {
-    property: "textAlign",
-    value: { type: "keyword", value: "center" }
-  }
-];
-const tr = [
-  {
-    property: "display",
-    value: { type: "keyword", value: "table-row" }
-  },
-  {
-    property: "verticalAlign",
-    value: { type: "keyword", value: "inherit" }
-  }
-];
-const col = [
-  {
-    property: "display",
-    value: { type: "keyword", value: "table-column" }
-  }
-];
-const colgroup = [
-  {
-    property: "display",
-    value: { type: "keyword", value: "table-column-group" }
-  }
-];
+const caption = [display("table-caption"), textAlign("center")];
+const tr = [display("table-row"), verticalAlign("inherit")];
+const col = [display("table-column")];
+const colgroup = [display("table-column-group")];
 const tbody = [
-  {
-    property: "display",
-    value: { type: "keyword", value: "table-row-group" }
-  },
-  {
-    property: "verticalAlign",
-    value: { type: "keyword", value: "middle" }
-  }
+  display("table-row-group"),
+  verticalAlign("middle")
 ];
 const thead = [
-  {
-    property: "display",
-    value: { type: "keyword", value: "table-header-group" }
-  },
-  {
-    property: "verticalAlign",
-    value: { type: "keyword", value: "middle" }
-  }
+  display("table-header-group"),
+  verticalAlign("middle")
 ];
 const tfoot = [
-  {
-    property: "display",
-    value: { type: "keyword", value: "table-footer-group" }
-  },
-  {
-    property: "verticalAlign",
-    value: { type: "keyword", value: "middle" }
-  }
+  display("table-footer-group"),
+  verticalAlign("middle")
 ];
 const td = [
-  {
-    property: "display",
-    value: { type: "keyword", value: "table-cell" }
-  },
-  {
-    property: "verticalAlign",
-    value: { type: "keyword", value: "inherit" }
-  },
-  {
-    property: "textAlign",
-    value: { type: "keyword", value: "unset" }
-  },
-  pt1px,
-  pr1px,
-  pb1px,
-  pl1px
+  display("table-cell"),
+  verticalAlign("inherit"),
+  paddingTop(1, "px"),
+  paddingRight(1, "px"),
+  paddingBottom(1, "px"),
+  paddingLeft(1, "px")
 ];
 const th = [
-  {
-    property: "display",
-    value: { type: "keyword", value: "table-cell" }
-  },
-  {
-    property: "verticalAlign",
-    value: { type: "keyword", value: "inherit" }
-  },
-  fontWeightBold,
-  pt1px,
-  pr1px,
-  pb1px,
-  pl1px
+  display("table-cell"),
+  verticalAlign("inherit"),
+  fontWeight("bold"),
+  paddingTop(1, "px"),
+  paddingRight(1, "px"),
+  paddingBottom(1, "px"),
+  paddingLeft(1, "px")
 ];
 const b = [
   // in firefox defined as bolder
-  fontWeightBold
+  fontWeight("bold")
 ];
-const i = [fontStyleItalic];
+const i = [fontStyle("italic")];
 const code = [
   {
     property: "fontFamily",
@@ -306,11 +268,8 @@ const mark = [
     // in firefox defined as Mark
     value: { type: "keyword", value: "yellow" }
   },
-  {
-    property: "color",
-    // in firefox defined as MarkText
-    value: { type: "keyword", value: "black" }
-  }
+  // in firefox defined as MarkText
+  color("black")
 ];
 const u = [
   {
@@ -325,20 +284,14 @@ const s = [
   }
 ];
 const sub = [
-  {
-    property: "verticalAlign",
-    value: { type: "keyword", value: "sub" }
-  },
+  verticalAlign("sub"),
   {
     property: "fontSize",
     value: { type: "keyword", value: "smaller" }
   }
 ];
 const sup = [
-  {
-    property: "verticalAlign",
-    value: { type: "keyword", value: "super" }
-  },
+  verticalAlign("super"),
   {
     property: "fontSize",
     value: { type: "keyword", value: "smaller" }
@@ -349,10 +302,7 @@ const a = [
     property: "textDecorationLine",
     value: { type: "keyword", value: "underline" }
   },
-  {
-    property: "cursor",
-    value: { type: "keyword", value: "pointer" }
-  },
+  cursor("pointer"),
   {
     property: "color",
     value: { type: "rgb", r: 0, g: 0, b: 238, alpha: 1 }
@@ -361,80 +311,32 @@ const a = [
   // and modeling var-like defaults is too complex
 ];
 const ul = [
-  displayBlock,
+  display("block"),
   {
     property: "listStyleType",
     value: { type: "keyword", value: "disc" }
   },
-  mt1em,
-  mb1em,
-  pl40px
+  marginTop(1, "em"),
+  marginBottom(1, "em"),
+  paddingLeft(40, "px")
 ];
 const ol = [
-  displayBlock,
+  display("block"),
   {
     property: "listStyleType",
     value: { type: "keyword", value: "decimal" }
   },
-  mt1em,
-  mb1em,
-  pl40px
-];
-const li = [
-  {
-    property: "display",
-    value: { type: "keyword", value: "list-item" }
-  },
-  {
-    property: "textAlign",
-    value: { type: "keyword", value: "match-parent" }
-  }
+  marginTop(1, "em"),
+  marginBottom(1, "em"),
+  paddingLeft(40, "px")
 ];
+const li = [display("list-item"), textAlign("match-parent")];
 const hr = [
-  {
-    property: "color",
-    value: { type: "keyword", value: "gray" }
-  },
-  {
-    property: "borderTopWidth",
-    value: { type: "unit", value: 1, unit: "px" }
-  },
-  {
-    property: "borderRightWidth",
-    value: { type: "unit", value: 1, unit: "px" }
-  },
-  {
-    property: "borderBottomWidth",
-    value: { type: "unit", value: 1, unit: "px" }
-  },
-  {
-    property: "borderLeftWidth",
-    value: { type: "unit", value: 1, unit: "px" }
-  },
-  {
-    property: "borderTopStyle",
-    value: { type: "keyword", value: "inset" }
-  },
-  {
-    property: "borderRightStyle",
-    value: { type: "keyword", value: "inset" }
-  },
-  {
-    property: "borderBottomStyle",
-    value: { type: "keyword", value: "inset" }
-  },
-  {
-    property: "borderLeftStyle",
-    value: { type: "keyword", value: "inset" }
-  },
-  {
-    property: "marginTop",
-    value: { type: "unit", value: 0.5, unit: "em" }
-  },
-  {
-    property: "marginBottom",
-    value: { type: "unit", value: 0.5, unit: "em" }
-  },
+  color("gray"),
+  ...borderWidth(1, "px"),
+  ...borderStyle("inset"),
+  marginTop(0.5, "em"),
+  marginBottom(0.5, "em"),
   {
     property: "marginLeft",
     value: { type: "keyword", value: "auto" }
@@ -449,7 +351,142 @@ const hr = [
     value: { type: "keyword", value: "hidden" }
   },
   /* This is not really per spec but all browsers define it */
-  displayBlock
+  display("block")
+];
+const formControlReset = [
+  // in firefox defined as FieldText
+  color("initial"),
+  { property: "letterSpacing", value: { type: "keyword", value: "normal" } },
+  { property: "wordSpacing", value: { type: "keyword", value: "normal" } },
+  { property: "lineHeight", value: { type: "keyword", value: "normal" } },
+  { property: "textTransform", value: { type: "keyword", value: "none" } },
+  { property: "textIndent", value: { type: "unit", value: 0, unit: "number" } },
+  { property: "textShadow", value: { type: "keyword", value: "none" } },
+  display("inline-block"),
+  textAlign("start")
+];
+const legend = [
+  display("block"),
+  paddingLeft(2, "px"),
+  paddingRight(2, "px")
+];
+const fieldset = [
+  display("block"),
+  marginLeft(2, "px"),
+  marginRight(2, "px"),
+  paddingTop(0.35, "em"),
+  paddingBottom(0.625, "em"),
+  paddingLeft(0.75, "em"),
+  paddingRight(0.75, "em"),
+  ...borderWidth(2, "px"),
+  // in browsers defined as groove
+  ...borderStyle("solid"),
+  ...borderColor("ThreeDFace"),
+  { property: "minWidth", value: { type: "keyword", value: "min-content" } }
+];
+const label = [cursor("default")];
+const input = [
+  appearance("auto"),
+  paddingTop(1, "px"),
+  paddingRight(1, "px"),
+  paddingBottom(1, "px"),
+  paddingLeft(1, "px"),
+  ...borderWidth(2, "px"),
+  // in browsers defined as inset
+  ...borderStyle("solid"),
+  // in firefox defined as Field
+  { property: "backgroundColor", value: { type: "keyword", value: "white" } },
+  cursor("text")
+];
+const textarea = [
+  ...formControlReset,
+  appearance("auto"),
+  marginTop(1, "px"),
+  marginBottom(1, "px"),
+  // in firefox 2px
+  ...borderWidth(1, "px"),
+  // in browsers defined as inset
+  ...borderStyle("solid"),
+  paddingTop(2, "px"),
+  paddingRight(2, "px"),
+  paddingBottom(2, "px"),
+  paddingLeft(2, "px"),
+  // in firefox defined as Field
+  { property: "backgroundColor", value: { type: "keyword", value: "white" } },
+  verticalAlign("text-bottom"),
+  cursor("text"),
+  { property: "resize", value: { type: "keyword", value: "both" } },
+  whiteSpace("pre-wrap"),
+  {
+    property: "wordWrap",
+    value: { type: "keyword", value: "break-word" }
+  }
+];
+const select = [
+  ...formControlReset,
+  display("inline-block"),
+  marginTop(0),
+  marginRight(0),
+  marginBottom(0),
+  marginLeft(0),
+  paddingTop(1, "px"),
+  paddingBottom(1, "px"),
+  paddingRight(4, "px"),
+  paddingLeft(4, "px"),
+  ...borderWidth(2, "px"),
+  // in browsers defined as inset
+  ...borderStyle("solid"),
+  whiteSpace("nowrap"),
+  {
+    property: "wordWrap",
+    value: { type: "keyword", value: "normal" }
+  },
+  cursor("default"),
+  boxSizing("border-box"),
+  userSelect("none"),
+  {
+    property: "overflow",
+    value: { type: "keyword", value: "clip" }
+  },
+  verticalAlign("baseline"),
+  appearance("auto")
+];
+const option = [
+  display("block"),
+  { property: "float", value: { type: "keyword", value: "none" } },
+  { property: "position", value: { type: "keyword", value: "static" } },
+  { property: "minHeight", value: { type: "unit", value: 1, unit: "em" } },
+  paddingTop(2, "px"),
+  paddingBottom(2, "px"),
+  paddingRight(2, "px"),
+  paddingLeft(4, "px"),
+  userSelect("none"),
+  whiteSpace("nowrap"),
+  {
+    property: "wordWrap",
+    value: { type: "keyword", value: "normal" }
+  }
+];
+const button = [
+  ...formControlReset,
+  appearance("auto"),
+  // in firefox defined as 1px 8px
+  paddingTop(2, "px"),
+  paddingBottom(3, "px"),
+  paddingLeft(6, "px"),
+  paddingRight(6, "px"),
+  ...borderWidth(2, "px"),
+  // in browsers defined as outset
+  ...borderStyle("solid"),
+  cursor("default"),
+  boxSizing("border-box"),
+  userSelect("none"),
+  textAlign("center"),
+  {
+    property: "backgroundColor",
+    // in browsers defined as ButtonFace
+    value: { type: "keyword", value: "lightgray" }
+  }
 ];
 export {
   a,
@@ -459,6 +496,7 @@ export {
   b,
   blockquote,
   body,
+  button,
   caption,
   i as cite,
   code,
@@ -472,6 +510,7 @@ export {
   p as dl,
   article as dt,
   i as em,
+  fieldset,
   article as figcaption,
   blockquote as figure,
   article as footer,
@@ -487,18 +526,23 @@ export {
   hr,
   article as html,
   i,
+  input,
   u as ins,
   code as kbd,
+  label,
+  legend,
   li,
   article as main,
   mark,
   article as nav,
   ol,
+  option,
   p,
   pre,
   s,
   code as samp,
   article as section,
+  select,
   b as strong,
   sub,
   article as summary,
@@ -506,6 +550,7 @@ export {
   table,
   tbody,
   td,
+  textarea,
   tfoot,
   th,
   thead,