@ndla/preset-panda 0.0.13 → 0.0.15

package/dist/styles.css

@@ -9,6 +9,7 @@
 
   html {
     min-height: 100%;
+    font-feature-settings: 'ss03' on, 'liga' off, 'clig' off;
 }
 
   body {
@@ -37,84 +38,88 @@
     display: none;
 }
 
-  h1:not([class]) {
-    margin: 24px 0 12px 0;
-}
-
-  h2:not([class]) {
-    margin: 48px 0 12px 0;
-}
-
-  h3:not([class]),h4:not([class]),h5:not([class]) {
-    margin: 36px 0 6px 0;
+  .ndla-article {
+    font-family: var(--fonts-serif);
+    font-weight: var(--font-weights-normal);
+    font-size: var(--font-sizes-medium);
+    line-height: var(--line-heights-medium);
 }
 
-  p:not([class]) {
-    margin-bottom: 24px;
+  .ndla-article:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+    font-size: calc(var(--font-sizes-medium) * 1.11);
+    line-height: calc(var(--line-heights-medium) * 1.11);
 }
 
-  blockquote:not([class]) {
-    margin: 30px 0;
+  .ndla-article {
+    width: 100%;
 }
 
-  h1 {
+  .ndla-article h1 {
     font-family: var(--fonts-sans);
     font-weight: var(--font-weights-bold);
     font-size: var(--font-sizes-3xlarge);
     line-height: var(--line-heights-3xlarge);
 }
 
-  h1:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+  .ndla-article h1:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
     font-size: calc(var(--font-sizes-3xlarge) * 1.11);
     line-height: calc(var(--line-heights-3xlarge) * 1.11);
 }
 
-  h2 {
+  .ndla-article h2 {
     font-family: var(--fonts-sans);
     font-weight: var(--font-weights-bold);
     font-size: var(--font-sizes-xxlarge);
     line-height: var(--line-heights-xxlarge);
 }
 
-  h2:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+  .ndla-article h2:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
     font-size: calc(var(--font-sizes-xxlarge) * 1.11);
     line-height: calc(var(--line-heights-xxlarge) * 1.11);
 }
 
-  h3 {
+  .ndla-article h3 {
     font-family: var(--fonts-sans);
     font-weight: var(--font-weights-bold);
     font-size: var(--font-sizes-xlarge);
     line-height: var(--line-heights-xlarge);
 }
 
-  h3:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+  .ndla-article h3:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
     font-size: calc(var(--font-sizes-xlarge) * 1.11);
     line-height: calc(var(--line-heights-xlarge) * 1.11);
 }
 
-  h4,h5,h6 {
+  .ndla-article h4,.ndla-article h5,.ndla-article h6 {
     font-family: var(--fonts-sans);
     font-weight: var(--font-weights-bold);
     font-size: var(--font-sizes-large);
     line-height: var(--line-heights-large);
 }
 
-  h4:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]),h5:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]),h6:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
+  .ndla-article h4:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]),.ndla-article h5:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]),.ndla-article h6:where([lang='zh'], [lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) {
     font-size: calc(var(--font-sizes-large) * 1.11);
     line-height: calc(var(--line-heights-large) * 1.11);
 }
 
-  p {
-    font-family: var(--fonts-sans);
-    font-weight: var(--font-weights-normal);
-    font-size: var(--font-sizes-small);
-    line-height: var(--line-heights-small);
+  .ndla-article details,.ndla-article blockquote,.ndla-article [data-embed-type="framed-content"],.ndla-article [data-embed-type="factbox"],.ndla-article table,.ndla-article [data-embed-type="related-content-list"],.ndla-article [data-embed-type="link-block-list"],.ndla-article [data-embed-type="blog-post"],.ndla-article [data-embed-type="campaign-block"],.ndla-article [data-embed-type="key-figure"],.ndla-article [data-embed-type="grid"],.ndla-article [data-embed-type="contact-block"],.ndla-article [data-embed-type="file-list"],.ndla-article [data-embed-type="uu-disclaimer"] {
+    margin-block-start: var(--spacing-xsmall);
+    margin-block-end: var(--spacing-xsmall);
+}
+
+  .ndla-article section:not([class]) > :is(h2, [data-embed-type="copy-heading"]),.ndla-article section:not([class]) > div:not([class]) > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="framed-content"] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="grid"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="grid-parallax"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="factbox"] > div > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="copyright"] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article [data-embed-type="uu-disclaimer"] > :is(h2, [data-embed-type="copy-heading"]),.ndla-article details > :is(h2, [data-embed-type="copy-heading"]),.ndla-article blockquote > :is(h2, [data-embed-type="copy-heading"]) {
+    margin-block-start: var(--spacing-medium);
+    margin-block-end: var(--spacing-medium);
+}
+
+  .ndla-article section:not([class]) > h3,.ndla-article section:not([class]) > div:not([class]) > h3,.ndla-article [data-embed-type="framed-content"] > h3,.ndla-article [data-embed-type="grid"] > div > h3,.ndla-article [data-embed-type="grid-parallax"] > div > h3,.ndla-article [data-embed-type="factbox"] > div > h3,.ndla-article [data-embed-type="copyright"] > h3,.ndla-article [data-embed-type="uu-disclaimer"] > h3,.ndla-article details > h3,.ndla-article blockquote > h3 {
+    margin-block-start: var(--spacing-small);
+    margin-block-end: var(--spacing-small);
 }
 
