@ndla/primitives 1.0.16-alpha.0 → 1.0.18-alpha.0

package/dist/panda.buildinfo.json

@@ -87,7 +87,7 @@
       "width]___[value:fit-content",
       "textStyle]___[value:label.medium",
       "color]___[value:text.default",
-      "backgroundColor]___[value:surface.brand.1.subtle",
+      "backgroundColor]___[value:surface.brand.1.moderate",
       "borderColor]___[value:surface.brand.1.strong",
       "backgroundColor]___[value:surface.brand.2.moderate",
       "borderColor]___[value:surface.brand.2.strong",
@@ -357,6 +357,7 @@
       "height]___[value:100%",
       "borderRadius]___[value:small",
       "backgroundColor]___[value:surface.default",
+      "backgroundColor]___[value:surface.brand.1.subtle",
       "backgroundColor]___[value:surface.brand.2.subtle",
       "height]___[value:350px",
       "zIndex]___[value:hide",
@@ -367,7 +368,6 @@
       "background]___[value:surface.brand.2",
       "background]___[value:surface.brand.1",
       "background]___[value:surface.infoSubtle",
-      "background]___[value:surface.brand.4",
       "flexWrap]___[value:wrap",
       "alignItems]___[value:flex-end",
       "paddingBlockStart]___[value:xxlarge]___[cond:tablet",
@@ -611,12 +611,16 @@
       "zIndex]___[value:var(--z-index)",
       "transitionDuration]___[value:slow",
       "transitionProperty]___[value:translate, scale, opacity, height",
+      "background]___[value:surface.brand.1.moderate",
+      "background]___[value:surface.brand.1.strong",
       "paddingInlineEnd]___[value:xxlarge",
       "top]___[value:xxsmall",
       "right]___[value:xxsmall",
       "--arrow-size]___[value:spacing.xxsmall",
       "--arrow-background]___[value:colors.surface.action",
       "height]___[value:200px",
+      "gap]___[value:xxlarge",
+      "gap]___[value:medium",
       "transitionDuration]___[value:default",
       "gridColumnGap]___[value:var(--gutter, 0)",
       "gridTemplateColumns]___[value:1fr min(var(--size), calc(100% - (var(--gutter, 0) * 2))) 1fr",

package/dist/styles.css

@@ -641,10 +641,6 @@
     background: var(--colors-surface-info-subtle);
 }
 
-  .bg_surface\.brand\.4 {
-    background: var(--colors-surface-brand-4);
-}
-
   .ring_1px_solid {
     outline: 1px solid;
 }
@@ -897,6 +893,14 @@
     z-index: var(--z-index);
 }
 
+  .bg_surface\.brand\.1\.moderate {
+    background: var(--colors-surface-brand-1-moderate);
+}
+
+  .bg_surface\.brand\.1\.strong {
+    background: var(--colors-surface-brand-1-strong);
+}
+
   .pe_xxlarge {
     padding-inline-end: var(--spacing-xxlarge);
 }
@@ -913,6 +917,14 @@
     height: 200px;
 }
 
+  .gap_xxlarge {
+    gap: var(--spacing-xxlarge);
+}
+
+  .gap_medium {
+    gap: var(--spacing-medium);
+}
+
   .\--size_sizes\.surface\.contentMax {
     --size: var(--sizes-surface-content-max);
 }
@@ -1063,8 +1075,8 @@
     border-color: var(--colors-stroke-default);
 }
 
