@webstudio-is/css-data 0.83.0 → 0.85.0

package/src/html.ts

@@ -16,69 +16,166 @@ export type Html = {
   [tag in HtmlTags]?: Styles;
 };
 
-const displayBlock: Styles[number] = {
+const display = (value: string): Styles[number] => ({
   property: "display",
-  value: { type: "keyword", value: "block" },
-};
+  value: { type: "keyword", value },
+});
 
-const mt1em: Styles[number] = {
+const marginTop = (value: number, unit?: "em" | "px"): Styles[number] => ({
   property: "marginTop",
-  value: { type: "unit", value: 1, unit: "em" },
-};
+  value: { type: "unit", value, unit: unit ?? "number" },
+});
+
+const marginRight = (value: number, unit?: "em" | "px"): Styles[number] => ({
+  property: "marginRight",
+  value: { type: "unit", value, unit: unit ?? "number" },
+});
 
-const mb1em: Styles[number] = {
+const marginBottom = (value: number, unit?: "em" | "px"): Styles[number] => ({
   property: "marginBottom",
-  value: { type: "unit", value: 1, unit: "em" },
-};
+  value: { type: "unit", value, unit: unit ?? "number" },
+});
 
-const ml40px: Styles[number] = {
+const marginLeft = (value: number, unit?: "em" | "px"): Styles[number] => ({
   property: "marginLeft",
-  value: { type: "unit", value: 40, unit: "px" },
-};
+  value: { type: "unit", value, unit: unit ?? "number" },
+});
 
-const mr40px: Styles[number] = {
-  property: "marginRight",
-  value: { type: "unit", value: 40, unit: "px" },
-};
+const paddingTop = (value: number, unit: "em" | "px"): Styles[number] => ({
+  property: "paddingTop",
+  value: { type: "unit", value, unit },
+});
+
+const paddingRight = (value: number, unit: "em" | "px"): Styles[number] => ({
+  property: "paddingRight",
+  value: { type: "unit", value, unit },
+});
 
-const pl40px: Styles[number] = {
+const paddingBottom = (value: number, unit: "em" | "px"): Styles[number] => ({
+  property: "paddingBottom",
+  value: { type: "unit", value, unit },
+});
+
+const paddingLeft = (value: number, unit: "em" | "px"): Styles[number] => ({
   property: "paddingLeft",
-  value: { type: "unit", value: 40, unit: "px" },
-};
+  value: { type: "unit", value, unit },
+});
+
+const color = (value: string): Styles[number] => ({
+  property: "color",
+  value: { type: "keyword", value },
+});
 
-const fontWeightBold: Styles[number] = {
+const fontSize = (value: number, unit: "em"): Styles[number] => ({
+  property: "fontSize",
+  value: { type: "unit", value, unit },
+});
+
+const fontWeight = (value: "bold"): Styles[number] => ({
   property: "fontWeight",
-  value: { type: "keyword", value: "bold" },
-};
+  value: { type: "keyword", value },
+});
 
-const fontStyleItalic: Styles[number] = {
+const fontStyle = (value: "italic"): Styles[number] => ({
   property: "fontStyle",
-  value: { type: "keyword", value: "italic" },
-};
+  value: { type: "keyword", value },
+});
 
-const pt1px: Styles[number] = {
-  property: "paddingTop",
-  value: { type: "unit", value: 1, unit: "px" },
-};
+const textAlign = (value: string): Styles[number] => ({
+  property: "textAlign",
+  value: { type: "keyword", value },
+});
 
-const pr1px: Styles[number] = {
-  property: "paddingRight",
-  value: { type: "unit", value: 1, unit: "px" },
-};
+const verticalAlign = (value: string): Styles[number] => ({
+  property: "verticalAlign",
+  value: { type: "keyword", value },
+});
 
-const pb1px: Styles[number] = {
-  property: "paddingBottom",
-  value: { type: "unit", value: 1, unit: "px" },
-};
+const whiteSpace = (value: string): Styles[number] => ({
+  property: "whiteSpace",
+  value: { type: "keyword", value },
+});
 
