@ndla/preset-panda 0.0.36 → 0.0.38

package/dist/styles.css

@@ -12,6 +12,10 @@
     font-feature-settings: 'ss03' on, 'liga' off, 'clig' off;
 }
 
+  html h1,html h2,html h3,html h4,html h5,html h6 {
+    text-wrap: unset;
+}
+
   body {
     background: var(--colors-background-default);
     color: var(--colors-text-default);
@@ -175,6 +179,104 @@
     text-decoration: none;
 }
 
+  .codeblock {
+    border: 1px solid;
+    border-left: 4px solid;
+    border-radius: var(--radii-xsmall);
+    box-sizing: border-box;
+    letter-spacing: normal;
+    font-family: var(--fonts-code);
+    font-weight: var(--font-weights-normal);
+    font-size: var(--font-sizes-small);
+    line-height: var(--line-heights-small);
+}
+
+  .codeblock:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+    font-size: calc(var(--font-sizes-small) * 1.11);
+    line-height: calc(var(--line-heights-small) * 1.11);
+}
+
+  .codeblock {
+    display: block;
+    white-space: pre;
+    border-color: var(--colors-stroke-subtle);
+    border-left-color: var(--colors-stroke-default);
+    overflow-x: auto;
+}
+
+  .codeblock .linenumber {
+    display: inline-block;
+    padding-block: 0;
+    padding-inline: var(--spacing-small);
+    border-right: 1px solid;
+    width: var(--sizes-xxlarge);
+    text-align: right;
+    margin-inline-end: var(--spacing-xsmall);
+    border-color: var(--colors-stroke-subtle);
+}
+
+  .codeblock :nth-child(1 of .linenumber) {
+    padding-block-start: var(--spacing-xsmall);
+}
+
+  .codeblock :nth-last-child(1 of .linenumber) {
+    padding-block-end: var(--spacing-xsmall);
+}
+
+  .codeblock .token.comment,.codeblock .token.block-comment,.codeblock .token.prolog,.codeblock .token.doctype,.codeblock .token.cdata {
+    color: #7d8b99;
+}
+
+  .codeblock .token.punctuation {
+    color: #5f6364;
+}
+
+  .codeblock .token.property,.codeblock .token.tag,.codeblock .token.boolean,.codeblock .token.number,.codeblock .token.function-name,.codeblock .token.constant,.codeblock .token.symbol,.codeblock .token.deleted {
+    color: #c92c2c;
+}
+
+  .codeblock .token.selector,.codeblock .token.attr-name,.codeblock .token.string,.codeblock .token.char,.codeblock .token.function,.codeblock .token.builtin,.codeblock .token.inserted {
+    color: #2f9c0a;
+}
+
+  .codeblock .token.operator,.codeblock .token.entity,.codeblock .token.url,.codeblock .token.variable {
+    color: #a67f59;
+    background: rgba(255, 255, 255, 0.5);
+}
+
+  .codeblock .token.atrule,.codeblock .token.attr-value,.codeblock .token.keyword,.codeblock .token.class-name {
+    color: #1990b8;
+}
+
+  .codeblock .token.regex,.codeblock .token.important {
+    color: #e90;
+}
+
+  .codeblock .language-css .token.string,.codeblock .style .token.string {
+    color: #a67f59;
+    background: rgba(255, 255, 255, 0.5);
+}
+
+  .codeblock .token.entity {
+    cursor: help;
+}
+
+  .codeblock .token.namespace {
+    opacity: 0.7;
+}
+
+  .codeblock .token.important {
+    font-weight: var(--font-weights-normal);
+}
+
+  .codeblock .token.bold {
+    font-weight: var(--font-weights-bold);
+}
+
+  .codeblock .token.italic {
+    font-style: italic;
+}
+
   *,::before,::after,::backdrop {
     --blur: /*-*/ /*-*/;
     --brightness: /*-*/ /*-*/;

package/es/globalCss.js

@@ -16,7 +16,11 @@ export const globalCss = defineGlobalStyles({
   },
   html: {
     minHeight: "100%",
-    fontFeatureSettings: "'ss03' on, 'liga' off, 'clig' off"
+    fontFeatureSettings: "'ss03' on, 'liga' off, 'clig' off",
+    // this is included in the css reset we use. We don't want it.
+    "& h1, h2, h3, h4, h5, h6": {
+      textWrap: "unset"
+    }
   },
   body: {
     background: "background.default",
@@ -140,5 +144,76 @@ export const globalCss = defineGlobalStyles({
     _visited: {
       color: "text.linkVisited"
     }
+  },
+  ".codeblock": {
+    border: "1px solid",
+    borderColor: "stroke.subtle",
+    borderLeft: "4px solid",
+    borderLeftColor: "stroke.default",
+    borderRadius: "xsmall",
+    boxSizing: "border-box",
+    overflowX: "auto",
+    textStyle: "label.medium",
+    fontFamily: "code",
+    display: "block",
+    whiteSpace: "pre",
+    "& .linenumber": {
+      display: "inline-block",
+      paddingBlock: "0",
+      paddingInline: "small",
+      borderRight: "1px solid",
+      borderColor: "stroke.subtle",
+      width: "xxlarge",
+      textAlign: "right",
+      marginInlineEnd: "xsmall"
+    },
+    "& :nth-child(1 of .linenumber)": {
+      paddingBlockStart: "xsmall"
+    },
+    "& :nth-last-child(1 of .linenumber)": {
+      paddingBlockEnd: "xsmall"
+    },
+    // The remaining css is copied from the coy theme in prismjs. A lot of css is omitted due to styling clashes
+    "& .token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata": {
+      color: "#7d8b99"
+    },
+    "& .token.punctuation": {
+      color: "#5f6364"
+    },
+    "& .token.property, .token.tag, .token.boolean, .token.number, .token.function-name, .token.constant, .token.symbol, .token.deleted": {
+      color: "#c92c2c"
+    },
+    "& .token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted": {
+      color: "#2f9c0a"
+    },
+    "& .token.operator, .token.entity, .token.url, .token.variable": {
+      color: "#a67f59",
+      background: "rgba(255, 255, 255, 0.5)"
+    },
+    "& .token.atrule, .token.attr-value, .token.keyword, .token.class-name": {
+      color: "#1990b8"
+    },
+    "& .token.regex, .token.important": {
+      color: "#e90"
+    },
+    "& .language-css .token.string, .style .token.string": {
+      color: "#a67f59",
+      background: "rgba(255, 255, 255, 0.5)"
+    },
+    "& .token.important": {
+      fontWeight: "normal"
+    },
+    "& .token.bold": {
+      fontWeight: "bold"
+    },
+    "& .token.italic": {
+      fontStyle: "italic"
+    },
+    "& .token.entity": {
+      cursor: "help"
+    },
+    "& .token.namespace": {
+      opacity: "0.7"
+    }
   }
 });

package/lib/globalCss.js

@@ -22,7 +22,11 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
   },
   html: {
     minHeight: "100%",
-    fontFeatureSettings: "'ss03' on, 'liga' off, 'clig' off"
+    fontFeatureSettings: "'ss03' on, 'liga' off, 'clig' off",
+    // this is included in the css reset we use. We don't want it.
+    "& h1, h2, h3, h4, h5, h6": {
+      textWrap: "unset"
+    }
   },
   body: {
     background: "background.default",
@@ -146,5 +150,76 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
     _visited: {
       color: "text.linkVisited"
     }
+  },
+  ".codeblock": {
+    border: "1px solid",
+    borderColor: "stroke.subtle",
+    borderLeft: "4px solid",
+    borderLeftColor: "stroke.default",
+    borderRadius: "xsmall",
+    boxSizing: "border-box",
+    overflowX: "auto",
+    textStyle: "label.medium",
+    fontFamily: "code",
+    display: "block",
+    whiteSpace: "pre",
+    "& .linenumber": {
+      display: "inline-block",
+      paddingBlock: "0",
+      paddingInline: "small",
+      borderRight: "1px solid",
+      borderColor: "stroke.subtle",
+      width: "xxlarge",
+      textAlign: "right",
+      marginInlineEnd: "xsmall"
+    },
+    "& :nth-child(1 of .linenumber)": {
+      paddingBlockStart: "xsmall"
+    },
+    "& :nth-last-child(1 of .linenumber)": {
+      paddingBlockEnd: "xsmall"
+    },
+    // The remaining css is copied from the coy theme in prismjs. A lot of css is omitted due to styling clashes
+    "& .token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata": {
+      color: "#7d8b99"
+    },
+    "& .token.punctuation": {
+      color: "#5f6364"
+    },
+    "& .token.property, .token.tag, .token.boolean, .token.number, .token.function-name, .token.constant, .token.symbol, .token.deleted": {
+      color: "#c92c2c"
+    },
+    "& .token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted": {
+      color: "#2f9c0a"
+    },
+    "& .token.operator, .token.entity, .token.url, .token.variable": {
+      color: "#a67f59",
+      background: "rgba(255, 255, 255, 0.5)"
+    },
+    "& .token.atrule, .token.attr-value, .token.keyword, .token.class-name": {
+      color: "#1990b8"
+    },
+    "& .token.regex, .token.important": {
+      color: "#e90"
+    },
+    "& .language-css .token.string, .style .token.string": {
+      color: "#a67f59",
+      background: "rgba(255, 255, 255, 0.5)"
+    },
+    "& .token.important": {
+      fontWeight: "normal"
+    },
+    "& .token.bold": {
+      fontWeight: "bold"
+    },
+    "& .token.italic": {
+      fontStyle: "italic"
+    },
+    "& .token.entity": {
+      cursor: "help"
+    },
+    "& .token.namespace": {
+      opacity: "0.7"
+    }
   }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/preset-panda",
-  "version": "0.0.36",
+  "version": "0.0.38",
   "description": "Panda preset for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "84234a46743d9d044f220e90e6710e2da307d65d"
+  "gitHead": "e29f1689ea7268f8a1eed1c99f179a3524c70758"
 }