From ea9c03223c50bc3a20ab4246030ba0b598380d9a Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 22 Jan 2025 12:30:03 +0100 Subject: [PATCH 1/3] :lipstick: Update border-radius based on Figma --- @navikt/core/css/darkside/action-menu.darkside.css | 6 +++--- @navikt/core/css/darkside/button.darkside.css | 2 +- @navikt/core/css/darkside/copybutton.darkside.css | 2 +- @navikt/core/css/darkside/date.darkside.css | 14 ++++++-------- .../core/css/darkside/form/combobox.darkside.css | 7 +++---- 5 files changed, 14 insertions(+), 17 deletions(-) diff --git a/@navikt/core/css/darkside/action-menu.darkside.css b/@navikt/core/css/darkside/action-menu.darkside.css index 45aa59f20d..b879dce9aa 100644 --- a/@navikt/core/css/darkside/action-menu.darkside.css +++ b/@navikt/core/css/darkside/action-menu.darkside.css @@ -1,7 +1,7 @@ /* --------------------------- ActionMenu content --------------------------- */ .navds-action-menu__content { overflow: hidden; - border-radius: var(--ax-border-radius-large); + border-radius: var(--ax-border-radius-xlarge); border: 1px solid var(--ax-border-subtleA); box-shadow: var(--ax-shadow-dialog); transition: transform 250ms cubic-bezier(0, 0, 0, 1) allow-discrete; @@ -39,7 +39,7 @@ --__axc-action-menu-item-pl: var(--ax-space-8); --__axc-action-menu-item-height: 2rem; - border-radius: var(--ax-border-radius-large); + border-radius: var(--ax-border-radius-xlarge); background-color: var(--ax-bg-raised); min-width: 128px; max-width: min(95vw, 640px); @@ -60,7 +60,7 @@ gap: var(--ax-space-8); min-height: var(--__axc-action-menu-item-height); cursor: default; - border-radius: var(--ax-border-radius-medium); + border-radius: var(--ax-border-radius-large); position: relative; padding-left: var(--__axc-action-menu-item-pl); padding-right: var(--__axc-action-menu-item-pr); diff --git a/@navikt/core/css/darkside/button.darkside.css b/@navikt/core/css/darkside/button.darkside.css index bde502a586..3838914b9c 100644 --- a/@navikt/core/css/darkside/button.darkside.css +++ b/@navikt/core/css/darkside/button.darkside.css @@ -5,7 +5,7 @@ --__axc-button-border-width: 2px; padding: var(--ax-space-12) var(--ax-space-20); - border-radius: var(--ax-border-radius-medium); + border-radius: var(--ax-border-radius-large); display: inline-flex; cursor: pointer; text-decoration: none; diff --git a/@navikt/core/css/darkside/copybutton.darkside.css b/@navikt/core/css/darkside/copybutton.darkside.css index e6e35cf15c..023a0fcbfd 100644 --- a/@navikt/core/css/darkside/copybutton.darkside.css +++ b/@navikt/core/css/darkside/copybutton.darkside.css @@ -5,7 +5,7 @@ margin: 0; text-decoration: none; border: none; - border-radius: var(--ax-border-radius-medium); + border-radius: var(--ax-border-radius-large); padding: var(--__axc-copybutton-padding); display: grid; place-content: center; diff --git a/@navikt/core/css/darkside/date.darkside.css b/@navikt/core/css/darkside/date.darkside.css index dd8af12307..d166e8d20c 100644 --- a/@navikt/core/css/darkside/date.darkside.css +++ b/@navikt/core/css/darkside/date.darkside.css @@ -35,21 +35,19 @@ width: 2.5rem; height: 2.5rem; text-align: center; - border-radius: var(--ax-border-radius-medium); + border-radius: var(--ax-border-radius-large); } .rdp-day_range_start { - border-radius: var(--ax-border-radius-xlarge) var(--ax-border-radius-medium) var(--ax-border-radius-medium) - var(--ax-border-radius-xlarge); + border-radius: 100% var(--ax-border-radius-xlarge) var(--ax-border-radius-xlarge) 100%; } .rdp-day_range_end:not(.rdp-day_range_start) { - border-radius: var(--ax-border-radius-medium) var(--ax-border-radius-xlarge) var(--ax-border-radius-xlarge) - var(--ax-border-radius-medium); + border-radius: var(--ax-border-radius-large) 100% 100% var(--ax-border-radius-large); } .rdp-day_range_start.rdp-day_range_end { - border-radius: var(--ax-border-radius-xlarge); + border-radius: var(--ax-border-radius-large); } .navds-date__field { @@ -142,7 +140,7 @@ width: 3rem; height: 3rem; text-transform: capitalize; - border-radius: var(--ax-border-radius-medium); + border-radius: var(--ax-border-radius-large); cursor: pointer; } @@ -192,7 +190,7 @@ text-decoration: none; border: none; background: none; - border-radius: calc(var(--ax-border-radius-medium) - 1px); + border-radius: calc(var(--ax-border-radius-large) - 1px); padding: var(--ax-space-12); align-items: center; justify-content: center; diff --git a/@navikt/core/css/darkside/form/combobox.darkside.css b/@navikt/core/css/darkside/form/combobox.darkside.css index ec948c7588..0ffb3dfe2f 100644 --- a/@navikt/core/css/darkside/form/combobox.darkside.css +++ b/@navikt/core/css/darkside/form/combobox.darkside.css @@ -10,7 +10,7 @@ flex-direction: column; width: 100%; position: relative; - border-radius: var(--ax-border-radius-medium); + border-radius: var(--ax-border-radius-large); } .navds-form-field:not(:is(.navds-combobox--disabled, .navds-combobox--readonly)) { @@ -77,7 +77,7 @@ .navds-combobox__wrapper-inner { border: 1px solid var(--ax-border-default); - border-radius: var(--ax-border-radius-medium); + border-radius: var(--ax-border-radius-large); &:has(.navds-combobox__input:focus-visible) { outline: 2px solid var(--ax-border-focus); @@ -207,7 +207,6 @@ } .navds-combobox__button-toggle-list { - border-radius: var(--ax-border-radius-medium); color: var(--ax-text-default); display: flex; justify-content: center; @@ -265,7 +264,7 @@ justify-content: space-between; padding-block: var(--__axc-combobox-list-item-padding-block); padding-inline: var(--__axc-combobox-list-item-padding-inline); - border-radius: var(--ax-border-radius-medium); + border-radius: var(--ax-border-radius-large); border: 0; margin-inline: var(--ax-space-8); margin-block: var(--ax-space-4); From a46c8981df0db690adf1d2d088318944882255c7 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 22 Jan 2025 15:10:30 +0100 Subject: [PATCH 2/3] :lipstick: More border-radius adjustments --- @navikt/core/css/darkside/form/form-progress.darkside.css | 2 +- @navikt/core/css/darkside/form/search.darkside.css | 6 +++--- @navikt/core/css/darkside/form/select.darkside.css | 2 +- @navikt/core/css/darkside/form/text-field.darkside.css | 2 +- @navikt/core/css/darkside/form/textarea.darkside.css | 2 +- @navikt/core/css/darkside/toggle-group.darkside.css | 4 ++-- 6 files changed, 9 insertions(+), 9 deletions(-) diff --git a/@navikt/core/css/darkside/form/form-progress.darkside.css b/@navikt/core/css/darkside/form/form-progress.darkside.css index a213857616..4a256ab44d 100644 --- a/@navikt/core/css/darkside/form/form-progress.darkside.css +++ b/@navikt/core/css/darkside/form/form-progress.darkside.css @@ -50,7 +50,7 @@ .navds-form-progress__stepper { border: 1px solid var(--ax-border-subtle); - border-radius: var(--ax-border-radius-large); + border-radius: var(--ax-border-radius-xlarge); padding: var(--ax-space-16) var(--ax-space-20); margin-top: var(--ax-space-4); background: var(--ax-bg-raised); diff --git a/@navikt/core/css/darkside/form/search.darkside.css b/@navikt/core/css/darkside/form/search.darkside.css index 5f9f39930e..3d144c6ba2 100644 --- a/@navikt/core/css/darkside/form/search.darkside.css +++ b/@navikt/core/css/darkside/form/search.darkside.css @@ -22,7 +22,7 @@ .navds-search__wrapper { display: inline-flex; align-items: center; - border-radius: var(--ax-border-radius-medium); + border-radius: var(--ax-border-radius-large); /* We have to outline the whole container to include the Search-buttons */ &:has(.navds-search__input:focus-visible) { @@ -97,8 +97,8 @@ .navds-search__button-search { flex-shrink: 0; border-radius: 0; - border-top-right-radius: var(--ax-border-radius-medium); - border-bottom-right-radius: var(--ax-border-radius-medium); + border-top-right-radius: var(--ax-border-radius-large); + border-bottom-right-radius: var(--ax-border-radius-large); } .navds-search__button-search.navds-button--secondary { diff --git a/@navikt/core/css/darkside/form/select.darkside.css b/@navikt/core/css/darkside/form/select.darkside.css index f2f05e3ba8..a6608b4283 100644 --- a/@navikt/core/css/darkside/form/select.darkside.css +++ b/@navikt/core/css/darkside/form/select.darkside.css @@ -1,7 +1,7 @@ .navds-select__input { appearance: none; background-color: var(--ax-bg-input); - border-radius: var(--ax-border-radius-medium); + border-radius: var(--ax-border-radius-large); border: 1px solid var(--ax-border-default); color: var(--ax-text-default); width: 100%; diff --git a/@navikt/core/css/darkside/form/text-field.darkside.css b/@navikt/core/css/darkside/form/text-field.darkside.css index 7be09ae23a..e64c68b3fc 100644 --- a/@navikt/core/css/darkside/form/text-field.darkside.css +++ b/@navikt/core/css/darkside/form/text-field.darkside.css @@ -2,7 +2,7 @@ appearance: none; padding: var(--ax-space-8); background: var(--ax-bg-input); - border-radius: var(--ax-border-radius-medium); + border-radius: var(--ax-border-radius-large); border: 1px solid var(--ax-border-default); min-height: 3rem; width: 100%; diff --git a/@navikt/core/css/darkside/form/textarea.darkside.css b/@navikt/core/css/darkside/form/textarea.darkside.css index 89dc7d116a..f5e96e4103 100644 --- a/@navikt/core/css/darkside/form/textarea.darkside.css +++ b/@navikt/core/css/darkside/form/textarea.darkside.css @@ -4,7 +4,7 @@ appearance: none; padding: var(--ax-space-8); background-color: var(--ax-bg-input); - border-radius: var(--ax-border-radius-medium); + border-radius: var(--ax-border-radius-large); border: 1px solid var(--ax-border-default); resize: none; width: 100%; diff --git a/@navikt/core/css/darkside/toggle-group.darkside.css b/@navikt/core/css/darkside/toggle-group.darkside.css index 6cd94607a5..ab11cc0a1c 100644 --- a/@navikt/core/css/darkside/toggle-group.darkside.css +++ b/@navikt/core/css/darkside/toggle-group.darkside.css @@ -10,7 +10,7 @@ /* Main Togglegroup */ .navds-toggle-group { - border-radius: var(--ax-border-radius-medium); + border-radius: var(--ax-border-radius-large); background-color: transparent; box-shadow: inset 0 0 0 1px var(--ax-border-default); display: inline-grid; @@ -30,7 +30,7 @@ cursor: pointer; background-color: transparent; color: var(--ax-text-default); - border-radius: var(--ax-border-radius-medium); + border-radius: var(--ax-border-radius-large); min-width: fit-content; position: relative; From 4dd2478dee77646f8193cdb56cad61b7cfa82916 Mon Sep 17 00:00:00 2001 From: Ken Date: Wed, 22 Jan 2025 15:26:55 +0100 Subject: [PATCH 3/3] :lipstick: Bolder medium+ headings --- .../css/darkside/baseline/fonts.darkside.css | 24 +++++++++---------- .../core/css/darkside/typography.darkside.css | 3 +++ 2 files changed, 15 insertions(+), 12 deletions(-) diff --git a/@navikt/core/css/darkside/baseline/fonts.darkside.css b/@navikt/core/css/darkside/baseline/fonts.darkside.css index 8be34d4057..6346670e0b 100755 --- a/@navikt/core/css/darkside/baseline/fonts.darkside.css +++ b/@navikt/core/css/darkside/baseline/fonts.darkside.css @@ -2,7 +2,7 @@ @font-face { font-family: "Source Sans 3"; font-style: italic; - font-weight: 400 600; + font-weight: 400 650; font-display: swap; src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-cyrillic_ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; @@ -12,7 +12,7 @@ @font-face { font-family: "Source Sans 3"; font-style: italic; - font-weight: 400 600; + font-weight: 400 650; font-display: swap; src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; @@ -22,7 +22,7 @@ @font-face { font-family: "Source Sans 3"; font-style: italic; - font-weight: 400 600; + font-weight: 400 650; font-display: swap; src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin_ext.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, @@ -33,7 +33,7 @@ @font-face { font-family: "Source Sans 3"; font-style: italic; - font-weight: 400 600; + font-weight: 400 650; font-display: swap; src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, @@ -44,7 +44,7 @@ @font-face { font-family: "Source Sans 3"; font-style: normal; - font-weight: 400 600; + font-weight: 400 650; font-display: swap; src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-cyrillic_ext.woff2) format("woff2"); unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; @@ -54,7 +54,7 @@ @font-face { font-family: "Source Sans 3"; font-style: normal; - font-weight: 400 600; + font-weight: 400 650; font-display: swap; src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-cyrillic.woff2) format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; @@ -64,7 +64,7 @@ @font-face { font-family: "Source Sans 3"; font-style: normal; - font-weight: 400 600; + font-weight: 400 650; font-display: swap; src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-latin_ext.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, @@ -75,7 +75,7 @@ @font-face { font-family: "Source Sans 3"; font-style: normal; - font-weight: 400 600; + font-weight: 400 650; font-display: swap; src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, @@ -88,7 +88,7 @@ @font-face { font-family: "Source Sans Pro"; font-style: italic; - font-weight: 400 600; + font-weight: 400 650; font-display: swap; src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic-latin_ext.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, @@ -99,7 +99,7 @@ @font-face { font-family: "Source Sans Pro"; font-style: italic; - font-weight: 400 600; + font-weight: 400 650; font-display: swap; src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-italic.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, @@ -110,7 +110,7 @@ @font-face { font-family: "Source Sans Pro"; font-style: normal; - font-weight: 400 600; + font-weight: 400 650; font-display: swap; src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal-latin_ext.woff2) format("woff2"); unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, @@ -121,7 +121,7 @@ @font-face { font-family: "Source Sans Pro"; font-style: normal; - font-weight: 400 600; + font-weight: 400 650; font-display: swap; src: url(https://cdn.nav.no/aksel/fonts/SourceSans3-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, diff --git a/@navikt/core/css/darkside/typography.darkside.css b/@navikt/core/css/darkside/typography.darkside.css index 601b491551..5f2e327918 100644 --- a/@navikt/core/css/darkside/typography.darkside.css +++ b/@navikt/core/css/darkside/typography.darkside.css @@ -8,6 +8,7 @@ font-size: var(--ax-font-size-heading-2xlarge); letter-spacing: -0.01em; line-height: var(--ax-font-line-height-heading-2xlarge); + font-weight: 650; } .navds-heading--xlarge.navds-typo--spacing { @@ -18,6 +19,7 @@ font-size: var(--ax-font-size-heading-xlarge); letter-spacing: -0.008em; line-height: var(--ax-font-line-height-heading-xlarge); + font-weight: 650; } .navds-heading--large.navds-typo--spacing { @@ -51,6 +53,7 @@ font-size: var(--ax-font-size-heading-medium); letter-spacing: -0.002em; line-height: var(--ax-font-line-height-heading-medium); + font-weight: 650; } .navds-heading--medium.navds-typo--spacing {