-  p: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);
+  .ndla-article section:not([class]) > :is(p, h4, h5, h6, figure, ul, ol, dl, [data-embed-type="speech"]),.ndla-article section:not([class]) > div:not([class]) > :is(p, h4, h5, h6, figure, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="framed-content"] > :is(p, h4, h5, h6, figure, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="grid"] > div > :is(p, h4, h5, h6, figure, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="grid-parallax"] > div > :is(p, h4, h5, h6, figure, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="factbox"] > div > :is(p, h4, h5, h6, figure, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="copyright"] > :is(p, h4, h5, h6, figure, ul, ol, dl, [data-embed-type="speech"]),.ndla-article [data-embed-type="uu-disclaimer"] > :is(p, h4, h5, h6, figure, ul, ol, dl, [data-embed-type="speech"]),.ndla-article details > :is(p, h4, h5, h6, figure, ul, ol, dl, [data-embed-type="speech"]),.ndla-article blockquote > :is(p, h4, h5, h6, figure, ul, ol, dl, [data-embed-type="speech"]) {
+    margin-block-start: var(--spacing-xsmall);
+    margin-block-end: var(--spacing-xsmall);
 }
 
   a:not([class]):not([data-unstyled]),a[class=""]:not([data-unstyled]) {

package/es/globalCss.js

@@ -15,7 +15,8 @@ export const globalCss = defineGlobalStyles({
     "--global-font-mono": "fonts.code"
   },
   html: {
-    minHeight: "100%"
+    minHeight: "100%",
+    fontFeatureSettings: "'ss03' on, 'liga' off, 'clig' off"
   },
   body: {
     background: "background.default"
@@ -38,38 +39,49 @@ export const globalCss = defineGlobalStyles({
   "iframe#launcher": {
     display: "none"
   },
-  // TODO: Remove these again once they're no longer needed.
-  // Some text elements don't have a styling class, and therefor no margin. Handled with generic fallbacks in old global css, and now temporarily handled by these selectors.
-  "h1:not([class])": {
-    margin: "24px 0 12px 0"
-  },
-  "h2:not([class])": {
-    margin: "48px 0 12px 0"
-  },
-  "h3:not([class]), h4:not([class]), h5:not([class])": {
-    margin: "36px 0 6px 0"
-  },
-  "p:not([class])": {
-    marginBottom: "24px"
-  },
-  "blockquote:not([class])": {
-    margin: "30px 0"
-  },
-  h1: {
-    textStyle: "heading.medium"
-  },
-  h2: {
-    textStyle: "heading.small"
-  },
-  h3: {
-    textStyle: "title.large"
-  },
-  "h4, h5, h6": {
-    textStyle: "title.medium"
-  },
-  p: {
-    textStyle: "body.medium"
+  // For future readers: Life here would be much simpler if we could use flex.
+  // However, our usage of float within the article content forces us to use margins.
+  ".ndla-article": {
+    h1: {
+      textStyle: "heading.medium"
+    },
+    h2: {
+      textStyle: "heading.small"
+    },
+    h3: {
+      textStyle: "title.large"
+    },
+    "h4, h5, h6": {
+      textStyle: "title.medium"
+    },
+    textStyle: "body.article",
+    width: "100%",
+    // TODO: Re-check all margin values here. Especially headings.
+    // TODO: Reconsider grid margins. Do we want custom handling for items inside a grid?
+
+    // Non-figure block elements that should have margin above and below.
+    '& details, blockquote, [data-embed-type="framed-content"], [data-embed-type="factbox"], table, [data-embed-type="related-content-list"], [data-embed-type="link-block-list"], [data-embed-type="blog-post"], [data-embed-type="campaign-block"], [data-embed-type="key-figure"], [data-embed-type="grid"], [data-embed-type="contact-block"], [data-embed-type="file-list"], [data-embed-type="uu-disclaimer"]': {
+      marginBlockStart: "xsmall",
+      marginBlockEnd: "xsmall"
+    },
+    // Article content is usually wrapped in a section. The rest of the elements in this list contains other elements, and should add margin to them no matter where they are placed in the DOM.
+    '& section:not([class]), section:not([class]) > div:not([class]), [data-embed-type="framed-content"], [data-embed-type="grid"] > div, [data-embed-type="grid-parallax"] > div, [data-embed-type="factbox"] > div, [data-embed-type="copyright"], [data-embed-type="uu-disclaimer"], details, blockquote': {
+      // TODO: Remove copy-heading if we can merge the new heading links
+      '& > :is(h2, [data-embed-type="copy-heading"])': {
+        marginBlockStart: "medium",
+        marginBlockEnd: "medium"
+      },
+      "& > h3": {
+        marginBlockStart: "small",
+        marginBlockEnd: "small"
+      },
+      '& > :is(p, h4, h5, h6, figure, ul, ol, dl, [data-embed-type="speech"])': {
+        marginBlockStart: "xsmall",
+        marginBlockEnd: "xsmall"
+      }
+    }
   },
+  // Adds default link styling to links without classes
   'a:not([class]):not([data-unstyled]), a[class=""]:not([data-unstyled])': {
     color: "text.link",
     textDecoration: "underline",

package/es/index.js

@@ -19,6 +19,7 @@ import { spacing } from "./spacing";
 import { fontWeights, textStyles, fonts, fontSizes, lineHeights } from "./typography";
 import { zIndex } from "./zIndex";
 const preset = definePreset({
+  name: "ndla/panda",
   globalCss: globalCss,
   conditions: conditions,
   theme: {

package/lib/globalCss.js

@@ -21,7 +21,8 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
     "--global-font-mono": "fonts.code"
   },
   html: {
-    minHeight: "100%"
+    minHeight: "100%",
+    fontFeatureSettings: "'ss03' on, 'liga' off, 'clig' off"
   },
   body: {
     background: "background.default"
@@ -44,38 +45,49 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
   "iframe#launcher": {
     display: "none"
   },
-  // TODO: Remove these again once they're no longer needed.
-  // Some text elements don't have a styling class, and therefor no margin. Handled with generic fallbacks in old global css, and now temporarily handled by these selectors.
-  "h1:not([class])": {
-    margin: "24px 0 12px 0"
-  },
-  "h2:not([class])": {
-    margin: "48px 0 12px 0"
-  },
-  "h3:not([class]), h4:not([class]), h5:not([class])": {
-    margin: "36px 0 6px 0"
-  },
-  "p:not([class])": {
-    marginBottom: "24px"
-  },
-  "blockquote:not([class])": {
-    margin: "30px 0"
-  },
-  h1: {
-    textStyle: "heading.medium"
-  },
-  h2: {
-    textStyle: "heading.small"
-  },
-  h3: {
-    textStyle: "title.large"
-  },
-  "h4, h5, h6": {
-    textStyle: "title.medium"
-  },
-  p: {
-    textStyle: "body.medium"
+  // For future readers: Life here would be much simpler if we could use flex.
+  // However, our usage of float within the article content forces us to use margins.
+  ".ndla-article": {
+    h1: {
+      textStyle: "heading.medium"
+    },
+    h2: {
+      textStyle: "heading.small"
+    },
+    h3: {
+      textStyle: "title.large"
+    },
+    "h4, h5, h6": {
+      textStyle: "title.medium"
+    },
+    textStyle: "body.article",
+    width: "100%",
+    // TODO: Re-check all margin values here. Especially headings.
+    // TODO: Reconsider grid margins. Do we want custom handling for items inside a grid?
+
+    // Non-figure block elements that should have margin above and below.
+    '& details, blockquote, [data-embed-type="framed-content"], [data-embed-type="factbox"], table, [data-embed-type="related-content-list"], [data-embed-type="link-block-list"], [data-embed-type="blog-post"], [data-embed-type="campaign-block"], [data-embed-type="key-figure"], [data-embed-type="grid"], [data-embed-type="contact-block"], [data-embed-type="file-list"], [data-embed-type="uu-disclaimer"]': {
+      marginBlockStart: "xsmall",
+      marginBlockEnd: "xsmall"
+    },
+    // Article content is usually wrapped in a section. The rest of the elements in this list contains other elements, and should add margin to them no matter where they are placed in the DOM.
+    '& section:not([class]), section:not([class]) > div:not([class]), [data-embed-type="framed-content"], [data-embed-type="grid"] > div, [data-embed-type="grid-parallax"] > div, [data-embed-type="factbox"] > div, [data-embed-type="copyright"], [data-embed-type="uu-disclaimer"], details, blockquote': {
+      // TODO: Remove copy-heading if we can merge the new heading links
+      '& > :is(h2, [data-embed-type="copy-heading"])': {
+        marginBlockStart: "medium",
+        marginBlockEnd: "medium"
+      },
+      "& > h3": {
+        marginBlockStart: "small",
+        marginBlockEnd: "small"
+      },
+      '& > :is(p, h4, h5, h6, figure, ul, ol, dl, [data-embed-type="speech"])': {
+        marginBlockStart: "xsmall",
+        marginBlockEnd: "xsmall"
+      }
+    }
   },
+  // Adds default link styling to links without classes
   'a:not([class]):not([data-unstyled]), a[class=""]:not([data-unstyled])': {
     color: "text.link",
     textDecoration: "underline",

package/lib/index.js

@@ -32,6 +32,7 @@ var _forwardCssPropPlugin = require("./plugins/forwardCssPropPlugin");
  */
 
 const preset = (0, _dev.definePreset)({
+  name: "ndla/panda",
   globalCss: _globalCss.globalCss,
   conditions: _conditions.conditions,
   theme: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/preset-panda",
-  "version": "0.0.13",
+  "version": "0.0.15",
   "description": "Panda preset for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,10 +31,10 @@
     "lib"
   ],
   "devDependencies": {
-    "@pandacss/dev": "^0.42.0"
+    "@pandacss/dev": "^0.44.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "35713120e2a004be81a62f17e29af74707b21dc4"
+  "gitHead": "0fdd094fea36baa5ee2bdfe5b2bc6c423d304f22"
 }