@webstudio-is/css-data 0.82.0 → 0.84.0

package/lib/cjs/html.js

@@ -25,6 +25,7 @@ __export(html_exports, {
   b: () => b,
   blockquote: () => blockquote,
   body: () => body,
+  button: () => button,
   caption: () => caption,
   cite: () => i,
   code: () => code,
@@ -38,6 +39,7 @@ __export(html_exports, {
   dl: () => p,
   dt: () => article,
   em: () => i,
+  fieldset: () => fieldset,
   figcaption: () => article,
   figure: () => blockquote,
   footer: () => article,
@@ -53,18 +55,23 @@ __export(html_exports, {
   hr: () => hr,
   html: () => article,
   i: () => i,
+  input: () => input,
   ins: () => u,
   kbd: () => code,
+  label: () => label,
+  legend: () => legend,
   li: () => li,
   main: () => article,
   mark: () => mark,
   nav: () => article,
   ol: () => ol,
+  option: () => option,
   p: () => p,
   pre: () => pre,
   s: () => s,
   samp: () => code,
   section: () => article,
+  select: () => select,
   strong: () => b,
   sub: () => sub,
   summary: () => article,
@@ -72,6 +79,7 @@ __export(html_exports, {
   table: () => table,
   tbody: () => tbody,
   td: () => td,
+  textarea: () => textarea,
   tfoot: () => tfoot,
   th: () => th,
   thead: () => thead,
@@ -81,184 +89,211 @@ __export(html_exports, {
   var: () => i
 });
 module.exports = __toCommonJS(html_exports);
-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" }
@@ -267,115 +302,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",
@@ -389,11 +359,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 = [
   {
@@ -408,20 +375,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" }
@@ -432,10 +393,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 }
@@ -444,80 +402,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" }
@@ -532,5 +442,140 @@ 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" }
+  }
 ];