Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

✨ Oppdaterte shadow-tokens #2041

Merged
merged 11 commits into from
Jun 22, 2023
Merged

✨ Oppdaterte shadow-tokens #2041

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
86f4f38
:sparkles: Oppdaterte shadow-tokens
KenAJoh Jun 8, 2023
3f4aafe
:art: Oppdatert shadows på datepicker
KenAJoh Jun 9, 2023
af28ff0
:lipstick: Endret shadows på popover, modal og chat
KenAJoh Jun 9, 2023
ded86d7
Merge branch 'main' into shadows-updated-0806
KenAJoh Jun 9, 2023
5a0712b
:memo: Changeset
KenAJoh Jun 9, 2023
ec425bf
Merge branch 'main' into shadows-updated-0806
KenAJoh Jun 22, 2023
550c04e
:lipstick: Oppdatert shadows
KenAJoh Jun 22, 2023
95381d1
:memo: Changeset
KenAJoh Jun 22, 2023
672feca
:bug: Fikset shadow-docs
KenAJoh Jun 22, 2023
a8bb170
Merge branch 'main' into shadows-updated-0806
KenAJoh Jun 22, 2023
6d30e16
:memo: Oppdatert changeset
KenAJoh Jun 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions .changeset/chilled-beers-tell.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
---
"@navikt/ds-css": minor
"@navikt/ds-react": minor
"@navikt/ds-tokens": minor
---

Shadow-tokens er oppdatert til mer tydeligere varianter
4 changes: 4 additions & 0 deletions @navikt/core/css/date.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -278,3 +278,7 @@
visibility: hidden;
pointer-events: none;
}

.navds-date__popover:where(.navds-popover) {
border: none;
}
2 changes: 1 addition & 1 deletion @navikt/core/css/link-panel.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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));
}

Expand Down
1 change: 1 addition & 0 deletions @navikt/core/css/modal.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@
position: relative;
overflow: auto;
max-height: 100%;
box-shadow: var(--a-shadow-xlarge);
}

.navds-modal__content {
Expand Down
1 change: 1 addition & 0 deletions @navikt/core/react/src/date/datepicker/DatePicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,7 @@ export const DatePicker = forwardRef<HTMLDivElement, DatePickerProps>(
role="dialog"
ref={ref}
strategy={strategy}
className="navds-date__popover"
bubbleEscape={bubbleEscape}
>
<DayPicker
Expand Down
2 changes: 1 addition & 1 deletion @navikt/core/react/src/date/monthpicker/MonthPicker.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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}
>
Expand Down
13 changes: 8 additions & 5 deletions @navikt/core/tokens/docs.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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)" },
{
Expand Down
10 changes: 5 additions & 5 deletions @navikt/core/tokens/src/shadow.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
7 changes: 3 additions & 4 deletions @navikt/core/tokens/stories/shadows.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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)" />
Expand Down
36 changes: 18 additions & 18 deletions yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand All @@ -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
Expand Down Expand Up @@ -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
Expand All @@ -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:
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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
Expand Down