@guardian/stand 0.0.4 → 0.0.6

package/dist/styleD/build/typescript/base/colors.js

@@ -0,0 +1,142 @@
+const baseColors = {
+  neutral: {
+    "0": "#000000",
+    "50": "#121212",
+    "100": "#333333",
+    "200": "#545454",
+    "300": "#666666",
+    "400": "#8d8d8d",
+    "500": "#999999",
+    "550": "#aeaeae",
+    "600": "#bababa",
+    "625": "#c1c1c1",
+    "650": "#cccccc",
+    "700": "#dcdcdc",
+    "750": "#e6e6e6",
+    "800": "#ededed",
+    "850": "#f6f6f6",
+    "900": "#ffffff"
+  },
+  red: {
+    "50": "#3d0e08",
+    "100": "#65170e",
+    "200": "#8c2113",
+    "300": "#b42a19",
+    "400": "#db331e",
+    "500": "#e15847",
+    "600": "#e87c6f",
+    "700": "#eea198",
+    "800": "#f5c6c0",
+    "900": "#fbebe9"
+  },
+  blue: {
+    "50": "#061d3c",
+    "100": "#092f62",
+    "200": "#0d4289",
+    "300": "#1054af",
+    "400": "#1467d6",
+    "500": "#3e82dd",
+    "600": "#699ee5",
+    "700": "#93b9ec",
+    "800": "#bdd4f4",
+    "900": "#e8f0fb"
+  },
+  cyan: {
+    "50": "#00202f",
+    "100": "#00344e",
+    "200": "#00496c",
+    "300": "#005d8b",
+    "400": "#0072a9",
+    "500": "#2e8bb8",
+    "600": "#5ca5c8",
+    "700": "#8abed7",
+    "800": "#b8d8e7",
+    "900": "#e6f1f6"
+  },
+  teal: {
+    "50": "#050e0f",
+    "100": "#0e2729",
+    "200": "#174044",
+    "300": "#287279",
+    "400": "#318b94",
+    "500": "#56a0a7",
+    "600": "#7bb5bb",
+    "700": "#a0cace",
+    "800": "#c5dfe1",
+    "900": "#eaf3f4"
+  },
+  green: {
+    "50": "#162c11",
+    "100": "#24491d",
+    "200": "#326528",
+    "300": "#408233",
+    "400": "#4e9e3e",
+    "500": "#6eaf61",
+    "600": "#8ec183",
+    "700": "#aed2a6",
+    "800": "#cde4c9",
+    "900": "#edf5ec"
+  },
+  yellow: {
+    "50": "#433608",
+    "100": "#6f590c",
+    "200": "#9a7c11",
+    "300": "#c69f16",
+    "400": "#f1c21b",
+    "500": "#f4cd44",
+    "600": "#f6d86d",
+    "700": "#f9e396",
+    "800": "#fbeebf",
+    "900": "#fef9e8"
+  },
+  orange: {
+    "50": "#45260e",
+    "100": "#713e17",
+    "200": "#9d5621",
+    "300": "#c96e2a",
+    "400": "#f58633",
+    "500": "#f79c58",
+    "600": "#f9b27c",
+    "700": "#fac7a1",
+    "800": "#fcddc6",
+    "900": "#fef3eb"
+  },
+  magenta: {
+    "50": "#350e20",
+    "100": "#581734",
+    "200": "#7a2048",
+    "300": "#9d295d",
+    "400": "#bf3271",
+    "500": "#cb578b",
+    "600": "#d67ca4",
+    "700": "#e2a1be",
+    "800": "#edc6d7",
+    "900": "#f9ebf1"
+  },
+  "warm-purple": {
+    "50": "#220b30",
+    "100": "#381350",
+    "200": "#4e1a6f",
+    "300": "#64228e",
+    "400": "#7a29ad",
+    "500": "#9250bc",
+    "600": "#aa76cb",
+    "700": "#c29dd9",
+    "800": "#dac3e8",
+    "900": "#f2eaf7"
+  },
+  "cool-purple": {
+    "50": "#232740",
+    "100": "#394069",
+    "200": "#505a92",
+    "300": "#6773bb",
+    "400": "#7d8ce4",
+    "500": "#94a1e9",
+    "600": "#acb5ee",
+    "700": "#c3caf3",
+    "800": "#dbdff7",
+    "900": "#f2f4fc"
+  }
+};
+
+export { baseColors };

