@ndla/preset-panda 0.0.18 → 0.0.20

package/dist/styles.css

@@ -439,7 +439,7 @@
     --spacing-xsmall: var(--spacing-6);
     --spacing-small: var(--spacing-8);
     --spacing-medium: var(--spacing-12);
-    --spacing-large: var(--spacing-15);
+    --spacing-large: var(--spacing-16);
     --spacing-xlarge: var(--spacing-18);
     --spacing-xxlarge: var(--spacing-24);
     --spacing-3xlarge: var(--spacing-36);
@@ -461,7 +461,7 @@
     --sizes-xsmall: var(--spacing-6);
     --sizes-small: var(--spacing-8);
     --sizes-medium: var(--spacing-12);
-    --sizes-large: var(--spacing-15);
+    --sizes-large: var(--spacing-16);
     --sizes-xlarge: var(--spacing-18);
     --sizes-xxlarge: var(--spacing-24);
     --sizes-3xlarge: var(--spacing-36);
@@ -498,6 +498,7 @@
     --colors-surface-brand-2: var(--colors-blue-500);
     --colors-surface-brand-2-subtle: var(--colors-blue-50);
     --colors-surface-brand-2-moderate: var(--colors-blue-100);
+    --colors-surface-brand-2-bold: var(--colors-blue-800);
     --colors-surface-brand-2-strong: var(--colors-blue-900);
     --colors-surface-brand-3: var(--colors-green-500);
     --colors-surface-brand-3-subtle: var(--colors-green-100);
@@ -523,7 +524,8 @@
     --colors-surface-info-subtle-active: var(--colors-grey-300);
     --colors-surface-action: var(--colors-primary);
     --colors-surface-action-hover: var(--colors-purple-900);
-    --colors-surface-action-active: var(--colors-purple-800);
+    --colors-surface-action-active: var(--colors-purple-950);
+    --colors-surface-action-selected: var(--colors-purple-800);
     --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);
@@ -531,7 +533,8 @@
     --colors-surface-action-subtle-selected: var(--colors-purple-900);
     --colors-surface-success: var(--colors-green-800);
     --colors-surface-success-hover: var(--colors-green-900);
-    --colors-surface-success-active: var(--colors-green-950);
+    --colors-surface-success-selected: var(--colors-green-950);
+    --colors-surface-success-active: var(--colors-green-800);
     --colors-surface-success-subtle: var(--colors-green-100);
     --colors-surface-success-subtle-hover: var(--colors-green-300);
     --colors-surface-success-subtle-active: var(--colors-green-500);
@@ -541,8 +544,9 @@
     --colors-surface-warning-subtle: var(--colors-yellow-100);
     --colors-surface-warning-subtle-hover: var(--colors-yellow-300);
     --colors-surface-warning-subtle-active: var(--colors-yellow-400);
-    --colors-surface-danger: var(--colors-pink-800);
-    --colors-surface-danger-hover: var(--colors-pink-900);
+    --colors-surface-danger: var(--colors-pink-700);
+    --colors-surface-danger-hover: var(--colors-pink-800);
+    --colors-surface-danger-selected: var(--colors-pink-900);
     --colors-surface-danger-active: var(--colors-pink-950);
     --colors-surface-danger-subtle: var(--colors-pink-100);
     --colors-surface-danger-subtle-hover: var(--colors-pink-300);

package/es/globalCss.js