-  .bg-c_surface\.brand\.1\.subtle {
-    background-color: var(--colors-surface-brand-1-subtle);
+  .bg-c_surface\.brand\.1\.moderate {
+    background-color: var(--colors-surface-brand-1-moderate);
 }
 
   .bd-c_surface\.brand\.1\.strong {
@@ -1176,6 +1188,10 @@
     background-color: var(--colors-surface-default);
 }
 
+  .bg-c_surface\.brand\.1\.subtle {
+    background-color: var(--colors-surface-brand-1-subtle);
+}
+
   .bg-c_surface\.brand\.2\.subtle {
     background-color: var(--colors-surface-brand-2-subtle);
 }

package/es/Badge.js

@@ -26,7 +26,7 @@ const badgeRecipe = cva({
   variants: {
     colorTheme: {
       brand1: {
-        backgroundColor: "surface.brand.1.subtle",
+        backgroundColor: "surface.brand.1.moderate",
         borderColor: "surface.brand.1.strong"
       },
       brand2: {

package/es/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,80 @@
+/**
+ * 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.
+ *
+ */
+
+import { forwardRef } from "react";
+import { ark } from "@ark-ui/react";
+import { sva } from "@ndla/styled-system/css";
+import { createStyleContext } from "../createStyleContext";
+import { Heading, Text } from "../Text";
+import { jsx as _jsx } from "react/jsx-runtime";
+const errorMessageRecipe = sva({
+  slots: ["root", "content", "actions", "title", "description"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "xxlarge",
+      alignItems: "center"
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "medium",
+      alignItems: "center"
+    },
+    actions: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "xsmall",
+      alignItems: "center"
+    },
+    title: {
+      textAlign: "center"
+    },
+    description: {
+      textAlign: "center"
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = createStyleContext(errorMessageRecipe);
+export const ErrorMessageRoot = withProvider(ark.article, "root", {
+  baseComponent: true
+});
+export const ErrorMessageContent = withContext(ark.div, "content", {
+  baseComponent: true
+});
+export const ErrorMessageActions = withContext(ark.div, "actions", {
+  baseComponent: true
+});
+const InternalErrorMessageTitle = /*#__PURE__*/forwardRef((_ref, ref) => {
+  let {
+    textStyle = "heading.small",
+    ...props
+  } = _ref;
+  return /*#__PURE__*/_jsx(Heading, {
+    textStyle: textStyle,
+    ...props,
+    ref: ref
+  });
+});
+export const ErrorMessageTitle = withContext(InternalErrorMessageTitle, "title");
+const InternalErrorMessageDescription = /*#__PURE__*/forwardRef((_ref2, ref) => {
+  let {
+    textStyle = "body.xlarge",
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/_jsx(Text, {
+    textStyle: textStyle,
+    ...props,
+    ref: ref
+  });
+});
+export const ErrorMessageDescription = withContext(InternalErrorMessageDescription, "description");

package/es/Hero.js

@@ -54,7 +54,7 @@ const heroRecipe = sva({
           color: "text.onAction"
         }
       },
-      brand2Strong: {
+      brand2Bold: {
         background: {
           background: "surface.brand.2.bold"
         },
@@ -81,12 +81,6 @@ const heroRecipe = sva({
         background: {
           background: "surface.infoSubtle"
         }
-      },
-      brand4: {
-        background: {
-          // TODO: This needs a proper color...
-          background: "surface.brand.4"
-        }
       }
     }
   }

package/es/Toast.js

@@ -16,8 +16,6 @@ const toastRecipe = sva({
   base: {
     root: {
       position: "relative",
-      background: "surface.action",
-      color: "text.onAction",
       borderRadius: "xsmall",
       boxShadow: "medium",
       minWidth: "20rem",
@@ -49,6 +47,25 @@ const toastRecipe = sva({
     description: {
       paddingInlineEnd: "xxlarge"
     }
+  },
+  defaultVariants: {
+    variant: "light"
+  },
+  variants: {
+    variant: {
+      light: {
+        root: {
+          background: "surface.brand.1.moderate",
+          color: "text.default"
+        }
+      },
+      dark: {
+        root: {
+          background: "surface.brand.1.strong",
+          color: "text.onAction"
+        }
+      }
+    }
   }
 });
 const {

package/lib/Badge.d.ts

@@ -11,7 +11,7 @@ import { JsxStyleProps } from "@ndla/styled-system/types";
 declare const badgeRecipe: import("@ndla/styled-system/types").RecipeRuntimeFn<{
     colorTheme: {
         brand1: {
-            backgroundColor: "surface.brand.1.subtle";
+            backgroundColor: "surface.brand.1.moderate";
             borderColor: "surface.brand.1.strong";
         };
         brand2: {

package/lib/Badge.js

@@ -32,7 +32,7 @@ const badgeRecipe = (0, _css.cva)({
   variants: {
     colorTheme: {
       brand1: {
-        backgroundColor: "surface.brand.1.subtle",
+        backgroundColor: "surface.brand.1.moderate",
         borderColor: "surface.brand.1.strong"
       },
       brand2: {

package/lib/ErrorMessage/ErrorMessage.d.ts

@@ -0,0 +1,23 @@
+/**
+ * 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.
+ *
+ */
+import { TextProps } from "../Text";
+export declare const ErrorMessageRoot: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLElement>>;
+export declare const ErrorMessageContent: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ErrorMessageActions: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & import("react").RefAttributes<HTMLDivElement>>;
+export declare const ErrorMessageTitle: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & TextProps & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const ErrorMessageDescription: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {
+    consumeCss?: boolean | undefined;
+} & import("@ndla/styled-system/types").WithCss & TextProps & import("react").RefAttributes<HTMLParagraphElement>>;

package/lib/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,86 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorMessageTitle = exports.ErrorMessageRoot = exports.ErrorMessageDescription = exports.ErrorMessageContent = exports.ErrorMessageActions = void 0;
+var _react = require("react");
+var _react2 = require("@ark-ui/react");
+var _css = require("@ndla/styled-system/css");
+var _createStyleContext = require("../createStyleContext");
+var _Text = require("../Text");
+var _jsxRuntime = require("react/jsx-runtime");
+/**
+ * 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 errorMessageRecipe = (0, _css.sva)({
+  slots: ["root", "content", "actions", "title", "description"],
+  base: {
+    root: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "xxlarge",
+      alignItems: "center"
+    },
+    content: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "medium",
+      alignItems: "center"
+    },
+    actions: {
+      display: "flex",
+      flexDirection: "column",
+      gap: "xsmall",
+      alignItems: "center"
+    },
+    title: {
+      textAlign: "center"
+    },
+    description: {
+      textAlign: "center"
+    }
+  }
+});
+const {
+  withProvider,
+  withContext
+} = (0, _createStyleContext.createStyleContext)(errorMessageRecipe);
+const ErrorMessageRoot = exports.ErrorMessageRoot = withProvider(_react2.ark.article, "root", {
+  baseComponent: true
+});
+const ErrorMessageContent = exports.ErrorMessageContent = withContext(_react2.ark.div, "content", {
+  baseComponent: true
+});
+const ErrorMessageActions = exports.ErrorMessageActions = withContext(_react2.ark.div, "actions", {
+  baseComponent: true
+});
+const InternalErrorMessageTitle = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    textStyle = "heading.small",
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Heading, {
+    textStyle: textStyle,
+    ...props,
+    ref: ref
+  });
+});
+const ErrorMessageTitle = exports.ErrorMessageTitle = withContext(InternalErrorMessageTitle, "title");
+const InternalErrorMessageDescription = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    textStyle = "body.xlarge",
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.Text, {
+    textStyle: textStyle,
+    ...props,
+    ref: ref
+  });
+});
+const ErrorMessageDescription = exports.ErrorMessageDescription = withContext(InternalErrorMessageDescription, "description");

package/lib/Hero.d.ts

@@ -25,7 +25,7 @@ declare const heroRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeF
                 color: "text.onAction";
             };
         };
-        brand2Strong: {
+        brand2Bold: {
             background: {
                 background: "surface.brand.2.bold";
             };
@@ -53,11 +53,6 @@ declare const heroRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeF
                 background: "surface.infoSubtle";
             };
         };
-        brand4: {
-            background: {
-                background: "surface.brand.4";
-            };
-        };
     };
 }>;
 export type HeroVariantProps = RecipeVariantProps<typeof heroRecipe>;
@@ -67,7 +62,7 @@ export declare const Hero: import("react").ForwardRefExoticComponent<Omit<import
     consumeCss?: boolean | undefined;
 } & import("@ndla/styled-system/types").WithCss & {
     absolute?: boolean | undefined;
-    variant?: "primary" | "neutral" | "brand1" | "brand2" | "brand2Strong" | "brand1Subtle" | "brand4" | undefined;
+    variant?: "primary" | "neutral" | "brand1" | "brand2" | "brand2Bold" | "brand1Subtle" | undefined;
 } & import("react").RefAttributes<HTMLDivElement>>;
 export type HeroBackgroundProps = HTMLArkProps<"div"> & JsxStyleProps;
 export declare const HeroBackground: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & import("@ark-ui/react").PolymorphicProps & {

package/lib/Hero.js

@@ -60,7 +60,7 @@ const heroRecipe = (0, _css.sva)({
           color: "text.onAction"
         }
       },
-      brand2Strong: {
+      brand2Bold: {
         background: {
           background: "surface.brand.2.bold"
         },
@@ -87,12 +87,6 @@ const heroRecipe = (0, _css.sva)({
         background: {
           background: "surface.infoSubtle"
         }
-      },
-      brand4: {
-        background: {
-          // TODO: This needs a proper color...
-          background: "surface.brand.4"
-        }
       }
     }
   }

package/lib/Toast.d.ts

@@ -6,9 +6,26 @@
  *
  */
 import { Toast } from "@ark-ui/react";
-import { JsxStyleProps } from "@ndla/styled-system/types";
+import { JsxStyleProps, RecipeVariantProps } from "@ndla/styled-system/types";
 import { TextProps } from "./Text";
-export interface ToastRootProps extends Toast.RootProps, JsxStyleProps {
+declare const toastRecipe: import("@ndla/styled-system/types").SlotRecipeRuntimeFn<"title" | "description" | "group" | "root" | "closeTrigger" | "actionTrigger", {
+    variant: {
+        light: {
+            root: {
+                background: "surface.brand.1.moderate";
+                color: "text.default";
+            };
+        };
+        dark: {
+            root: {
+                background: "surface.brand.1.strong";
+                color: "text.onAction";
+            };
+        };
+    };
+}>;
+export type ToastRootVariantProps = NonNullable<RecipeVariantProps<typeof toastRecipe>>;
+export interface ToastRootProps extends Toast.RootProps, JsxStyleProps, ToastRootVariantProps {
 }
 export declare const ToastRoot: import("react").ForwardRefExoticComponent<ToastRootProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const ToastActionTrigger: import("react").ForwardRefExoticComponent<{
@@ -19,3 +36,4 @@ export declare const ToastCloseTrigger: import("react").ForwardRefExoticComponen
 } & import("@ndla/styled-system/types").WithCss & Toast.CloseTriggerProps & import("react").RefAttributes<HTMLDivElement>>;
 export declare const ToastDescription: ({ textStyle, children, ...props }: Toast.DescriptionProps & TextProps & JsxStyleProps) => import("react/jsx-runtime").JSX.Element;
 export declare const ToastTitle: ({ textStyle, fontWeight, children, ...props }: JsxStyleProps & Toast.TitleProps & TextProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/lib/Toast.js

@@ -22,8 +22,6 @@ const toastRecipe = (0, _css.sva)({
   base: {
     root: {
       position: "relative",
-      background: "surface.action",
-      color: "text.onAction",
       borderRadius: "xsmall",
       boxShadow: "medium",
       minWidth: "20rem",
@@ -55,6 +53,25 @@ const toastRecipe = (0, _css.sva)({
     description: {
       paddingInlineEnd: "xxlarge"
     }
+  },
+  defaultVariants: {
+    variant: "light"
+  },
+  variants: {
+    variant: {
+      light: {
+        root: {
+          background: "surface.brand.1.moderate",
+          color: "text.default"
+        }
+      },
+      dark: {
+        root: {
+          background: "surface.brand.1.strong",
+          color: "text.onAction"
+        }
+      }
+    }
   }
 });
 const {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ndla/primitives",
-  "version": "1.0.16-alpha.0",
+  "version": "1.0.18-alpha.0",
   "description": "Primitive components for NDLA.",
   "license": "GPL-3.0",
   "main": "lib/index.js",
@@ -29,11 +29,11 @@
   ],
   "dependencies": {
     "@ark-ui/react": "^3.9.0",
-    "@ndla/styled-system": "^0.0.14",
+    "@ndla/styled-system": "^0.0.16",
     "@ndla/util": "^4.1.0"
   },
   "devDependencies": {
-    "@ndla/preset-panda": "^0.0.22",
+    "@ndla/preset-panda": "^0.0.24",
     "@pandacss/dev": "^0.45.2"
   },
   "peerDependencies": {
@@ -43,5 +43,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "a8a6f11eab7a7a254fff6fb062289dc413035d81"
+  "gitHead": "66b3b382188ec1730fa409d4adb3672942f00670"
 }