-const pl1px: Styles[number] = {
-  property: "paddingLeft",
-  value: { type: "unit", value: 1, unit: "px" },
-};
+const cursor = (value: string): Styles[number] => ({
+  property: "cursor",
+  value: { type: "keyword", value },
+});
+
+const borderWidth = (value: number, unit: "px"): Styles => [
+  {
+    property: "borderTopWidth",
+    value: { type: "unit", value, unit },
+  },
+  {
+    property: "borderRightWidth",
+    value: { type: "unit", value, unit },
+  },
+  {
+    property: "borderBottomWidth",
+    value: { type: "unit", value, unit },
+  },
+  {
+    property: "borderLeftWidth",
+    value: { type: "unit", value, unit },
+  },
+];
+
+const borderStyle = (value: string): Styles => [
+  {
+    property: "borderTopStyle",
+    value: { type: "keyword", value },
+  },
+  {
+    property: "borderRightStyle",
+    value: { type: "keyword", value },
+  },
+  {
+    property: "borderBottomStyle",
+    value: { type: "keyword", value },
+  },
+  {
+    property: "borderLeftStyle",
+    value: { type: "keyword", value },
+  },
+];
+
+const borderColor = (value: string): Styles => [
+  {
+    property: "borderTopColor",
+    value: { type: "keyword", value },
+  },
+  {
+    property: "borderRightColor",
+    value: { type: "keyword", value },
+  },
+  {
+    property: "borderBottomColor",
+    value: { type: "keyword", value },
+  },
+  {
+    property: "borderLeftColor",
+    value: { type: "keyword", value },
+  },
+];
+
+const appearance = (value: string): Styles[number] => ({
+  property: "appearance",
+  value: { type: "keyword", value },
+});
+
+const userSelect = (value: string): Styles[number] => ({
+  property: "userSelect",
+  value: { type: "keyword", value },
+});
+
+const boxSizing = (value: string): Styles[number] => ({
+  property: "boxSizing",
+  value: { type: "keyword", value },
+});
 
 /* blocks */
 
