Merge 6d30e16 into 6cb6c52

navikt · Jun 22, 2023 · 3625344 · 3625344
2 parents 6cb6c52 + 6d30e16
commit 3625344
Show file tree

Hide file tree

Showing 10 changed files with 49 additions and 34 deletions.
diff --git a/.changeset/chilled-beers-tell.md b/.changeset/chilled-beers-tell.md
@@ -0,0 +1,7 @@
+---
+"@navikt/ds-css": minor
+"@navikt/ds-react": minor
+"@navikt/ds-tokens": minor
+---
+
+Shadow-tokens er oppdatert til mer tydeligere varianter
diff --git a/@navikt/core/css/date.css b/@navikt/core/css/date.css
@@ -278,3 +278,7 @@
   visibility: hidden;
   pointer-events: none;
 }
+
+.navds-date__popover:where(.navds-popover) {
+  border: none;
+}
diff --git a/@navikt/core/css/link-panel.css b/@navikt/core/css/link-panel.css
@@ -13,7 +13,7 @@
 }
 
 .navds-link-panel:hover {
-  box-shadow: var(--a-shadow-medium);
+  box-shadow: var(--a-shadow-small);
   border-color: var(--ac-link-panel-hover-border, var(--a-border-action));
 }
 

diff --git a/@navikt/core/css/modal.css b/@navikt/core/css/modal.css
@@ -9,6 +9,7 @@
   position: relative;
   overflow: auto;
   max-height: 100%;