package/dist/styleD/build/typescript/base/typography.cjs

@@ -0,0 +1,65 @@
+'use strict';
+
+const baseTypography = {
+  family: {
+    "Open Sans": "Open Sans",
+    "Open Sans Compact": "Open Sans",
+    "Guardian Text Egyptian": "GuardianTextEgyptian",
+    "Guardian Headline": "GH Guardian Headline"
+  },
+  size: {
+    "12-px": "12px",
+    "14-px": "14px",
+    "16-px": "16px",
+    "18-px": "18px",
+    "20-px": "20px",
+    "24-px": "24px",
+    "28-px": "28px",
+    "32-px": "32px",
+    "36-px": "36px",
+    "42-px": "42px",
+    "48-px": "48px"
+  },
+  weight: {
+    "Guardian Text Egyptian": {
+      normal: 400,
+      bold: 700
+    },
+    "Guardian Headline": {
+      bold: 700
+    },
+    "Open Sans": {
+      light: 340,
+      normal: 460,
+      semiBold: 600,
+      bold: 700
+    },
+    "Open Sans Compact": {
+      light: 360,
+      normal: 460,
+      semiBold: 600,
+      bold: 700
+    }
+  },
+  width: {
+    "Open Sans": 95,
+    "Open Sans Compact": 88
+  },
+  style: {
+    normal: "normal",
+    italic: "italic"
+  },
+  "line-height": {
+    tight: 1.15,
+    normal: 1.3,
+    loose: 1.4
+  },
+  "letter-spacing": {
+    "densest-px": "-1px",
+    "denser-px": "-0.5px",
+    "dense-px": "-0.2px",
+    "default-px": "0px"
+  }
+};
+
+exports.baseTypography = baseTypography;

package/dist/styleD/build/typescript/base/typography.js

@@ -0,0 +1,63 @@
+const baseTypography = {
+  family: {
+    "Open Sans": "Open Sans",
+    "Open Sans Compact": "Open Sans",
+    "Guardian Text Egyptian": "GuardianTextEgyptian",
+    "Guardian Headline": "GH Guardian Headline"
+  },
+  size: {
+    "12-px": "12px",
+    "14-px": "14px",
+    "16-px": "16px",
+    "18-px": "18px",
+    "20-px": "20px",
+    "24-px": "24px",
+    "28-px": "28px",
+    "32-px": "32px",
+    "36-px": "36px",
+    "42-px": "42px",
+    "48-px": "48px"
+  },
+  weight: {
+    "Guardian Text Egyptian": {
+      normal: 400,
+      bold: 700
+    },
+    "Guardian Headline": {
+      bold: 700
+    },
+    "Open Sans": {
+      light: 340,
+      normal: 460,
+      semiBold: 600,
+      bold: 700
+    },
+    "Open Sans Compact": {
+      light: 360,
+      normal: 460,
+      semiBold: 600,
+      bold: 700
+    }
+  },
+  width: {
+    "Open Sans": 95,
+    "Open Sans Compact": 88
+  },
+  style: {
+    normal: "normal",
+    italic: "italic"
+  },
+  "line-height": {
+    tight: 1.15,
+    normal: 1.3,
+    loose: 1.4
+  },
+  "letter-spacing": {
+    "densest-px": "-1px",
+    "denser-px": "-0.5px",
+    "dense-px": "-0.2px",
+    "default-px": "0px"
+  }
+};
+
+export { baseTypography };

package/dist/styleD/build/typescript/component/byline.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+const componentByline = {
+  color: "#000000",
+  backgroundColor: "#ffffff",
+  readonlyBackgroundColor: "#dcdcdc",
+  borderColor: "#000000",
+  borderWidth: "1px",
+  borderStyle: "solid",
+  lineHeight: 1.8,
+  chip: {
+    color: "#000000",
+    borderColor: "#dcdcdc",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: "8px",
+    paddingX: "4px",
+    paddingY: "2px",
+    selectedBorderColor: "#bdd4f4",
+    taggedBackgroundColor: "#dcdcdc",
+    untaggedColor: "#000000"
+  },
+  dropdown: {
+    borderColor: "#cccccc",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    backgroundColor: "#ffffff",
+    li: {
+      color: "#000000",
+      borderBottomColor: "#cccccc",
+      borderBottomWidth: "1px",
+      borderBottomStyle: "solid",
+      selectedBackgroundColor: "#56a0a7",
+      selectedColor: "#ffffff"
+    },
+    maxHeight: "320px"
+  },
+  invisiblesColor: "#bababa",
+  placeholderColor: "#8d8d8d"
+};
+
+exports.componentByline = componentByline;

