@ndla/preset-panda 0.0.28 → 0.0.30

package/dist/styles.css

@@ -82,25 +82,25 @@
   .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);
+    font-size: var(--font-sizes-large);
+    line-height: var(--line-heights-large);
 }
 
   .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);
+    font-size: calc(var(--font-sizes-large) * 1.11);
+    line-height: calc(var(--line-heights-large) * 1.11);
 }
 
   .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);
+    font-size: var(--font-sizes-medium);
+    line-height: var(--line-heights-small);
 }
 
   .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);
+    font-size: calc(var(--font-sizes-medium) * 1.11);
+    line-height: calc(var(--line-heights-small) * 1.11);
 }
 
   .ndla-article p[data-align="center"] {
@@ -117,17 +117,17 @@
 }
 
   .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-xxlarge);
-    margin-block-end: var(--spacing-medium);
+    margin-block-start: var(--spacing-xlarge);
+    margin-block-end: var(--spacing-small);
 }
 
   .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-xlarge);
-    margin-block-end: var(--spacing-small);
+    margin-block-start: var(--spacing-large);
+    margin-block-end: var(--spacing-xsmall);
 }
 
   .ndla-article section:not([class]) > :is(h4, h5, h6),.ndla-article section:not([class]) > div:not([class]) > :is(h4, h5, h6),.ndla-article [data-embed-type="framed-content"] > :is(h4, h5, h6),.ndla-article [data-embed-type="grid"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="grid-parallax"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="factbox"] > div > :is(h4, h5, h6),.ndla-article [data-embed-type="copyright"] > :is(h4, h5, h6),.ndla-article [data-embed-type="uu-disclaimer"] > :is(h4, h5, h6),.ndla-article details > :is(h4, h5, h6),.ndla-article blockquote > :is(h4, h5, h6) {
-    margin-block-start: var(--spacing-large);
+    margin-block-start: var(--spacing-medium);
     margin-block-end: var(--spacing-xsmall);
 }
 
@@ -166,6 +166,10 @@
     text-decoration: underline;
 }
 
+  a:not([class]):not([data-unstyled]):visited,a[class=""]:not([data-unstyled]):visited {
+    color: var(--colors-text-link-visited);
+}
+
   a:not([class]):not([data-unstyled]):is(:hover, [data-hover]),a[class=""]:not([data-unstyled]):is(:hover, [data-hover]) {
     text-decoration: none;
 }
@@ -519,7 +523,8 @@
     --colors-text-strong: var(--colors-primary);
     --colors-text-action: var(--colors-purple-800);
     --colors-text-on-action: var(--colors-white);
-    --colors-text-link: var(--colors-purple-900);
+    --colors-text-link: var(--colors-blue-800);
+    --colors-text-link-visited: var(--colors-purple-900);
     --colors-text-error: var(--colors-pink-800);
     --colors-text-disabled: var(--colors-grey-400);
     --colors-icon-default: var(--colors-grey-950);
@@ -560,6 +565,9 @@
     --colors-surface-action-hover: var(--colors-purple-900);
     --colors-surface-action-active: var(--colors-purple-950);
     --colors-surface-action-selected: var(--colors-purple-800);
+    --colors-surface-action-my-ndla: var(--colors-yellow-300);
+    --colors-surface-action-my-ndla-hover: var(--colors-yellow-500);
+    --colors-surface-action-my-ndla-current: var(--colors-yellow-700);
     --colors-surface-action-subtle: var(--colors-purple-50);
     --colors-surface-action-subtle-hover: var(--colors-purple-100);
     --colors-surface-action-subtle-hover-strong: var(--colors-purple-400);

package/es/globalCss.js

