@designsystem-se/af 32.3.1-beta.1 → 33.0.0

package/dist/digi-arbetsformedlingen/design-tokens/components/_navigation-context-menu.variables.scss

@@ -1,64 +1,23 @@
 @mixin digi-navigation-context-menu--variables() {
   --digi--navigation-context-menu--toggle-icon--transition: ease-in-out 0.2s all;
   --digi--navigation-context-menu--toggle-icon--transform: rotate(-180deg);
-  --digi--navigation-context-menu--display--start: block;
-  --digi--navigation-context-menu--display--end: inline-block;
 
-  --digi--navigation-context-menu--content--position: absolute;
-  --digi--navigation-context-menu--content--margin-top: var(--digi--gutter--smaller);
   --digi--navigation-context-menu--content--background-color: var(--digi--color--background--primary);
   --digi--navigation-context-menu--content--border-radius: var(--digi--border-radius--secondary);
   --digi--navigation-context-menu--content--box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.7);
-
-  --digi--navigation-context-menu--button--font-size: var(--digi--typography--body--font-size--desktop);
-  --digi--navigation-context-menu--button--font-size--desktop: var(--digi--typography--body--font-size--desktop-large);
-  --digi--navigation-context-menu--button--background: transparent;
-  --digi--navigation-context-menu--button--background--hover: transparent;
-  --digi--navigation-context-menu--button--color: var(--digi--color--text--primary);
-  --digi--navigation-context-menu--button--border: 0;
-  --digi--navigation-context-menu--button--font-weight: normal;
-  --digi--navigation-context-menu--button--padding: var(--digi--gutter--smallest-2) var(--digi--gutter--large) var(--digi--gutter--smallest-2) var(--digi--gutter--largest-3);
-  --digi--navigation-context-menu--button--bordered--padding: var(--digi--gutter--large) var(--digi--gutter--large) var(--digi--gutter--large) var(--digi--gutter--largest-3);
-  --digi--navigation-context-menu--button--outline--focus: none;
-  --digi--navigation-context-menu--button--width: 100%;
-  --digi--navigation-context-menu--button--text-align: left;
-  --digi--navigation-context-menu--button--display: flex;
+  --digi--navigation-context-menu--content--max-width: 90vw;
+  --digi--navigation-context-menu--content--max-height: 15rem;
 
   --digi--navigation-context-menu--button-icon--width: 0.875rem;
-  --digi--navigation-context-menu--button-icon--margin-right: -1.125rem;
-  --digi--navigation-context-menu--button-icon--margin-left: 0.25rem;
-  --digi--navigation-context-menu--button-icon--display: inline-flex;
-
-  --digi--navigation-context-menu--link--font-size: var(--digi--typography--body--font-size--desktop);
-  --digi--navigation-context-menu--link--font-size--desktop: var(--digi--typography--body--font-size--desktop-large);
-  --digi--navigation-context-menu--link--text-decoration: none;
-  --digi--navigation-context-menu--link--color: var(--digi--color--text--primary);
-  --digi--navigation-context-menu--link--font-family: var(--digi--global--typography--font-family--default);
-  --digi--navigation-context-menu--link--focus--outline: none;
-  --digi--navigation-context-menu--link--padding: var(--digi--gutter--smallest-2) var(--digi--gutter--large);
-  --digi--navigation-context-menu--link--bordered--padding: var(--digi--gutter--large);
-  --digi--navigation-context-menu--link--display: inline-block;
-  --digi--navigation-context-menu--link--width: 100%;
 
   --digi--navigation-context-menu--button-trigger--font-size: var(--digi--typography--body--font-size--desktop);
-  --digi--navigation-context-menu--button-trigger--font-size--desktop: var(--digi--typography--body--font-size--desktop-large);
   --digi--navigation-context-menu--button-trigger--padding: 0;