package/dist/styleD/build/typescript/component/byline.js

@@ -0,0 +1,40 @@
+const componentByline = {
+  color: "#000000",
+  backgroundColor: "#ffffff",
+  readonlyBackgroundColor: "#dcdcdc",
+  borderColor: "#000000",
+  borderWidth: "1px",
+  borderStyle: "solid",
+  lineHeight: 1.8,
+  chip: {
+    color: "#000000",
+    borderColor: "#dcdcdc",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderRadius: "8px",
+    paddingX: "4px",
+    paddingY: "2px",
+    selectedBorderColor: "#bdd4f4",
+    taggedBackgroundColor: "#dcdcdc",
+    untaggedColor: "#000000"
+  },
+  dropdown: {
+    borderColor: "#cccccc",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    backgroundColor: "#ffffff",
+    li: {
+      color: "#000000",
+      borderBottomColor: "#cccccc",
+      borderBottomWidth: "1px",
+      borderBottomStyle: "solid",
+      selectedBackgroundColor: "#56a0a7",
+      selectedColor: "#ffffff"
+    },
+    maxHeight: "320px"
+  },
+  invisiblesColor: "#bababa",
+  placeholderColor: "#8d8d8d"
+};
+
+export { componentByline };

package/dist/styleD/build/typescript/component/tagAutocomplete.cjs

@@ -0,0 +1,29 @@
+'use strict';
+
+const componentTagAutocomplete = {
+  input: {
+    color: "#000000",
+    backgroundColor: "#ffffff",
+    disabledBackgroundColor: "#dcdcdc",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "#8d8d8d",
+    padding: "11px"
+  },
+  listbox: {
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "#8d8d8d",
+    paddingY: "8px",
+    paddingX: "0px",
+    backgroundColor: "#ffffff",
+    item: {
+      paddingY: "8px",
+      paddingX: "12px",
+      backgroundHoverColor: "#ededed",
+      backgroundFocusedColor: "#ededed"
+    }
+  }
+};
+
+exports.componentTagAutocomplete = componentTagAutocomplete;

package/dist/styleD/build/typescript/component/tagAutocomplete.js

@@ -0,0 +1,27 @@
+const componentTagAutocomplete = {
+  input: {
+    color: "#000000",
+    backgroundColor: "#ffffff",
+    disabledBackgroundColor: "#dcdcdc",
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "#8d8d8d",
+    padding: "11px"
+  },
+  listbox: {
+    borderWidth: "1px",
+    borderStyle: "solid",
+    borderColor: "#8d8d8d",
+    paddingY: "8px",
+    paddingX: "0px",
+    backgroundColor: "#ffffff",
+    item: {
+      paddingY: "8px",
+      paddingX: "12px",
+      backgroundHoverColor: "#ededed",
+      backgroundFocusedColor: "#ededed"
+    }
+  }
+};
+
+export { componentTagAutocomplete };

package/dist/styleD/build/typescript/component/tagTable.cjs

@@ -0,0 +1,53 @@
+'use strict';
+
+const componentTagTable = {
+  heading: {
+    backgroundColor: "#dcdcdc",
+    fontWeight: 700,
+    paddingTop: "3px",
+    paddingRight: "5px",
+    paddingBottom: "3px",
+    paddingLeft: "12px"
+  },
+  cell: {
+    paddingX: "5px",
+    paddingY: "3px",
+    firstCellPaddingLeft: "12px",
+    borderBetweenCells: {
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "#ffffff"
+    }
+  },
+  row: {
+    height: "28px",
+    backgroundColor: "#ededed",
+    backgroundHoverColor: "#f6f6f6",
+    borderBottom: {
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "#ffffff"
+    },
+    firstRowBackgroundColor: "#aed2a6",
+    firstRowBackgroundHoverColor: "#8ec183"
+  },
+  addButton: {
+    color: "#ffffff",
+    paddingX: "10px",
+    paddingY: "0px",
+    backgroundColor: "#8d8d8d",
+    backgroundHoverColor: "#545454",
+    fontWeight: 400,
+    fontSize: "13px"
+  },
+  typeBadge: {
+    color: "#000000",
+    backgroundColor: "#ffffff",
+    paddingX: "6px",
+    paddingY: "2px",
+    fontWeight: 700,
+    fontSize: "10px"
+  }
+};
+
+exports.componentTagTable = componentTagTable;