+  box-shadow: var(--a-shadow-xlarge);
 }
 
 .navds-modal__content {

diff --git a/@navikt/core/react/src/date/datepicker/DatePicker.tsx b/@navikt/core/react/src/date/datepicker/DatePicker.tsx
@@ -257,6 +257,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
               role="dialog"
               ref={ref}
               strategy={strategy}
+              className="navds-date__popover"
               bubbleEscape={bubbleEscape}
             >
               <DayPicker

diff --git a/@navikt/core/react/src/date/monthpicker/MonthPicker.tsx b/@navikt/core/react/src/date/monthpicker/MonthPicker.tsx
@@ -208,7 +208,7 @@ export const MonthPicker = forwardRef<HTMLDivElement, MonthPickerProps>(
               role="dialog"
               ref={ref}
               id={ariaId}
-              className="navds-date"
+              className="navds-date navds-date__popover"
               strategy={strategy}
               bubbleEscape={bubbleEscape}
             >

diff --git a/@navikt/core/tokens/docs.json b/@navikt/core/tokens/docs.json
@@ -474,22 +474,25 @@
     { "name": "--a-border-radius-full", "value": "9999px" }
   ],
   "shadow": [
-    { "name": "--a-shadow-xsmall", "value": "0 1px 2px 0 rgba(0, 0, 0, 0.12)" },
+    {
+      "name": "--a-shadow-xsmall",
+      "value": "0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20)"
+    },
     {
       "name": "--a-shadow-small",
-      "value": "0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1)"
+      "value": "0px 3px 8px 0px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.18)"
     },
     {
       "name": "--a-shadow-medium",
-      "value": "0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1)"
+      "value": "0px 5px 12px 0px rgba(0, 0, 0, 0.13), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.15)"
     },
     {
       "name": "--a-shadow-large",
-      "value": "0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1)"
+      "value": "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.12)"
     },
     {
       "name": "--a-shadow-xlarge",
-      "value": "0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 25px 50px -5px rgba(0, 0, 0, 0.1)"
+      "value": "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 0px 1px 0px rgba(0, 0, 0, 0.08)"
     },
     { "name": "--a-shadow-focus", "value": "0 0 0 3px rgba(0, 52, 125, 1)" },
     {

diff --git a/@navikt/core/tokens/src/shadow.json b/@navikt/core/tokens/src/shadow.json
@@ -2,19 +2,19 @@
   "a": {
     "shadow": {
       "xsmall": {
-        "value": "0 1px 2px 0 rgba(0, 0, 0, 0.12)"
+        "value": "0px 1px 3px 0px rgba(0, 0, 0, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.20)"
       },
       "small": {
-        "value": "0 1px 2px -1px rgba(0, 0, 0, 0.1), 0 1px 3px 0 rgba(0, 0, 0, 0.1)"
+        "value": "0px 3px 8px 0px rgba(0, 0, 0, 0.10), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.18)"
       },
       "medium": {
-        "value": "0 2px 4px -2px rgba(0, 0, 0, 0.1), 0 4px 6px -1px rgba(0, 0, 0, 0.1)"
+        "value": "0px 5px 12px 0px rgba(0, 0, 0, 0.13), 0px 1px 3px 0px rgba(0, 0, 0, 0.10), 0px 0px 1px 0px rgba(0, 0, 0, 0.15)"
       },
       "large": {
-        "value": "0 4px 6px -4px rgba(0, 0, 0, 0.1), 0 10px 15px -3px rgba(0, 0, 0, 0.1)"
+        "value": "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 16px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.12)"
       },
       "xlarge": {
-        "value": "0 8px 10px -6px rgba(0, 0, 0, 0.1), 0 25px 50px -5px rgba(0, 0, 0, 0.1)"
+        "value": "0px 2px 5px 0px rgba(0, 0, 0, 0.15), 0px 10px 24px 0px rgba(0, 0, 0, 0.18), 0px 0px 1px 0px rgba(0, 0, 0, 0.08)"
       },
       "focus": {
         "inverted": {

diff --git a/@navikt/core/tokens/stories/shadows.stories.tsx b/@navikt/core/tokens/stories/shadows.stories.tsx
@@ -10,9 +10,8 @@ const Shadow = ({ token }) => (
     <div className="shadow" style={{ boxShadow: token }} />
     <style>{`
     .shadow {
-      width: 4rem;
-      height: 4rem;
-      background: #f7f7f7;
+      width: 12rem;
+      height: 6rem;
       border-radius: 16px;
     }
     `}</style>
@@ -23,7 +22,7 @@ export const XSmall = () => <Shadow token="var(--a-shadow-xsmall)" />;
 export const Small = () => <Shadow token="var(--a-shadow-small)" />;
 export const Medium = () => <Shadow token="var(--a-shadow-medium)" />;
 export const Large = () => <Shadow token="var(--a-shadow-large)" />;
-export const XxLarge = () => <Shadow token="var(--a-shadow-xlarge)" />;
+export const XLarge = () => <Shadow token="var(--a-shadow-xlarge)" />;
 export const Focus = () => <Shadow token="var(--a-shadow-focus)" />;
 export const FocusInverted = () => (
   <Shadow token="var(--a-shadow-focus-inverted)" />

diff --git a/yarn.lock b/yarn.lock
@@ -3798,7 +3798,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@navikt/aksel-icons@^4.1.7, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
+"@navikt/aksel-icons@^4.3.0, @navikt/aksel-icons@workspace:@navikt/aksel-icons":
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-icons@workspace:@navikt/aksel-icons"
   dependencies:
@@ -3825,8 +3825,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel-stylelint@workspace:@navikt/aksel-stylelint"
   dependencies:
-    "@navikt/ds-css": ^4.1.7
-    "@navikt/ds-tokens": ^4.1.7
+    "@navikt/ds-css": ^4.3.0
+    "@navikt/ds-tokens": ^4.3.0
     "@types/jest": ^29.0.0
     concurrently: 7.2.1
     copyfiles: 2.4.1
@@ -3843,7 +3843,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@navikt/aksel@workspace:@navikt/aksel"
   dependencies:
-    "@navikt/ds-css": 4.1.7
+    "@navikt/ds-css": 4.3.0
     "@types/inquirer": ^9.0.3
     "@types/jest": ^29.0.0
     axios: 1.3.6
@@ -3867,11 +3867,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-css@*, @navikt/ds-css@4.1.7, @navikt/ds-css@^4.1.7, @navikt/ds-css@workspace:@navikt/core/css":
+"@navikt/ds-css@*, @navikt/ds-css@4.3.0, @navikt/ds-css@^4.3.0, @navikt/ds-css@workspace:@navikt/core/css":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-css@workspace:@navikt/core/css"
   dependencies:
-    "@navikt/ds-tokens": ^4.1.7
+    "@navikt/ds-tokens": ^4.3.0
     cssnano: 6.0.0
     fast-glob: 3.2.11
     lodash: 4.17.21
@@ -3884,12 +3884,12 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-react@*, @navikt/ds-react@4.1.7, @navikt/ds-react@^4.1.7, @navikt/ds-react@workspace:@navikt/core/react":
+"@navikt/ds-react@*, @navikt/ds-react@4.3.0, @navikt/ds-react@^4.3.0, @navikt/ds-react@workspace:@navikt/core/react":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-react@workspace:@navikt/core/react"
   dependencies:
     "@floating-ui/react": 0.24.1
-    "@navikt/aksel-icons": ^4.1.7
+    "@navikt/aksel-icons": ^4.3.0
     "@radix-ui/react-tabs": 1.0.0
     "@radix-ui/react-toggle-group": 1.0.0
     "@testing-library/dom": 8.13.0
@@ -3925,11 +3925,11 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tailwind@^4.1.7, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
+"@navikt/ds-tailwind@^4.3.0, @navikt/ds-tailwind@workspace:@navikt/core/tailwind":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tailwind@workspace:@navikt/core/tailwind"
   dependencies:
-    "@navikt/ds-tokens": ^4.1.7
+    "@navikt/ds-tokens": ^4.3.0
     "@types/jest": ^29.0.0
     color: 4.2.3
     jest: ^29.0.0
@@ -3940,7 +3940,7 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"@navikt/ds-tokens@^4.1.7, @navikt/ds-tokens@workspace:@navikt/core/tokens":
+"@navikt/ds-tokens@^4.3.0, @navikt/ds-tokens@workspace:@navikt/core/tokens":
   version: 0.0.0-use.local
   resolution: "@navikt/ds-tokens@workspace:@navikt/core/tokens"
   dependencies:
@@ -7962,11 +7962,11 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aksel.nav.no@workspace:aksel.nav.no"
   dependencies:
-    "@navikt/aksel-icons": ^4.1.7
-    "@navikt/ds-css": ^4.1.7
-    "@navikt/ds-react": ^4.1.7
-    "@navikt/ds-tailwind": ^4.1.7
-    "@navikt/ds-tokens": ^4.1.7
+    "@navikt/aksel-icons": ^4.3.0
+    "@navikt/ds-css": ^4.3.0
+    "@navikt/ds-react": ^4.3.0
+    "@navikt/ds-tailwind": ^4.3.0
+    "@navikt/ds-tokens": ^4.3.0
     prettier-plugin-tailwindcss: ^0.2.3
   languageName: unknown
   linkType: soft
@@ -22311,8 +22311,8 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "shadow-dom@workspace:examples/shadow-dom"
   dependencies:
-    "@navikt/ds-css": 4.1.7
-    "@navikt/ds-react": 4.1.7
+    "@navikt/ds-css": 4.3.0
+    "@navikt/ds-react": 4.3.0
     "@types/react": ^18.0.0
     "@types/react-dom": ^18.0.0
     "@vitejs/plugin-react": ^2.1.0