-  --digi--navigation-context-menu--button-trigger--background-color: transparent;
-  --digi--navigation-context-menu--button-trigger--background-color--hover: transparent;
-  --digi--navigation-context-menu--button-trigger--border-radius: initial;
-  --digi--navigation-context-menu--button-trigger--border-radius--hover: initial;
-  --digi--navigation-context-menu--button-trigger--border-radius--focus: initial;
 
   --digi--navigation-context-menu--item--font-size: var(--digi--typography--body--font-size--desktop);
-  --digi--navigation-context-menu--item--font-size--desktop: var(--digi--typography--body--font-size--desktop-large);
   --digi--navigation-context-menu--item--background-color--active: var(--digi--color--background--neutral-6);
   --digi--navigation-context-menu--item--display: flex;
   --digi--navigation-context-menu--item--font-family: var(--digi--global--typography--font-family--default);
-  --digi--navigation-context-menu--item--font-wight--selected: 600;
-  --digi--navigation-context-menu--item--border-top: var(--digi--border-width--primary) solid var(--digi--color--border--neutral-4);
-
-  --digi--navigation-context-menu--items--margin: 0;
-  --digi--navigation-context-menu--items--padding: var(--digi--gutter--large) 0;
+  --digi--navigation-context-menu--item--font-color: var(--digi--color--text--primary);
 }
 
 /** Do not touch! Autogenerated 
@@ -72,7 +31,6 @@
 * @prop --digi--navigation-context-menu--content--border-radius: var(--digi--border-radius--secondary);
 * @prop --digi--navigation-context-menu--content--box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.7);
 * @prop --digi--navigation-context-menu--button--font-size: var(--digi--typography--body--font-size--desktop);
-* @prop --digi--navigation-context-menu--button--font-size--desktop: var(--digi--typography--body--font-size--desktop-large);
 * @prop --digi--navigation-context-menu--button--background: transparent;
 * @prop --digi--navigation-context-menu--button--background--hover: transparent;
 * @prop --digi--navigation-context-menu--button--color: var(--digi--color--text--primary);
@@ -89,6 +47,44 @@
 * @prop --digi--navigation-context-menu--button-icon--margin-left: 0.25rem;
 * @prop --digi--navigation-context-menu--button-icon--display: inline-flex;
 * @prop --digi--navigation-context-menu--link--font-size: var(--digi--typography--body--font-size--desktop);
+* @prop --digi--navigation-context-menu--link--text-decoration: none;
+* @prop --digi--navigation-context-menu--link--color: var(--digi--color--text--primary);
+* @prop --digi--navigation-context-menu--link--font-family: var(--digi--global--typography--font-family--default);
+* @prop --digi--navigation-context-menu--link--focus--outline: none;
+* @prop --digi--navigation-context-menu--link--padding: var(--digi--gutter--smallest-2) var(--digi--gutter--large);
+* @prop --digi--navigation-context-menu--link--bordered--padding: var(--digi--gutter--large);
+* @prop --digi--navigation-context-menu--link--display: inline-block;
+* @prop --digi--navigation-context-menu--link--width: 100%;
+* @prop --digi--navigation-context-menu--button-trigger--font-size: var(--digi--typography--body--font-size--desktop);
+* @prop --digi--navigation-context-menu--button-trigger--font-size--desktop: var(--digi--typography--body--font-size--desktop-large);
+* @prop --digi--navigation-context-menu--button-trigger--padding: 0;
+* @prop --digi--navigation-context-menu--button-trigger--background-color: transparent;
+* @prop --digi--navigation-context-menu--button-trigger--background-color--hover: transparent;
+* @prop --digi--navigation-context-menu--button-trigger--border-radius: initial;
+* @prop --digi--navigation-context-menu--button-trigger--border-radius--hover: initial;
+* @prop --digi--navigation-context-menu--button-trigger--border-radius--focus: initial;
+* @prop --digi--navigation-context-menu--item--font-size: var(--digi--typography--body--font-size--desktop);
+* @prop --digi--navigation-context-menu--item--background-color--active: var(--digi--color--background--neutral-6);
+* @prop --digi--navigation-context-menu--item--display: flex;
+* @prop --digi--navigation-context-menu--item--font-family: var(--digi--global--typography--font-family--default);
+* @prop --digi--navigation-context-menu--item--font-wight--selected: 600;
+* @prop --digi--navigation-context-menu--item--border-top: var(--digi--border-width--primary) solid var(--digi--color--border--neutral-4);
+* @prop --digi--navigation-context-menu--items--margin: 0;
+* @prop --digi--navigation-context-menu--items--padding: var(--digi--gutter--large) 0;
+*/ar(--digi--color--text--primary);
+* @prop --digi--navigation-context-menu--button--border: 0;
+* @prop --digi--navigation-context-menu--button--font-weight: normal;
+* @prop --digi--navigation-context-menu--button--padding: var(--digi--gutter--smallest-2) var(--digi--gutter--large) var(--digi--gutter--smallest-2) var(--digi--gutter--largest-3);
+* @prop --digi--navigation-context-menu--button--bordered--padding: var(--digi--gutter--large) var(--digi--gutter--large) var(--digi--gutter--large) var(--digi--gutter--largest-3);
+* @prop --digi--navigation-context-menu--button--outline--focus: none;
+* @prop --digi--navigation-context-menu--button--width: 100%;
+* @prop --digi--navigation-context-menu--button--text-align: left;
+* @prop --digi--navigation-context-menu--button--display: flex;
+* @prop --digi--navigation-context-menu--button-icon--width: 0.875rem;
+* @prop --digi--navigation-context-menu--button-icon--margin-right: -1.125rem;
+* @prop --digi--navigation-context-menu--button-icon--margin-left: 0.25rem;
+* @prop --digi--navigation-context-menu--button-icon--display: inline-flex;
+* @prop --digi--navigation-context-menu--link--font-size: var(--digi--typography--body--font-size--desktop);
 * @prop --digi--navigation-context-menu--link--font-size--desktop: var(--digi--typography--body--font-size--desktop-large);
 * @prop --digi--navigation-context-menu--link--text-decoration: none;
 * @prop --digi--navigation-context-menu--link--color: var(--digi--color--text--primary);