package/dist/styleD/build/typescript/component/tagTable.js

@@ -0,0 +1,51 @@
+const componentTagTable = {
+  heading: {
+    backgroundColor: "#dcdcdc",
+    fontWeight: 700,
+    paddingTop: "3px",
+    paddingRight: "5px",
+    paddingBottom: "3px",
+    paddingLeft: "12px"
+  },
+  cell: {
+    paddingX: "5px",
+    paddingY: "3px",
+    firstCellPaddingLeft: "12px",
+    borderBetweenCells: {
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "#ffffff"
+    }
+  },
+  row: {
+    height: "28px",
+    backgroundColor: "#ededed",
+    backgroundHoverColor: "#f6f6f6",
+    borderBottom: {
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "#ffffff"
+    },
+    firstRowBackgroundColor: "#aed2a6",
+    firstRowBackgroundHoverColor: "#8ec183"
+  },
+  addButton: {
+    color: "#ffffff",
+    paddingX: "10px",
+    paddingY: "0px",
+    backgroundColor: "#8d8d8d",
+    backgroundHoverColor: "#545454",
+    fontWeight: 400,
+    fontSize: "13px"
+  },
+  typeBadge: {
+    color: "#000000",
+    backgroundColor: "#ffffff",
+    paddingX: "6px",
+    paddingY: "2px",
+    fontWeight: 700,
+    fontSize: "10px"
+  }
+};
+
+export { componentTagTable };

package/dist/styleD/build/typescript/semantic/colors.cjs

@@ -0,0 +1,37 @@
+'use strict';
+
+const semanticColors = {
+  text: {
+    primary: "#000000",
+    secondary: "#333333",
+    tertiary: "#666666",
+    "inverse-default": "#dcdcdc",
+    "inverse-secondary": "#cccccc",
+    "inverse-tertiary": "#aeaeae",
+    "inverse-strong": "#ffffff",
+    warning: "#8c2113",
+    success: "#326528"
+  },
+  surface: {
+    "light-1": "#f6f6f6",
+    "light-2": "#ededed",
+    "dark-1": "#333333"
+  },
+  border: {
+    subtle: "#cccccc",
+    default: "#8d8d8d",
+    strong: "#545454",
+    "inverse-strong": "#ffffff"
+  },
+  bg: {
+    "default-onDark": "#121212",
+    "default-onLight": "#ffffff"
+  },
+  status: {
+    "status-draft": "#f1c21b",
+    "status-live": "#4e9e3e",
+    "status-selected": "#0072a9"
+  }
+};
+
+exports.semanticColors = semanticColors;

package/dist/styleD/build/typescript/semantic/colors.js

@@ -0,0 +1,35 @@
+const semanticColors = {
+  text: {
+    primary: "#000000",
+    secondary: "#333333",
+    tertiary: "#666666",
+    "inverse-default": "#dcdcdc",
+    "inverse-secondary": "#cccccc",
+    "inverse-tertiary": "#aeaeae",
+    "inverse-strong": "#ffffff",
+    warning: "#8c2113",
+    success: "#326528"
+  },
+  surface: {
+    "light-1": "#f6f6f6",
+    "light-2": "#ededed",
+    "dark-1": "#333333"
+  },
+  border: {
+    subtle: "#cccccc",
+    default: "#8d8d8d",
+    strong: "#545454",
+    "inverse-strong": "#ffffff"
+  },
+  bg: {
+    "default-onDark": "#121212",
+    "default-onLight": "#ffffff"
+  },
+  status: {
+    "status-draft": "#f1c21b",
+    "status-live": "#4e9e3e",
+    "status-selected": "#0072a9"
+  }
+};
+
+export { semanticColors };