@obosbbl/grunnmuren-react 2.0.0-canary.36 → 2.0.0-canary.37

package/dist/index.mjs

@@ -105,7 +105,7 @@ function AccordionItem(props, ref) {
     };
     return /*#__PURE__*/ jsx("div", {
         ...restProps,
-        className: cx('group relative px-2', className),
+        className: cx('relative px-2', className),
         ref: ref,
         "data-open": isOpen,
         children: /*#__PURE__*/ jsx(Provider, {
@@ -121,7 +121,7 @@ function AccordionItem(props, ref) {
                                 "aria-controls": contentId,
                                 "aria-expanded": isOpen,
                                 // Use outline with offset as focus indicator, this does not cover the left mint border on the expanded content and works with or without a background color on the accordion container
-                                className: "flex min-h-[44px] w-full items-center justify-between gap-1.5 rounded-lg px-2 py-3.5 text-left focus-visible:outline focus-visible:outline-4 focus-visible:outline-offset-[-6px] focus-visible:outline-black",
+                                className: "flex min-h-[44px] w-full items-center justify-between gap-1.5 rounded-lg px-2 py-3.5 text-left focus-visible:outline-focus focus-visible:outline-focus-inset",
                                 id: buttonId,
                                 onClick: handleOpenChange,
                                 children: [
@@ -198,7 +198,7 @@ const _Badge = /*#__PURE__*/ forwardRef(Badge);
  * Figma: https://www.figma.com/file/9OvSg0ZXI5E1eQYi7AWiWn/Grunnmuren-2.0-%E2%94%82-Designsystem?node-id=30%3A2574&mode=dev
  */ const buttonVariants = cva({
     base: [
-        'inline-flex min-h-[44px] cursor-pointer items-center justify-center whitespace-nowrap rounded-lg font-medium transition-all duration-200 focus:outline-none data-[focus-visible]:ring-2 data-[focus-visible]:ring-offset-2'
+        'inline-flex min-h-[44px] cursor-pointer items-center justify-center whitespace-nowrap rounded-lg font-medium transition-colors duration-200 focus-visible:outline-focus-offset'
     ],
     variants: {
         /**
@@ -214,9 +214,9 @@ const _Badge = /*#__PURE__*/ forwardRef(Badge);
      * Adjusts the color of the button for usage on different backgrounds.
      * @default green
      */ color: {
-            green: 'focus-visible:ring-black',
-            mint: 'focus-visible:ring-mint focus-visible:ring-offset-green-dark',
-            white: 'focus-visible:ring-white focus-visible:ring-offset-blue'
+            green: 'focus-visible:outline-focus',
+            mint: 'focus-visible:outline-focus focus-visible:outline-mint',
+            white: 'focus-visible:outline-focus focus-visible:outline-white'
         },
         /**
      * When the button is without text, but with a single icon.
@@ -340,15 +340,15 @@ const input = cva({
         'box-content min-h-6 py-2.5',
         'rounded-md text-base font-normal leading-6 placeholder-[#727070] outline-none ring-1 ring-black',
         // invalid styles
-        'group-data-[invalid]:ring-2 group-data-[invalid]:ring-red',
+        'group-data-[invalid]:ring-focus group-data-[invalid]:ring-red',
         // Fix invisible ring on safari: https://github.com/tailwindlabs/tailwindcss.com/issues/1135
         'appearance-none'
     ],
     variants: {
         // Focus rings. Can either be :focus or :focus-visible based on the needs of the particular component.
         focusModifier: {
-            focus: 'focus:ring-2 group-data-[invalid]:focus:ring',
-            visible: 'data-[focus-visible]:ring-2 group-data-[invalid]:data-[focus-visible]:ring'
+            focus: 'focus:ring-focus group-data-[invalid]:focus:ring',
+            visible: 'data-[focus-visible]:ring-focus group-data-[invalid]:data-[focus-visible]:ring'
         },
         isGrouped: {
             false: 'px-3',
@@ -361,8 +361,8 @@ const input = cva({
     }
 });
 const inputGroup = cx([
-    'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-2',
-    'group-data-[invalid]:ring-2 group-data-[invalid]:ring-red group-data-[invalid]:focus-within:ring'
+    'inline-flex items-center gap-3 overflow-hidden rounded-md bg-white px-3 text-base ring-1 ring-black focus-within:ring-focus',
+    'group-data-[invalid]:ring-focus group-data-[invalid]:ring-red group-data-[invalid]:focus-within:ring'
 ]);
 const dropdown = {
     popover: cx('min-w-[--trigger-width] overflow-y-auto rounded-md border border-black bg-white shadow data-[entering]:animate-in data-[exiting]:animate-out data-[entering]:fade-in data-[exiting]:fade-out'),
@@ -398,7 +398,7 @@ function CheckmarkBox() {
             // selected
             'group-data-[selected]:!border-green group-data-[selected]:!bg-green',
             // focus
-            'group-data-[focus-visible]:ring-2 group-data-[focus-visible]:ring-black group-data-[focus-visible]:ring-offset-[9px]',
+            'group-data-[focus-visible]:outline-focus-offset',
             // hovered
             'group-data-[hovered]:border-green group-data-[hovered]:group-data-[invalid]:border-red group-data-[hovered]:bg-green-lightest group-data-[hovered]:group-data-[invalid]:bg-red-light',
             // invalid - The border is 1 px thicker when invalid. We don't actually want to change the border width, as that causes the element's size to change
@@ -635,7 +635,7 @@ const defaultClasses = cx([
     // hover
     'data-[hovered]:before:border-green data-[hovered]:before:bg-green-lightest data-[hovered]:data-[invalid]:before:bg-red-light',
     // focus
-    'data-[focus-visible]:before:ring data-[focus-visible]:before:ring-black data-[focus-visible]:before:ring-offset-[9px]',
+    'data-[focus-visible]:before:ring-focus-offset',
     // invalid - The border is 1 px thicker when invalid. We don't actually want to change the border width, as that causes the element's size to change
     // so we use an inner outline to artifically pad the border
     'data-[invalid]:before:outline-solid data-[invalid]:before:border-red data-[invalid]:data-[selected]:before:!bg-red data-[invalid]:before:outline data-[invalid]:before:outline-[3px] data-[invalid]:before:outline-offset-[-3px] data-[invalid]:before:outline-red'
@@ -946,14 +946,14 @@ const Alertbox = ({ children, role, className, variant = 'info', isDismissable =
             /*#__PURE__*/ jsx(Icon, {}),
             firstChild,
             isDismissable && /*#__PURE__*/ jsx("button", {
-                className: cx('-m-2 grid h-11 w-11 place-items-center rounded-xl', 'focus-visible:outline-none focus-visible:-outline-offset-8 focus-visible:outline-black'),
+                className: cx('-m-2 grid h-11 w-11 place-items-center rounded-xl', 'focus-visible:outline-focus focus-visible:-outline-offset-8'),
                 onClick: close,
                 "aria-label": translations.close[locale],
                 children: /*#__PURE__*/ jsx(Close, {})
             }),
             isExpandable && /*#__PURE__*/ jsxs("button", {
                 className: cx('relative col-span-full row-start-2 -my-3 inline-flex max-w-fit cursor-pointer items-center gap-1 py-3 text-sm leading-6', // Focus styles:
-                'outline-none after:absolute after:bottom-3 after:left-0 after:right-0 after:h-0 after:bg-transparent after:transition-all after:duration-200', 'focus-visible:after:h-[2px] focus-visible:after:bg-black'),
+                'outline-none after:absolute after:bottom-3 after:left-0 after:right-0 after:h-0', 'focus-visible:after:h-[2px] focus-visible:after:bg-black'),
                 onClick: ()=>setIsExpanded((prevState)=>!prevState),
                 "aria-expanded": isExpanded,
                 "aria-controls": id,
@@ -995,7 +995,7 @@ function Breadcrumb(props, ref) {
             href ? /*#__PURE__*/ jsx(Link, {
                 href: href,
                 // use outline instead of ring for focus marker that can be offset without creating a white background between the focus marker and the element content
-                className: "rounded-sm focus:outline-none group-last:no-underline data-[focus-visible]:outline data-[focus-visible]:outline-offset-2 data-[focus-visible]:outline-black",
+                className: "rounded-sm data-[focus-visible]:focus-visible:outline-focus focus:outline-none group-last:no-underline",
                 children: children
             }) : children,
             /*#__PURE__*/ jsx(ChevronRight, {
@@ -1013,7 +1013,7 @@ function Backlink(props, ref) {
     const { className, children, withUnderline, ...restProps } = props;
     const Component = isLinkProps(props) ? Link : Button$1;
     return /*#__PURE__*/ jsxs(Component, {
-        className: cx(className, 'group flex max-w-fit cursor-pointer items-center gap-3 rounded-md p-2.5 no-underline focus:outline-none data-[focus-visible]:ring data-[focus-visible]:ring-black'),
+        className: cx(className, 'group flex max-w-fit cursor-pointer items-center gap-3 rounded-md p-2.5 no-underline focus-visible:outline-focus'),
         ...restProps,
         // @ts-expect-error ignore the type of the ref here
         ref: ref,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@obosbbl/grunnmuren-react",
-  "version": "2.0.0-canary.36",
+  "version": "2.0.0-canary.37",
   "description": "Grunnmuren components in React",
   "repository": {
     "url": "https://github.com/code-obos/grunnmuren"