@@ -63,7 +63,6 @@ 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': {
-      // TODO: Remove copy-heading if we can merge the new heading links
       '& > :is(h2, [data-embed-type="copy-heading"])': {
         marginBlockStart: "xxlarge",
         marginBlockEnd: "medium"

package/es/index.js

@@ -7,9 +7,9 @@
  */
 
 import { definePreset } from "@pandacss/dev";
+import { breakpoints } from "@ndla/core";
 import { animations, durations, easings, keyframes } from "./animations";
 import { boxShadows } from "./boxShadows";
-import { breakpoints } from "./breakpoints";
 import { colors } from "./colors";
 import { conditions } from "./conditions";
 import { globalCss } from "./globalCss";

package/es/semanticTokens.js

@@ -28,7 +28,7 @@ export const semanticTokens = defineSemanticTokens({
       value: "{spacing.12}"
     },
     large: {
-      value: "{spacing.15}"
+      value: "{spacing.16}"
     },
     xlarge: {
       value: "{spacing.18}"
@@ -98,7 +98,7 @@ export const semanticTokens = defineSemanticTokens({
       value: "{spacing.12}"
     },
     large: {
-      value: "{spacing.15}"
+      value: "{spacing.16}"
     },
     xlarge: {
       value: "{spacing.18}"
@@ -223,6 +223,9 @@ export const semanticTokens = defineSemanticTokens({
           moderate: {
             value: "{colors.blue.100}"
           },
+          bold: {
+            value: "{colors.blue.800}"
+          },
           strong: {
             value: "{colors.blue.900}"
           }
@@ -312,6 +315,9 @@ export const semanticTokens = defineSemanticTokens({
           value: "{colors.purple.900}"
         },
         active: {
+          value: "{colors.purple.950}"
+        },
+        selected: {
           value: "{colors.purple.800}"
         }
       },
@@ -341,8 +347,11 @@ export const semanticTokens = defineSemanticTokens({
         hover: {
           value: "{colors.green.900}"
         },
-        active: {
+        selected: {
           value: "{colors.green.950}"
+        },
+        active: {
+          value: "{colors.green.800}"
         }
       },
       successSubtle: {
@@ -380,9 +389,12 @@ export const semanticTokens = defineSemanticTokens({
       },
       danger: {
         DEFAULT: {
-          value: "{colors.pink.800}"
+          value: "{colors.pink.700}"
         },
         hover: {
+          value: "{colors.pink.800}"
+        },
+        selected: {
           value: "{colors.pink.900}"
         },
         active: {

package/lib/globalCss.js

@@ -69,7 +69,6 @@ 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': {
-      // TODO: Remove copy-heading if we can merge the new heading links
       '& > :is(h2, [data-embed-type="copy-heading"])': {
         marginBlockStart: "xxlarge",
         marginBlockEnd: "medium"

package/lib/index.js

@@ -11,9 +11,9 @@ Object.defineProperty(exports, "forwardCssPropPlugin", {
   }
 });
 var _dev = require("@pandacss/dev");
+var _core = require("@ndla/core");
 var _animations = require("./animations");
 var _boxShadows = require("./boxShadows");
-var _breakpoints = require("./breakpoints");
 var _colors = require("./colors");
 var _conditions = require("./conditions");
 var _globalCss = require("./globalCss");
@@ -36,7 +36,7 @@ const preset = (0, _dev.definePreset)({
   globalCss: _globalCss.globalCss,
   conditions: _conditions.conditions,
   theme: {
-    breakpoints: _breakpoints.breakpoints,
+    breakpoints: _core.breakpoints,
     textStyles: _typography.textStyles,
     keyframes: _animations.keyframes,
     tokens: {

package/lib/semanticTokens.d.ts

@@ -221,6 +221,9 @@ export declare const semanticTokens: {
                     moderate: {
                         value: string;
                     };
+                    bold: {
+                        value: string;
+                    };
                     strong: {
                         value: string;
                     };
@@ -312,6 +315,9 @@ export declare const semanticTokens: {
                 active: {
                     value: string;
                 };
+                selected: {
+                    value: string;
+                };
             };
             actionSubtle: {
                 DEFAULT: {
@@ -339,6 +345,9 @@ export declare const semanticTokens: {
                 hover: {
                     value: string;
                 };
+                selected: {
+                    value: string;
+                };
                 active: {
                     value: string;
                 };
@@ -383,6 +392,9 @@ export declare const semanticTokens: {
                 hover: {
                     value: string;
                 };
+                selected: {
+                    value: string;
+                };
                 active: {
                     value: string;
                 };

package/lib/semanticTokens.js

@@ -34,7 +34,7 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
       value: "{spacing.12}"
     },
     large: {
-      value: "{spacing.15}"
+      value: "{spacing.16}"
     },
     xlarge: {
       value: "{spacing.18}"
@@ -104,7 +104,7 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
       value: "{spacing.12}"
     },
     large: {
-      value: "{spacing.15}"
+      value: "{spacing.16}"
     },
     xlarge: {
       value: "{spacing.18}"
@@ -229,6 +229,9 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
           moderate: {
             value: "{colors.blue.100}"
           },
+          bold: {
+            value: "{colors.blue.800}"
+          },
           strong: {
             value: "{colors.blue.900}"
           }
@@ -318,6 +321,9 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
           value: "{colors.purple.900}"
         },
         active: {
+          value: "{colors.purple.950}"
+        },
+        selected: {
           value: "{colors.purple.800}"
         }
       },
@@ -347,8 +353,11 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
         hover: {
           value: "{colors.green.900}"
         },
-        active: {
+        selected: {
           value: "{colors.green.950}"
+        },
+        active: {
+          value: "{colors.green.800}"
         }
       },
       successSubtle: {
@@ -386,9 +395,12 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
       },
       danger: {
         DEFAULT: {
-          value: "{colors.pink.800}"
+          value: "{colors.pink.700}"
         },
         hover: {
+          value: "{colors.pink.800}"
+        },
+        selected: {
           value: "{colors.pink.900}"
         },
         active: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/preset-panda",
-  "version": "0.0.18",
+  "version": "0.0.20",
   "description": "Panda preset for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -31,10 +31,11 @@
     "lib"
   ],
   "devDependencies": {
+    "@ndla/core": "^5.0.2",
     "@pandacss/dev": "^0.44.0"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1f5266d080c8cc172af46980cea7a451cfa12b28"
+  "gitHead": "4708656585c922a4b2c2e30b095f88097c29436b"
 }

package/es/breakpoints.js

@@ -1,17 +0,0 @@
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-export const breakpoints = {
-  mobile: "20em",
-  mobileWide: "29.75em",
-  tablet: "37.5625em",
-  tabletWide: "48em",
-  desktop: "61.3125em",
-  wide: "81.3125em",
-  ultraWide: "100.0625em"
-};

package/lib/breakpoints.d.ts

@@ -1,16 +0,0 @@
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-export declare const breakpoints: {
-    mobile: string;
-    mobileWide: string;
-    tablet: string;
-    tabletWide: string;
-    desktop: string;
-    wide: string;
-    ultraWide: string;
-};

package/lib/breakpoints.js

@@ -1,23 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.breakpoints = void 0;
-/**
- * Copyright (c) 2024-present, NDLA.
- *
- * This source code is licensed under the GPLv3 license found in the
- * LICENSE file in the root directory of this source tree.
- *
- */
-
-const breakpoints = exports.breakpoints = {
-  mobile: "20em",
-  mobileWide: "29.75em",
-  tablet: "37.5625em",
-  tabletWide: "48em",
-  desktop: "61.3125em",
-  wide: "81.3125em",
-  ultraWide: "100.0625em"
-};