@@ -50,10 +50,10 @@ export const globalCss = defineGlobalStyles({
       textStyle: "heading.small"
     },
     h3: {
-      textStyle: "title.large"
+      textStyle: "title.medium"
     },
     "h4, h5, h6": {
-      textStyle: "title.medium"
+      textStyle: "title.small"
     },
     '& p[data-align="center"]': {
       textAlign: "center"
@@ -71,17 +71,17 @@ export const globalCss = defineGlobalStyles({
     // 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': {
       '& > :is(h2, [data-embed-type="copy-heading"])': {
-        marginBlockStart: "xxlarge",
-        marginBlockEnd: "medium"
-      },
-      "& > h3": {
         marginBlockStart: "xlarge",
         marginBlockEnd: "small"
       },
-      "& > :is(h4, h5, h6)": {
+      "& > h3": {
         marginBlockStart: "large",
         marginBlockEnd: "xsmall"
       },
+      "& > :is(h4, h5, h6)": {
+        marginBlockStart: "medium",
+        marginBlockEnd: "xsmall"
+      },
       "& > :is(figure)": {
         marginBlockStart: "xxlarge",
         marginBlockEnd: "xxlarge"
@@ -117,6 +117,9 @@ export const globalCss = defineGlobalStyles({
     textDecoration: "underline",
     _hover: {
       textDecoration: "none"
+    },
+    _visited: {
+      color: "text.linkVisited"
     }
   }
 });

package/es/semanticTokens.js

@@ -201,6 +201,9 @@ export const semanticTokens = defineSemanticTokens({
         value: "{colors.white}"
       },
       link: {
+        value: "{colors.blue.800}"
+      },
+      linkVisited: {
         value: "{colors.purple.900}"
       },
       error: {
@@ -343,6 +346,17 @@ export const semanticTokens = defineSemanticTokens({
         },
         selected: {
           value: "{colors.purple.800}"
+        },
+        myNdla: {
+          DEFAULT: {
+            value: "{colors.yellow.300}"
+          },
+          hover: {
+            value: "{colors.yellow.500}"
+          },
+          current: {
+            value: "{colors.yellow.700}"
+          }
         }
       },
       actionSubtle: {

package/lib/globalCss.js

@@ -56,10 +56,10 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
       textStyle: "heading.small"
     },
     h3: {
-      textStyle: "title.large"
+      textStyle: "title.medium"
     },
     "h4, h5, h6": {
-      textStyle: "title.medium"
+      textStyle: "title.small"
     },
     '& p[data-align="center"]': {
       textAlign: "center"
@@ -77,17 +77,17 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
     // 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': {
       '& > :is(h2, [data-embed-type="copy-heading"])': {
-        marginBlockStart: "xxlarge",
-        marginBlockEnd: "medium"
-      },
-      "& > h3": {
         marginBlockStart: "xlarge",
         marginBlockEnd: "small"
       },
-      "& > :is(h4, h5, h6)": {
+      "& > h3": {
         marginBlockStart: "large",
         marginBlockEnd: "xsmall"
       },
+      "& > :is(h4, h5, h6)": {
+        marginBlockStart: "medium",
+        marginBlockEnd: "xsmall"
+      },
       "& > :is(figure)": {
         marginBlockStart: "xxlarge",
         marginBlockEnd: "xxlarge"
@@ -123,6 +123,9 @@ const globalCss = exports.globalCss = (0, _dev.defineGlobalStyles)({
     textDecoration: "underline",
     _hover: {
       textDecoration: "none"
+    },
+    _visited: {
+      color: "text.linkVisited"
     }
   }
 });

package/lib/semanticTokens.d.ts

@@ -201,6 +201,9 @@ export declare const semanticTokens: {
             link: {
                 value: string;
             };
+            linkVisited: {
+                value: string;
+            };
             error: {
                 value: string;
             };
@@ -342,6 +345,17 @@ export declare const semanticTokens: {
                 selected: {
                     value: string;
                 };
+                myNdla: {
+                    DEFAULT: {
+                        value: string;
+                    };
+                    hover: {
+                        value: string;
+                    };
+                    current: {
+                        value: string;
+                    };
+                };
             };
             actionSubtle: {
                 DEFAULT: {

package/lib/semanticTokens.js

@@ -207,6 +207,9 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
         value: "{colors.white}"
       },
       link: {
+        value: "{colors.blue.800}"
+      },
+      linkVisited: {
         value: "{colors.purple.900}"
       },
       error: {
@@ -349,6 +352,17 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
         },
         selected: {
           value: "{colors.purple.800}"
+        },
+        myNdla: {
+          DEFAULT: {
+            value: "{colors.yellow.300}"
+          },
+          hover: {
+            value: "{colors.yellow.500}"
+          },
+          current: {
+            value: "{colors.yellow.700}"
+          }
         }
       },
       actionSubtle: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/preset-panda",
-  "version": "0.0.28",
+  "version": "0.0.30",
   "description": "Panda preset for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -37,5 +37,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "45c12a953606ca3eb14c8d09c25401c8bc24ed22"
+  "gitHead": "92e263c72d707da94f33fb1aae9ea8e586b29b6e"
 }