diff --git a/.changeset/chilled-beers-tell.md b/.changeset/chilled-beers-tell.md new file mode 100644 index 0000000000..371e542c56 --- /dev/null +++ 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 index 4133740618..33343edb51 100644 --- 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 index de81690c97..bc97a1d3e5 100644 --- 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 index 10dc8087cb..5a6c0eb8ca 100644 --- 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 index 301f3c29da..b4335281b5 100644 --- 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( role="dialog" ref={ref} strategy={strategy} + className="navds-date__popover" bubbleEscape={bubbleEscape} > ( 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 index 929342e12e..715537dd8f 100644 --- 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 index e985384b27..78eb4a54bf 100644 --- 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 index 5571c2fe4f..2cb256267d 100644 --- a/@navikt/core/tokens/stories/shadows.stories.tsx +++ b/@navikt/core/tokens/stories/shadows.stories.tsx @@ -10,9 +10,8 @@ const Shadow = ({ token }) => (
@@ -23,7 +22,7 @@ export const XSmall = () => ; export const Small = () => ; export const Medium = () => ; export const Large = () => ; -export const XxLarge = () => ; +export const XLarge = () => ; export const Focus = () => ; export const FocusInverted = () => ( diff --git a/yarn.lock b/yarn.lock index 6c825b6d41..23c278267a 100644 --- 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