-export const article: Styles = [displayBlock];
+export const article: Styles = [display("block")];
 export {
   article as aside,
   article as details,
@@ -97,152 +194,93 @@ export {
 };
 
 export const body: Styles = [
-  displayBlock,
-  {
-    property: "marginTop",
-    value: { type: "unit", value: 8, unit: "px" },
-  },
-  {
-    property: "marginRight",
-    value: { type: "unit", value: 8, unit: "px" },
-  },
-  {
-    property: "marginBottom",
-    value: { type: "unit", value: 8, unit: "px" },
-  },
-  {
-    property: "marginLeft",
-    value: { type: "unit", value: 8, unit: "px" },
-  },
+  display("block"),
+  marginTop(8, "px"),
+  marginRight(8, "px"),
+  marginBottom(8, "px"),
+  marginLeft(8, "px"),
 ];
 
-export const p: Styles = [displayBlock, mt1em, mb1em];
+export const p: Styles = [
+  display("block"),
+  marginTop(1, "em"),
+  marginBottom(1, "em"),
+];
 export { p as dl };
 
-export const dd: Styles = [displayBlock, ml40px];
+export const dd: Styles = [display("block"), marginLeft(40, "px")];
 
-export const blockquote: Styles = [displayBlock, mt1em, mb1em, ml40px, mr40px];
+export const blockquote: Styles = [
+  display("block"),
+  marginTop(1, "em"),
+  marginBottom(1, "em"),
+  marginLeft(40, "px"),
+  marginRight(40, "px"),
+];
 export { blockquote as figure };
 
-export const address: Styles = [displayBlock, fontStyleItalic];
+export const address: Styles = [display("block"), fontStyle("italic")];
 
 // h1 font-size, margin-top and margin-bottom depend on outer tags
 // so better define statically in preset styles
 export const h1: Styles = [
-  displayBlock,
-  fontWeightBold,
-  {
-    property: "fontSize",
-    value: { type: "unit", value: 2, unit: "em" },
-  },
-  {
-    property: "marginTop",
-    value: { type: "unit", value: 0.67, unit: "em" },
-  },
-  {
-    property: "marginBottom",
-    value: { type: "unit", value: 0.67, unit: "em" },
-  },
+  display("block"),
+  fontWeight("bold"),
+  fontSize(2, "em"),
+  marginTop(0.67, "em"),
+  marginBottom(0.67, "em"),
 ];
 
 export const h2: Styles = [
-  displayBlock,
-  fontWeightBold,
-  {
-    property: "fontSize",
-    value: { type: "unit", value: 1.5, unit: "em" },
-  },
-  {
-    property: "marginTop",
-    value: { type: "unit", value: 0.83, unit: "em" },
-  },
-  {
-    property: "marginBottom",
-    value: { type: "unit", value: 0.83, unit: "em" },
-  },
+  display("block"),
+  fontWeight("bold"),
+  fontSize(1.5, "em"),
+  marginTop(0.83, "em"),
+  marginBottom(0.83, "em"),
 ];
 
 export const h3: Styles = [
-  displayBlock,
-  fontWeightBold,
-  {
-    property: "fontSize",
-    value: { type: "unit", value: 1.17, unit: "em" },
-  },
-  {
-    property: "marginTop",
-    value: { type: "unit", value: 1, unit: "em" },
-  },
-  {
-    property: "marginBottom",
-    value: { type: "unit", value: 1, unit: "em" },
-  },
+  display("block"),
+  fontWeight("bold"),
+  fontSize(1.17, "em"),
+  marginTop(1, "em"),
+  marginBottom(1, "em"),
 ];
 
 export const h4: Styles = [
-  displayBlock,
-  fontWeightBold,
-  {
-    property: "marginTop",
-    value: { type: "unit", value: 1.33, unit: "em" },
-  },
-  {
-    property: "marginBottom",
-    value: { type: "unit", value: 1.33, unit: "em" },
-  },
+  display("block"),
+  fontWeight("bold"),
+  marginTop(1.33, "em"),
+  marginBottom(1.33, "em"),
 ];
 
 export const h5: Styles = [
-  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"),
 ];
 
 export const h6: Styles = [
-  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"),
 ];
 
 export const pre: Styles = [
-  displayBlock,
-  {
-    property: "whiteSpace",
-    value: { type: "keyword", value: "pre" },
-  },
-  mt1em,
-  mb1em,
+  display("block"),
+  whiteSpace("pre"),
+  marginTop(1, "em"),
+  marginBottom(1, "em"),
 ];
 
 /* tables */
 
 export const table: Styles = [
-  {
-    property: "display",
-    value: { type: "keyword", value: "table" },
-  },
+  display("table"),
   {
     property: "borderSpacing",
     value: { type: "unit", value: 2, unit: "px" },
@@ -251,129 +289,64 @@ export const table: Styles = [
     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" },
   },
 ];
 
-export const caption: Styles = [
-  {
-    property: "display",
-    value: { type: "keyword", value: "table" },
-  },
-  {
-    property: "textAlign",
-    value: { type: "keyword", value: "center" },
-  },
-];
+export const caption: Styles = [display("table-caption"), textAlign("center")];
 
-export const tr: Styles = [
-  {
-    property: "display",
-    value: { type: "keyword", value: "table-row" },
-  },
-  {
-    property: "verticalAlign",
-    value: { type: "keyword", value: "inherit" },
-  },
-];
+export const tr: Styles = [display("table-row"), verticalAlign("inherit")];
 
-export const col: Styles = [
-  {
-    property: "display",
-    value: { type: "keyword", value: "table-column" },
-  },
-];
+export const col: Styles = [display("table-column")];
 
-export const colgroup: Styles = [
-  {
-    property: "display",
-    value: { type: "keyword", value: "table-column-group" },
-  },
-];
+export const colgroup: Styles = [display("table-column-group")];
 
 export const tbody: Styles = [
-  {
-    property: "display",
-    value: { type: "keyword", value: "table-row-group" },
-  },
-  {
-    property: "verticalAlign",
-    value: { type: "keyword", value: "middle" },
-  },
+  display("table-row-group"),
+  verticalAlign("middle"),
 ];
 
 export const thead: Styles = [
-  {
-    property: "display",
-    value: { type: "keyword", value: "table-header-group" },
-  },
-  {
-    property: "verticalAlign",
-    value: { type: "keyword", value: "middle" },
-  },
+  display("table-header-group"),
+  verticalAlign("middle"),
 ];
 
 export const tfoot: Styles = [
-  {
-    property: "display",
-    value: { type: "keyword", value: "table-footer-group" },
-  },
-  {
-    property: "verticalAlign",
-    value: { type: "keyword", value: "middle" },
-  },
+  display("table-footer-group"),
+  verticalAlign("middle"),
 ];
 
 export const td: Styles = [
-  {
-    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"),
 ];
 
 export const th: Styles = [
-  {
-    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"),
 ];
 
 /* inlines */
 
 export const b: Styles = [
   // in firefox defined as bolder
-  fontWeightBold,
+  fontWeight("bold"),
 ];
 export { b as strong };
 
-export const i: Styles = [fontStyleItalic];
+export const i: Styles = [fontStyle("italic")];
 export { i as cite, i as em, i as var, i as dfn };
 
 export const code: Styles = [
@@ -391,11 +364,8 @@ export const mark: Styles = [
     // 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"),
 ];
 
 export const u: Styles = [
@@ -415,10 +385,7 @@ export const s: Styles = [
 export { s as del };
 
 export const sub: Styles = [
-  {
-    property: "verticalAlign",
-    value: { type: "keyword", value: "sub" },
-  },
+  verticalAlign("sub"),
   {
     property: "fontSize",
     value: { type: "keyword", value: "smaller" },
@@ -426,10 +393,7 @@ export const sub: Styles = [
 ];
 
 export const sup: Styles = [
-  {
-    property: "verticalAlign",
-    value: { type: "keyword", value: "super" },
-  },
+  verticalAlign("super"),
   {
     property: "fontSize",
     value: { type: "keyword", value: "smaller" },
@@ -441,10 +405,7 @@ export const a: Styles = [
     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 },
@@ -458,103 +419,199 @@ export const a: Styles = [
 // nested lists have no top/bottom margins
 // so better redefine statically in preset
 export const ul: Styles = [
-  displayBlock,
+  display("block"),
   {
     property: "listStyleType",
     value: { type: "keyword", value: "disc" },
   },
-  mt1em,
-  mb1em,
-  pl40px,
+  marginTop(1, "em"),
+  marginBottom(1, "em"),
+  paddingLeft(40, "px"),
 ];
 
 export const ol: Styles = [
-  displayBlock,
+  display("block"),
   {
     property: "listStyleType",
     value: { type: "keyword", value: "decimal" },
   },
-  mt1em,
-  mb1em,
-  pl40px,
+  marginTop(1, "em"),
+  marginBottom(1, "em"),
+  paddingLeft(40, "px"),
 ];
 
-export const li: Styles = [
-  {
-    property: "display",
-    value: { type: "keyword", value: "list-item" },
-  },
-  {
-    property: "textAlign",
-    value: { type: "keyword", value: "match-parent" },
-  },
-];
+export const li: Styles = [display("list-item"), textAlign("match-parent")];
 
 /* leafs */
 
 export const hr: Styles = [
+  color("gray"),
+  ...borderWidth(1, "px"),
+  ...borderStyle("inset"),
+  marginTop(0.5, "em"),
+  marginBottom(0.5, "em"),
   {
-    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: "marginLeft",
+    value: { type: "keyword", value: "auto" },
   },
   {
-    property: "borderBottomWidth",
-    value: { type: "unit", value: 1, unit: "px" },
+    property: "marginRight",
+    value: { type: "keyword", value: "auto" },
   },
+  // firefox only
   {
-    property: "borderLeftWidth",
-    value: { type: "unit", value: 1, unit: "px" },
+    property: "overflow",
+    value: { type: "keyword", value: "hidden" },
   },
+  /* This is not really per spec but all browsers define it */
+  display("block"),
+];
 
-  {
-    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" },
-  },
+/**
+ * forms
+ * https://searchfox.org/mozilla-central/source/layout/style/res/forms.css
+ **/
+
+const formControlReset: Styles = [
+  // 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"),
+];
 
-  {
-    property: "marginTop",
-    value: { type: "unit", value: 0.5, unit: "em" },
-  },
-  {
-    property: "marginBottom",
-    value: { type: "unit", value: 0.5, unit: "em" },
+export const legend: Styles = [
+  display("block"),
+  paddingLeft(2, "px"),
+  paddingRight(2, "px"),
+];
+
+export const fieldset: Styles = [
+  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" } },
+];
+
+export const label: Styles = [cursor("default")];
+
+export const input: Styles = [
+  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"),
+];
+
+export const textarea: Styles = [
+  ...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" },
   },
+];
+
+export const select: Styles = [
+  ...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: "marginLeft",
-    value: { type: "keyword", value: "auto" },
+    property: "overflow",
+    value: { type: "keyword", value: "clip" },
   },
-  {
-    property: "marginRight",
-    value: { type: "keyword", value: "auto" },
+  verticalAlign("baseline"),
+  appearance("auto"),
+];
+
+export const option: Styles = [
+  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" },
   },
+];
 
-  // firefox only
+export const button: Styles = [
+  ...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: "overflow",
-    value: { type: "keyword", value: "hidden" },
+    property: "backgroundColor",
+    // in browsers defined as ButtonFace
+    value: { type: "keyword", value: "lightgray" },
   },
-
-  /* This is not really per spec but all browsers define it */
-  displayBlock,
 ];