package/dist/digi-arbetsformedlingen/design-tokens/css/variables.css

@@ -62,6 +62,8 @@
   --digi--navigation-context-menu--button--font-weight: normal;
   --digi--navigation-context-menu--button--border: 0;
   --digi--navigation-context-menu--button--background: transparent;
+  --digi--navigation-context-menu--content--max-height: 15rem;
+  --digi--navigation-context-menu--content--max-width: 90vw;
   --digi--navigation-context-menu--content--box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.7);
   --digi--navigation-context-menu--content--position: absolute;
   --digi--navigation-context-menu--display--end: inline-block;
@@ -1140,6 +1142,7 @@
   --digi--navigation-sidebar--wrapper--background-color: var(--digi--color--background--primary);
   --digi--navigation-context-menu--items--padding: var(--digi--gutter--large);
   --digi--navigation-context-menu--item--border-top: var(--digi--border-width--primary) solid var(--digi--color--border--neutral-4);
+  --digi--navigation-context-menu--item--font-color: var(--digi--color--text--primary);
   --digi--navigation-context-menu--item--background-color--active: var(--digi--color--background--neutral-6);
   --digi--navigation-context-menu--item--font-size: var(--digi--typography--body--font-size--desktop);
   --digi--navigation-context-menu--button-trigger--font-size: var(--digi--typography--body--font-size--desktop);

package/dist/digi-arbetsformedlingen/design-tokens/scss/variables.scss

@@ -1576,6 +1576,8 @@ $digi--navigation-context-menu--content--margin-top: 0.25rem;
 $digi--navigation-context-menu--content--background-color: #FFFFFF;
 $digi--navigation-context-menu--content--border-radius: 0.375rem;
 $digi--navigation-context-menu--content--box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.7);
+$digi--navigation-context-menu--content--max-width: 90vw;
+$digi--navigation-context-menu--content--max-height: 15rem;
 $digi--navigation-context-menu--button--font-size: 1rem;
 $digi--navigation-context-menu--button--background: transparent;
 $digi--navigation-context-menu--button--color: #333333;
