Version Packages (#1906)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

@navikt/aksel-icons/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/aksel-icons
 
+## 2.8.9
+
 ## 2.8.8
 
 ### Patch Changes

@navikt/aksel-icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/aksel-icons",
-  "version": "2.8.8",
+  "version": "2.8.9",
   "author": "Aksel | NAV",
   "homepage": "https://aksel.nav.no/ikoner",
   "repository": {

@navikt/codemod/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-codemod
 
+## 2.8.9
+
 ## 2.8.8
 
 ## 2.8.7

@navikt/codemod/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-codemod",
-  "version": "2.8.8",
+  "version": "2.8.9",
   "description": "Aksel codemods for NAVs designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",

@navikt/community/navno/package.json

@@ -39,8 +39,8 @@
     "build-pict": "svgr --silent --index-template index-template.js --out-dir src/pictograms pictograms"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^2.8.8",
-    "@navikt/ds-react": "^2.8.8",
+    "@navikt/ds-icons": "^2.8.9",
+    "@navikt/ds-react": "^2.8.9",
     "clsx": "^1.1.1"
   },
   "devDependencies": {

@navikt/core/css/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-css
 
+## 2.8.9
+
+### Patch Changes
+
+- [#1905](https://github.com/navikt/aksel/pull/1905) [`212194964`](https://github.com/navikt/aksel/commit/212194964c4dd576e1ffc031316dff8cbe5016a2) Thanks [@KenAJoh](https://github.com/KenAJoh)! - :sparkles: Padding/border-radius tokens for button.css
+
 ## 2.8.8
 
 ## 2.8.7

@navikt/core/css/button.css

@@ -16,38 +16,50 @@
 }
 
 .navds-button {
+  --__ac-button-padding: var(--a-spacing-3) var(--a-spacing-5);
+
   display: inline-flex;
   cursor: pointer;
   margin: 0;
   text-decoration: none;
   border: none;
   background: none;
-  border-radius: var(--a-border-radius-medium);
-  padding: var(--a-spacing-3) var(--a-spacing-5);
+  border-radius: var(--ac-button-border-radius, var(--a-border-radius-medium));
+  padding: var(--ac-button-padding, var(--__ac-button-padding));
   align-items: center;
   justify-content: center;
   gap: var(--a-spacing-2);
 }
 
 .navds-button--small {
-  padding: 0.375rem var(--a-spacing-3);
+  --__ac-button-padding: 0.375rem var(--a-spacing-3);
+
+  padding: var(--ac-button-padding-small, var(--__ac-button-padding));
 }
 
 .navds-button--xsmall {
-  padding: var(--a-spacing-05) var(--a-spacing-2);
+  --__ac-button-padding: var(--a-spacing-05) var(--a-spacing-2);
+
+  padding: var(--ac-button-padding-xsmall, var(--__ac-button-padding));
   gap: var(--a-spacing-1);
 }
 
 .navds-button--icon-only {
-  padding: var(--a-spacing-3);
+  --__ac-button-padding: var(--a-spacing-3);
+
+  padding: var(--ac-button-padding-icon-only, var(--__ac-button-padding));
 }
 
 .navds-button--small.navds-button--icon-only {
-  padding: 0.375rem;
+  --__ac-button-padding: 0.375rem;
+
+  padding: var(--ac-button-padding-icon-only-small, var(--__ac-button-padding));
 }
 
 .navds-button--xsmall.navds-button--icon-only {
-  padding: var(--a-spacing-1);
+  --__ac-button-padding: var(--a-spacing-1);
+
+  padding: var(--ac-button-padding-icon-only-xsmall, var(--__ac-button-padding));
 }
 
 .navds-button:focus {

@navikt/core/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css",
-  "version": "2.8.8",
+  "version": "2.8.9",
   "description": "CSS for NAV Designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -20,7 +20,7 @@
     "watch": "postcss --watch --use postcss-import -o dist/index.css index.css"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^2.8.8",
+    "@navikt/ds-tokens": "^2.8.9",
     "normalize.css": "^8.0.1",
     "postcss": "^8.4.0",
     "postcss-cli": "^9.0.0",

@navikt/core/css/tokens.json

@@ -27,6 +27,13 @@
     "--ac-accordion-content-border-open": "--a-border-default"
   },
   "button": {
+    "--ac-button-border-radius": "--a-border-radius-medium",
+    "--ac-button-padding": "var(--a-spacing-3) var(--a-spacing-5)",
+    "--ac-button-padding-small": "0.375rem var(--a-spacing-3)",
+    "--ac-button-padding-xsmall": "var(--a-spacing-05) var(--a-spacing-2)",
+    "--ac-button-padding-icon-only": "var(--a-spacing-3)",
+    "--ac-button-padding-icon-only-small": "0.375rem",
+    "--ac-button-padding-icon-only-xsmall": "var(--a-spacing-1)",
     "--ac-button-primary-bg": "--a-surface-action",
     "--ac-button-primary-text": "--a-text-on-action",
     "--ac-button-primary-hover-bg": "--a-surface-action-hover",

@navikt/core/react/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-react
 
+## 2.8.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/aksel-icons@2.8.9
+  - @navikt/ds-icons@2.8.9
+
 ## 2.8.8
 
 ### Patch Changes

@navikt/core/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "2.8.8",
+  "version": "2.8.9",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -37,8 +37,8 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.17.0",
-    "@navikt/aksel-icons": "^2.8.8",
-    "@navikt/ds-icons": "^2.8.8",
+    "@navikt/aksel-icons": "^2.8.9",
+    "@navikt/ds-icons": "^2.8.9",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

@navikt/core/tailwind/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tailwind
 
+## 2.8.9
+
 ## 2.8.8
 
 ## 2.8.7

@navikt/core/tailwind/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tailwind",
-  "version": "2.8.8",
+  "version": "2.8.9",
   "description": "Tailwind config based on @navikt/ds-tokens",
   "author": "Aksel | NAV designsystem team",
   "keywords": [
@@ -22,7 +22,7 @@
     "directory": "@navikt/core/tailwind"
   },
   "devDependencies": {
-    "@navikt/ds-tokens": "^2.8.8",
+    "@navikt/ds-tokens": "^2.8.9",
     "@types/jest": "^29.0.0",
     "color": "4.2.3",
     "jest": "^29.0.0",

@navikt/core/tokens/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-tokens
 
+## 2.8.9
+
 ## 2.8.8
 
 ## 2.8.7

@navikt/core/tokens/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-tokens",
-  "version": "2.8.8",
+  "version": "2.8.9",
   "description": "Design-tokens for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/icons/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-icons
 
+## 2.8.9
+
 ## 2.8.8
 
 ## 2.8.7

@navikt/icons/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-icons",
-  "version": "2.8.8",
+  "version": "2.8.9",
   "description": "Aksel icons for NAV",
   "author": "Aksel | NAV designsystem team",
   "repository": {

@navikt/internal/css/CHANGELOG.md

@@ -1,5 +1,7 @@
 # @navikt/ds-css-internal
 
+## 2.8.9
+
 ## 2.8.8
 
 ## 2.8.7

@navikt/internal/css/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-css-internal",
-  "version": "2.8.8",
+  "version": "2.8.9",
   "description": "CSS for NAV internal Designsystem-components",
   "author": "Aksel | NAV designsystem team",
   "keywords": [

@navikt/internal/react/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @navikt/ds-react-internal
 
+## 2.8.9
+
+### Patch Changes
+
+- Updated dependencies []:
+  - @navikt/ds-react@2.8.9
+  - @navikt/ds-icons@2.8.9
+
 ## 2.8.8
 
 ### Patch Changes

@navikt/internal/react/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react-internal",
-  "version": "2.8.8",
+  "version": "2.8.9",
   "description": "Aksel react components for internal UIs in NAV",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -35,8 +35,8 @@
     "watch": "tsc --watch -p tsconfig.esm.json"
   },
   "dependencies": {
-    "@navikt/ds-icons": "^2.8.8",
-    "@navikt/ds-react": "^2.8.8",
+    "@navikt/ds-icons": "^2.8.9",
+    "@navikt/ds-react": "^2.8.9",
     "clsx": "^1.1.1",
     "copy-to-clipboard": "^3.3.1"
   },

aksel.nav.no/package.json

@@ -15,15 +15,15 @@
     "website"
   ],
   "dependencies": {
-    "@navikt/aksel-icons": "^2.8.8",
-    "@navikt/ds-codemod": "^2.8.8",
-    "@navikt/ds-css": "^2.8.8",
-    "@navikt/ds-css-internal": "^2.8.8",
-    "@navikt/ds-icons": "^2.8.8",
-    "@navikt/ds-react": "^2.8.8",
-    "@navikt/ds-react-internal": "^2.8.8",
-    "@navikt/ds-tailwind": "^2.8.8",
-    "@navikt/ds-tokens": "^2.8.8"
+    "@navikt/aksel-icons": "^2.8.9",
+    "@navikt/ds-codemod": "^2.8.9",
+    "@navikt/ds-css": "^2.8.9",
+    "@navikt/ds-css-internal": "^2.8.9",
+    "@navikt/ds-icons": "^2.8.9",
+    "@navikt/ds-react": "^2.8.9",
+    "@navikt/ds-react-internal": "^2.8.9",
+    "@navikt/ds-tailwind": "^2.8.9",
+    "@navikt/ds-tokens": "^2.8.9"
   },
   "devDependencies": {
     "prettier-plugin-tailwindcss": "^0.2.3"

aksel.nav.no/website/components/SanityBlockContent.tsx

@@ -1,4 +1,4 @@
-import { ExternalLink } from "@navikt/ds-icons";
+import { ExternalLinkIcon } from "@navikt/aksel-icons";
 import { BodyLong, Detail, Heading, Ingress, Link } from "@navikt/ds-react";
 import BlockContent from "@sanity/block-content-to-react";
 import cl from "clsx";
@@ -220,7 +220,7 @@ const serializers = {
             )
           }
         >
-          {children} <ExternalLink title="åpner lenken i ny fane" />
+          {children} <ExternalLinkIcon title="åpner lenken i ny fane" />
         </Link>
       ) : (
         <NextLink href={href} passHref legacyBehavior>

aksel.nav.no/website/components/layout/header/Hamburger.tsx

@@ -1,4 +1,5 @@
-import { Close, Hamburger as HamburgerIcon } from "@navikt/ds-icons";
+import { MenuHamburgerIcon, XMarkIcon } from "@navikt/aksel-icons";
+
 import { Button } from "@navikt/ds-react";
 import cl from "clsx";
 import Link from "next/link";
@@ -53,8 +54,9 @@ export const Hamburger = () => {
           aria-expanded={open}
           className="focus-visible:shadow-focus hover:bg-surface-neutral-subtle-hover ml-2 flex aspect-square items-center justify-center rounded px-3 py-3 focus:outline-none"
         >
-          <HamburgerIcon
-            className="pointer-events-none text-2xl"
+          <MenuHamburgerIcon
+            fontSize="2rem"
+            className="pointer-events-none"
             aria-label="Åpne meny"
           />
         </button>
@@ -75,7 +77,7 @@ export const Hamburger = () => {
                   styles.akselTertiaryButton,
                   "absolute top-2 right-2"
                 )}
-                icon={<Close title="lukk meny" className="h-5 w-5" />}
+                icon={<XMarkIcon title="lukk meny" fontSize="1.5rem" />}
               />
               <LinkElement
                 onClick={() => setOpen(false)}

aksel.nav.no/website/components/layout/header/search/index.tsx

@@ -1,5 +1,4 @@
 import { SearchLogT, useDebounce, logSearch } from "@/utils";
-import { Search as SearchIcon } from "@navikt/ds-icons";
 import {
   Button,
   Checkbox,
@@ -15,6 +14,7 @@ import React, { useCallback, useEffect, useRef, useState } from "react";
 import ReactModal from "react-modal";
 import { Group, GroupComponent } from "./Group";
 import styles from "../header.module.css";
+import { MagnifyingGlassIcon } from "@navikt/aksel-icons";
 
 /**
  * https://www.figma.com/file/71Sm1h6VV23lbBbQ3CJJ9t/Aksel-v2?node-id=1861%3A186079&t=ARKgZcA6B7ysmG3V-0
@@ -195,8 +195,8 @@ export const GlobalSearch = () => {
         className="hover:bg-deepblue-700 bg-deepblue-600 focus-visible:shadow-focus-gap h-11 focus:shadow-none"
         aria-keyshortcuts="Control+b"
         icon={
-          <SearchIcon
-            className="pointer-events-none -mt-[1px] shrink-0 text-xl"
+          <MagnifyingGlassIcon
+            className="pointer-events-none -mt-[1px] shrink-0 text-2xl"
             aria-label="Åpne meny"
             aria-hidden
           />

aksel.nav.no/website/components/sanity-modules/DoDont.tsx

@@ -1,7 +1,11 @@
 /* eslint-disable @next/next/no-img-element */
 import { withErrorBoundary } from "@/error-boundary";
 import { SanityT, urlFor } from "@/lib";
-import { ErrorFilled, SuccessFilled, WarningFilled } from "@navikt/ds-icons";
+import {
+  CheckmarkCircleFillIcon,
+  ExclamationmarkTriangleFillIcon,
+  XMarkOctagonFillIcon,
+} from "@navikt/aksel-icons";
 import { BodyShort } from "@navikt/ds-react";
 import cl from "clsx";
 import React from "react";
@@ -10,23 +14,26 @@ const GetIcon = (s: string) => {
   switch (s) {
     case "do":
       return (
-        <SuccessFilled
+        <CheckmarkCircleFillIcon
           aria-hidden
-          className="text-large mt-[1px] flex-shrink-0 text-green-500"
+          fontSize="1.5rem"
+          className="flex-shrink-0 text-green-500"
         />
       );
     case "dont":
       return (
-        <ErrorFilled
+        <XMarkOctagonFillIcon
           aria-hidden
-          className="text-large mt-[1px] flex-shrink-0 text-red-500"
+          fontSize="1.5rem"
+          className="flex-shrink-0 text-red-500"
         />
       );
     case "warning":
       return (
-        <WarningFilled
+        <ExclamationmarkTriangleFillIcon
           aria-hidden
-          className="text-large mt-[1px] flex-shrink-0 text-orange-500"
+          fontSize="1.5rem"
+          className="flex-shrink-0 text-orange-500"
         />
       );
     default:
@@ -60,14 +67,18 @@ const Element = ({
           {
             "border-t-border-success": block.variant === "do",
             "border-t-border-danger": block.variant === "dont",
-            "border-t-border-warning": block.variant === "warning",
+            "border-t-surface-warning": block.variant === "warning",
           }
         )}
       />
       <figcaption data-variant={block.variant}>
         <div className="mt-3">
           {block.description && (
-            <BodyShort size="small" as="span" className="inline-flex gap-2">
+            <BodyShort
+              size="small"
+              as="span"
+              className="inline-flex items-center gap-2"
+            >
               {GetIcon(block.variant)}
               {block.description}
             </BodyShort>

aksel.nav.no/website/components/sanity-modules/TokenTable.tsx

@@ -1,8 +1,8 @@
 import { withErrorBoundary } from "@/error-boundary";
 import { SanityT } from "@/lib";
+import { ChevronDownCircleIcon } from "@navikt/aksel-icons";
 import internal from "@navikt/ds-css-internal/tokens.json";
 import core from "@navikt/ds-css/tokens.json";
-import { Expand } from "@navikt/ds-icons";
 import { BodyLong, Label, Link } from "@navikt/ds-react";
 import cl from "classnames";
 import CopyButton from "components/sanity-modules/code/CopyButton";
@@ -94,14 +94,15 @@ const TokenTable = ({ node }: { node: SanityT.Schema.token_kategori }) => {
       {!open && showMore && (
         <button
           onClick={() => setOpen(true)}
-          className="text-medium group mx-auto flex shrink-0 -translate-y-3/4 flex-col items-center focus:outline-none"
+          className="text-medium group mx-auto flex shrink-0 -translate-y-3/4 flex-col items-center gap-1 focus:outline-none"
         >
           <span className="group-focus-visible:bg-border-focus group-focus-visible:text-text-on-action group-focus-visible:shadow-focus">
             Se alle tokens
           </span>
-          <Expand
-            className="h-4 w-4 transition-all group-hover:translate-y-1"
+          <ChevronDownCircleIcon
+            className="transition-all group-hover:translate-y-1"
             aria-hidden
+            fontSize="1.5rem"
           />
         </button>
       )}

aksel.nav.no/website/components/sanity-modules/code-examples/CodeSandbox.tsx

@@ -1,4 +1,4 @@
-import { Edit } from "@navikt/ds-icons";
+import { PencilIcon } from "@navikt/aksel-icons";
 import { getParameters } from "codesandbox/lib/api/define";
 
 const indexTsx = `import React from 'react';
@@ -29,6 +29,7 @@ export const CodeSandbox = ({ code }: { code: string }) => {
             "@navikt/ds-react-internal": "latest",
             "@navikt/ds-css-internal": "latest",
             "@navikt/ds-icons": "latest",
+            "@navikt/aksel-icons": "latest",
           },
         } as any,
         isBinary: false,
@@ -58,9 +59,9 @@ export const CodeSandbox = ({ code }: { code: string }) => {
       <input type="hidden" name="query" value="module=App.js" />
       <button
         type="submit"
-        className="flex items-center justify-center gap-2 rounded-sm px-3 py-2 hover:bg-gray-100 focus:outline-none focus-visible:shadow-focus-inset active:bg-gray-200"
+        className="focus-visible:shadow-focus-inset flex items-center justify-center gap-1 rounded-sm px-3 py-2 hover:bg-gray-100 focus:outline-none active:bg-gray-200"
       >
-        <Edit aria-hidden />
+        <PencilIcon aria-hidden fontSize="1.5rem" />
         CodeSandbox
       </button>
     </form>

aksel.nav.no/website/components/sanity-modules/tips/index.tsx

@@ -1,11 +1,8 @@
 import { withErrorBoundary } from "@/error-boundary";
 import { SanityT } from "@/lib";
 import { SanityBlockContent } from "@/sanity-block";
-import { Edit, LightBulb } from "@navikt/ds-icons";
-import { Detail, Link } from "@navikt/ds-react";
-import cl from "clsx";
-import React from "react";
-import style from "./tips.module.css";
+import { LightBulbIcon, PencilIcon } from "@navikt/aksel-icons";
+import { BodyShort, Detail, Link } from "@navikt/ds-react";
 
 const Tips = ({ node }: { node: SanityT.Schema.tips }) => {
   if (!node || !node.body) {
@@ -14,12 +11,7 @@ const Tips = ({ node }: { node: SanityT.Schema.tips }) => {
 
   if (node.eksperiment) {
     return (
-      <div
-        className={cl(
-          style.tips,
-          "linear my-8 max-w-2xl rounded-r border-l-[6px] border-l-green-200 bg-white px-4 py-4 sm:px-8"
-        )}
-      >
+      <div className="linear my-8 max-w-2xl rounded-r border-l-[6px] border-l-green-200 bg-white px-4 py-4 sm:px-8">
         <Detail
           className="text-text-subtle flex items-center gap-1 font-semibold uppercase"
           spacing
@@ -57,10 +49,10 @@ const Tips = ({ node }: { node: SanityT.Schema.tips }) => {
           }}
         >
           Send feedback
-          <Edit
+          <PencilIcon
             aria-hidden
             aria-label="send inn feedback"
-            className="text-base"
+            fontSize="1.5rem"
           />
         </Link>
       </div>
@@ -68,19 +60,15 @@ const Tips = ({ node }: { node: SanityT.Schema.tips }) => {
   }
 
   return (
-    <div
-      className={cl(
-        style.tips,
-        "my-7 max-w-2xl px-4 py-3 shadow-[inset_5px_0_0_0_var(--a-gray-500),inset_0_0_0_1px_var(--a-gray-200)] sm:px-6"
-      )}
-    >
-      <Detail
-        className="override-text-no-max text-text-subtle -ml-[2px] flex items-center gap-1 font-semibold"
+    <div className="border-l-deepblue-500 bg-deepblue-50 my-7 max-w-2xl border-l-4 px-4 py-3 sm:px-6">
+      <BodyShort
+        className="override-text-no-max text-deepblue-800 -ml-[2px] flex items-center gap-1 font-semibold"
         spacing
+        size="small"
       >
-        <LightBulb className="text-large" title="tips" aria-hidden />
+        <LightBulbIcon fontSize="1.5rem" title="tips" aria-hidden />
         Tips
-      </Detail>
+      </BodyShort>
       <SanityBlockContent blocks={node.body} noLastMargin size="small" />
     </div>
   );

aksel.nav.no/website/components/sanity-modules/tips/tips.module.css

@@ -1,7 +0,0 @@
-.tips {
-  @apply bg-gray-50;
-}
-
-:global(.aksel-artikkel) .tips {
-  @apply bg-white;
-}

examples/shadow-dom/package.json

@@ -10,8 +10,8 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@navikt/ds-css": "2.8.8",
-    "@navikt/ds-react": "2.8.8",
+    "@navikt/ds-css": "2.8.9",
+    "@navikt/ds-react": "2.8.9",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },