@ndla/preset-panda 0.0.18 → 0.0.19

package/dist/styles.css

@@ -523,7 +523,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 +532,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 +543,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/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

@@ -312,6 +312,9 @@ export const semanticTokens = defineSemanticTokens({
           value: "{colors.purple.900}"
         },
         active: {
+          value: "{colors.purple.950}"
+        },
+        selected: {
           value: "{colors.purple.800}"
         }
       },
@@ -341,8 +344,11 @@ export const semanticTokens = defineSemanticTokens({
         hover: {
           value: "{colors.green.900}"
         },
-        active: {
+        selected: {
           value: "{colors.green.950}"
+        },
+        active: {
+          value: "{colors.green.800}"
         }
       },
       successSubtle: {
@@ -380,9 +386,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/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

@@ -312,6 +312,9 @@ export declare const semanticTokens: {
                 active: {
                     value: string;
                 };
+                selected: {
+                    value: string;
+                };
             };
             actionSubtle: {
                 DEFAULT: {
@@ -339,6 +342,9 @@ export declare const semanticTokens: {
                 hover: {
                     value: string;
                 };
+                selected: {
+                    value: string;
+                };
                 active: {
                     value: string;
                 };
@@ -383,6 +389,9 @@ export declare const semanticTokens: {
                 hover: {
                     value: string;
                 };
+                selected: {
+                    value: string;
+                };
                 active: {
                     value: string;
                 };

package/lib/semanticTokens.js

@@ -318,6 +318,9 @@ const semanticTokens = exports.semanticTokens = (0, _dev.defineSemanticTokens)({
           value: "{colors.purple.900}"
         },
         active: {
+          value: "{colors.purple.950}"
+        },
+        selected: {
           value: "{colors.purple.800}"
         }
       },
@@ -347,8 +350,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 +392,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.19",
   "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": "62f2145f507c5365f8f5ed452de32ac43b11f155"
 }

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"
-};