@@ -1609,6 +1611,7 @@ $digi--navigation-context-menu--item--background-color--active: #EDEDED;
 $digi--navigation-context-menu--item--display: flex;
 $digi--navigation-context-menu--item--font-family: "Open Sans";
 $digi--navigation-context-menu--item--font-wight--selected: 600;
+$digi--navigation-context-menu--item--font-color: #333333;
 $digi--navigation-context-menu--item--border-top: 0.0625rem solid #EDEDED;
 $digi--navigation-context-menu--items--margin: 0;
 $digi--navigation-context-menu--items--padding: 0.625rem;

package/dist/digi-arbetsformedlingen/design-tokens/styleguide/web.json

@@ -32013,6 +32013,44 @@
       "box-shadow"
     ]
   },
+  {
+    "value": "90vw",
+    "filePath": "dist/tokens/style-dictionary.json",
+    "isSource": true,
+    "original": {
+      "value": "90vw"
+    },
+    "name": "digi--navigation-context-menu--content--max-width",
+    "attributes": {
+      "category": "navigation-context-menu",
+      "type": "content",
+      "item": "max-width"
+    },
+    "path": [
+      "navigation-context-menu",
+      "content",
+      "max-width"
+    ]
+  },
+  {
+    "value": "15rem",
+    "filePath": "dist/tokens/style-dictionary.json",
+    "isSource": true,
+    "original": {
+      "value": "15rem"
+    },
+    "name": "digi--navigation-context-menu--content--max-height",
+    "attributes": {
+      "category": "navigation-context-menu",
+      "type": "content",
+      "item": "max-height"
+    },
+    "path": [
+      "navigation-context-menu",
+      "content",
+      "max-height"
+    ]
+  },
   {
     "value": "1rem",
     "desktop": {
@@ -32732,6 +32770,25 @@
       "selected"
     ]
   },
+  {
+    "value": "#333333",
+    "filePath": "dist/tokens/style-dictionary.json",
+    "isSource": true,
+    "original": {
+      "value": "{color.text.primary.value}"
+    },
+    "name": "digi--navigation-context-menu--item--font-color",
+    "attributes": {
+      "category": "navigation-context-menu",
+      "type": "item",
+      "item": "font-color"
+    },
+    "path": [
+      "navigation-context-menu",
+      "item",
+      "font-color"
+    ]
+  },
   {
     "value": "0.0625rem solid #EDEDED",
     "filePath": "dist/tokens/style-dictionary.json",

package/dist/digi-arbetsformedlingen/design-tokens/styleguide/web.scss

@@ -1576,6 +1576,8 @@ $digi--navigation-context-menu--content--margin-top: 0.25rem;
 $digi--navigation-context-menu--content--background-color: #FFFFFF;
 $digi--navigation-context-menu--content--border-radius: 0.375rem;
 $digi--navigation-context-menu--content--box-shadow: 0 0.125rem 0.375rem 0 rgba(0, 0, 0, 0.7);
+$digi--navigation-context-menu--content--max-width: 90vw;
+$digi--navigation-context-menu--content--max-height: 15rem;
 $digi--navigation-context-menu--button--font-size: 1rem;
 $digi--navigation-context-menu--button--background: transparent;
 $digi--navigation-context-menu--button--color: #333333;
@@ -1609,6 +1611,7 @@ $digi--navigation-context-menu--item--background-color--active: #EDEDED;
 $digi--navigation-context-menu--item--display: flex;
 $digi--navigation-context-menu--item--font-family: "Open Sans";
 $digi--navigation-context-menu--item--font-wight--selected: 600;
+$digi--navigation-context-menu--item--font-color: #333333;
 $digi--navigation-context-menu--item--border-top: 0.0625rem solid #EDEDED;
 $digi--navigation-context-menu--items--margin: 0;
 $digi--navigation-context-menu--items--padding: 0.625rem;