@navikt/ds-css 7.21.1 → 7.22.0

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @navikt/ds-css
 
+## 7.22.0
+
+### Minor Changes
+
+- Darkside: Components now use new `radius`-tokens, replacing `border-radius`-tokens. ([#3784](https://github.com/navikt/aksel/pull/3784))
+
 ## 7.21.1
 
 ### Patch Changes

package/darkside/accordion.darkside.css

@@ -10,7 +10,7 @@
   cursor: pointer;
   border: none;
   position: relative;
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
   background: transparent;
   color: var(--ax-text-accent-subtle);
 
@@ -91,7 +91,7 @@
 
 /* ------------------------- Accordion chevron icon ------------------------- */
 .aksel-accordion__icon-wrapper {
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
   width: 22px;
   height: 22px;
   align-self: center;

package/darkside/action-menu.darkside.css

@@ -1,7 +1,7 @@
 /* --------------------------- ActionMenu content --------------------------- */
 .aksel-action-menu__content {
   overflow: hidden;
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
   border: 1px solid var(--ax-border-neutral-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-xlarge);
+  border-radius: var(--ax-radius-12);
   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-large);
+  border-radius: var(--ax-radius-8);
   position: relative;
   padding-left: var(--__axc-action-menu-item-pl);
   padding-right: var(--__axc-action-menu-item-pr);
@@ -140,7 +140,7 @@
 .aksel-action-menu__shortcut {
   background-color: var(--ax-bg-neutral-moderateA);
   color: var(--ax-text-neutral);
-  border-radius: var(--ax-border-radius-small);
+  border-radius: var(--ax-radius-2);
   padding: 0 var(--ax-space-4);
   min-width: 1.125rem;
   height: 1.125rem;
@@ -159,7 +159,7 @@
   padding-right: var(--__axc-action-menu-item-pr);
   padding-left: var(--__axc-action-menu-item-pl);
   color: var(--ax-text-neutral-subtle);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-radius-4);
   user-select: none;
   cursor: default;
   font-size: var(--ax-font-size-small);

package/darkside/alert.darkside.css

@@ -1,5 +1,5 @@
 .aksel-alert {
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
   border: 1px solid;
   padding: var(--ax-space-20);
   display: flex;
@@ -40,7 +40,7 @@
   background-color: var(--ax-bg-info-moderate);
 
   > .aksel-alert__icon {
-    color: var(--ax-text-info-icon);
+    color: var(--ax-text-info-decoration);
   }
 }
 
@@ -49,7 +49,7 @@
   background-color: var(--ax-bg-success-moderate);
 
   > .aksel-alert__icon {
-    color: var(--ax-text-success-icon);
+    color: var(--ax-text-success-decoration);
   }
 }
 
@@ -58,7 +58,7 @@
   background-color: var(--ax-bg-warning-moderate);
 
   > .aksel-alert__icon {
-    color: var(--ax-text-warning-icon);
+    color: var(--ax-text-warning-decoration);
   }
 }
 
@@ -67,7 +67,7 @@
   background-color: var(--ax-bg-danger-moderate);
 
   > .aksel-alert__icon {
-    color: var(--ax-text-danger-icon);
+    color: var(--ax-text-danger-decoration);
   }
 }
 

package/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-large);
+  border-radius: var(--ax-radius-8);
   display: inline-flex;
   cursor: pointer;
   text-decoration: none;

package/darkside/chat.darkside.css

@@ -13,8 +13,8 @@
   }
 
   & .aksel-chat__bubble {
-    border-radius: var(--ax-border-radius-xlarge);
-    border-bottom-right-radius: var(--ax-border-radius-small);
+    border-radius: var(--ax-radius-12);
+    border-bottom-right-radius: var(--ax-radius-2);
   }
 }
 
@@ -22,7 +22,7 @@
 .aksel-chat__avatar {
   align-items: center;
   background-color: var(--ax-bg-raised);
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
   border: 1px solid var(--ax-border-neutral-subtleA);
   color: var(--ax-text-neutral);
   display: flex;
@@ -60,8 +60,8 @@
   display: flex;
   flex-direction: column;
   gap: var(--ax-space-8);
-  border-radius: var(--ax-border-radius-xlarge);
-  border-bottom-left-radius: var(--ax-border-radius-small);
+  border-radius: var(--ax-radius-12);
+  border-bottom-left-radius: var(--ax-radius-2);
   border: 1px solid var(--ax-border-neutral-subtleA);
 }
 

package/darkside/chips.darkside.css

@@ -24,7 +24,7 @@
   margin: 0;
   padding: 0 var(--ax-space-12);
   text-decoration: none;
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
   min-height: 2rem;
 
   &:focus-visible {
@@ -148,7 +148,7 @@
   font-size: 1.25rem;
   display: grid;
   place-items: center;
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
 }
 
 .aksel-chips--icon-left {

package/darkside/date.darkside.css

@@ -35,19 +35,19 @@
     width: 2.5rem;
     height: 2.5rem;
     text-align: center;
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
   }
 
   .rdp-day_range_start {
-    border-radius: 100% var(--ax-border-radius-xlarge) var(--ax-border-radius-xlarge) 100%;
+    border-radius: 100% var(--ax-radius-12) var(--ax-radius-12) 100%;
   }
 
   .rdp-day_range_end:not(.rdp-day_range_start) {
-    border-radius: var(--ax-border-radius-large) 100% 100% var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8) 100% 100% var(--ax-radius-8);
   }
 
   .rdp-day_range_start.rdp-day_range_end {
-    border-radius: var(--ax-border-radius-large);
+    border-radius: var(--ax-radius-8);
   }
 
   .aksel-date__field {
@@ -85,7 +85,7 @@
       height: 6px;
       display: block;
       background-color: var(--ax-text-accent-subtle);
-      border-radius: var(--ax-border-radius-full);
+      border-radius: var(--ax-radius-full);
       content: "";
       position: absolute;
       bottom: 5px;
@@ -140,7 +140,7 @@
   width: 3rem;
   height: 3rem;
   text-transform: capitalize;
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
   cursor: pointer;
 }
 
@@ -190,7 +190,7 @@
   text-decoration: none;
   border: none;
   background: none;
-  border-radius: calc(var(--ax-border-radius-large) - 1px);
+  border-radius: calc(var(--ax-radius-8) - 1px);
   padding: var(--ax-space-12);
   align-items: center;
   justify-content: center;

package/darkside/dropdown.darkside.css

@@ -46,7 +46,7 @@
   align-items: center;
   gap: var(--ax-space-8);
   padding: var(--ax-space-4);
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-radius-4);
   color: var(--ax-text-neutral);
 
   &:hover {

package/darkside/expansioncard.darkside.css

@@ -1,9 +1,9 @@
 .aksel-expansioncard {
-  --__axc-expansioncard-border-radius: calc(var(--ax-border-radius-xlarge) - 1px);
+  --__axc-expansioncard-border-radius: calc(var(--ax-radius-12) - 1px);
   --__axc-expansioncard-padding-block: var(--ax-space-20);
   --__axc-expansioncard-padding-inline: var(--ax-space-20);
 
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
   background-color: var(--ax-bg-raised);
   height: fit-content;
   border: 1px solid var(--ax-border-neutral);
@@ -91,7 +91,7 @@
   margin: 0;
   background: transparent;
   border: none;
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
   min-height: 3rem;
   min-width: 3rem;
   font-size: 1.5rem;

package/darkside/form/combobox.darkside.css

@@ -10,7 +10,7 @@
   flex-direction: column;
   width: 100%;
   position: relative;
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
 }
 
 .aksel-form-field:not(:is(.aksel-combobox--disabled, .aksel-combobox--readonly)) {
@@ -81,7 +81,7 @@
 
 .aksel-combobox__wrapper-inner {
   border: 1px solid var(--ax-border-neutral);
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
 
   &:has(.aksel-combobox__input:focus-visible) {
     outline: 3px solid var(--ax-border-focus);
@@ -135,7 +135,7 @@
 
   & > li {
     margin: auto 0;
-    border-radius: var(--ax-border-radius-full);
+    border-radius: var(--ax-radius-full);
   }
 
   & > li:last-of-type {
@@ -246,7 +246,7 @@
   border: 1px solid var(--ax-border-neutral-subtleA);
   display: flex;
   flex-direction: column;
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
   background-color: var(--ax-bg-raised);
   color: var(--ax-text-neutral);
   overscroll-behavior: contain;
@@ -271,7 +271,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-large);
+  border-radius: var(--ax-radius-8);
   border: 0;
   margin-inline: var(--ax-space-8);
   margin-block: var(--ax-space-2);
@@ -369,7 +369,7 @@
 }
 
 .aksel-combobox__list-item--new-option--focus {
-  border-radius: calc(var(--ax-border-radius-large) - 1px) calc(var(--ax-border-radius-large) - 1px) 0 0;
+  border-radius: calc(var(--ax-radius-8) - 1px) calc(var(--ax-radius-8) - 1px) 0 0;
 
   /* TODO: new option should get a wrapper div later to
 * style it properly with a nice rounded border radius
@@ -378,7 +378,7 @@
   outline-offset: -2px;
 
   &:only-child {
-    border-radius: calc(var(--ax-border-radius-large) - 1px);
+    border-radius: calc(var(--ax-radius-8) - 1px);
   }
 }
 

package/darkside/form/confirmation-panel.darkside.css

@@ -3,7 +3,7 @@
   flex-direction: column;
   gap: var(--ax-space-12);
   padding: var(--ax-space-16);
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
   border: 1px solid var(--ax-border-default);
   background-color: var(--ax-bg-moderate);
   transition: background-color linear 100ms;
@@ -25,8 +25,8 @@
     border-left: 8px solid;
     border-color: orange;
     forced-color-adjust: none;
-    border-start-start-radius: calc(var(--ax-border-radius-large) - 1px);
-    border-end-start-radius: calc(var(--ax-border-radius-large) - 1px);
+    border-start-start-radius: calc(var(--ax-radius-8) - 1px);
+    border-end-start-radius: calc(var(--ax-radius-8) - 1px);
   }
 
   .aksel-confirmation-panel--checked .aksel-confirmation-panel__inner::before {

package/darkside/form/error-summary.darkside.css

@@ -2,7 +2,7 @@
   background-color: var(--ax-bg-default);
   padding: var(--ax-space-20);
   border: 4px solid var(--ax-border-danger);
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
   outline-offset: 3px;
 
   &:focus-visible,

package/darkside/form/file-upload.darkside.css

@@ -16,7 +16,7 @@
   text-align: center;
   padding: var(--ax-space-20);
   border: 1px dashed var(--ax-border-neutral);
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
   background-color: var(--__axc-dropzone-background);
   color: var(--ax-text-neutral);
   transition: background-color var(--__axc-dropzone-animation-length-short) var(--__axc-dropzone-animation-ease-out);
@@ -62,7 +62,7 @@
     position: absolute;
     -webkit-backdrop-filter: blur(8px);
     backdrop-filter: blur(8px);
-    border-radius: var(--ax-border-radius-xlarge);
+    border-radius: var(--ax-radius-12);
     animation: akselDropzoneDragoverAnimation var(--__axc-dropzone-animation-length-short)
       var(--__axc-dropzone-animation-ease-out);
   }
@@ -111,7 +111,7 @@
 .aksel-dropzone__area-release__icon {
   display: grid;
   padding: var(--__axc-dropzone-icon-padding);
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
   background-color: var(--ax-bg-neutral-moderateA);
   transition:
     background-color 300ms var(--__axc-dropzone-animation-ease-out),
@@ -161,7 +161,7 @@ li.aksel-file-item {
   border: 1px solid var(--ax-border-neutral-subtleA);
   outline-offset: -1px;
   transition: outline-color 250ms cubic-bezier(0, 0.3, 0.15, 1);
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
   padding: var(--ax-space-20);
   display: flex;
   gap: var(--ax-space-12);
@@ -175,7 +175,7 @@ li.aksel-file-item {
 .aksel-file-item__icon {
   background-color: var(--ax-bg-neutral-moderateA);
   color: var(--ax-text-neutral);
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
   min-height: 2.5rem;
   min-width: 2.5rem;
   margin-top: var(--ax-space-2);

package/darkside/form/form-progress.darkside.css

@@ -24,7 +24,7 @@
   visibility: hidden;
   overflow: hidden;
   border: 1px solid var(--ax-border-neutral-subtleA);
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
   background: var(--ax-bg-raised);
   padding-inline: var(--ax-space-20);
   padding-block: 0;

package/darkside/form/form-summary.darkside.css

@@ -1,7 +1,7 @@
 .aksel-form-summary {
   overflow: hidden;
   border: 1px solid var(--ax-border-neutral-subtleA);
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
   background: var(--ax-bg-raised);
 }
 
@@ -74,7 +74,7 @@
   margin-top: var(--ax-space-8);
   padding: var(--ax-space-16);
   background: var(--ax-bg-info-moderateA);
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
   border: 1px solid var(--ax-border-info-subtleA);
 
   & .aksel-form-summary__answer {

package/darkside/form/radio-checkbox.darkside.css

@@ -30,7 +30,7 @@
 .aksel-checkbox__label::before,
 .aksel-radio__label::before {
   content: "";
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-radius-4);
   background-color: var(--ax-bg-input);
   flex-shrink: 0;
   width: 1.5rem;
@@ -39,7 +39,7 @@
 }
 
 .aksel-radio__label::before {
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
 }
 
 .aksel-checkbox__content,
@@ -74,7 +74,7 @@
   position: absolute;
   width: 100%;
   height: calc(100% - var(--ax-space-24));
-  border-radius: var(--ax-border-radius-medium);
+  border-radius: var(--ax-radius-4);
   outline: 3px solid var(--ax-border-focus);
   outline-offset: 3px;
   pointer-events: none;

package/darkside/form/search.darkside.css

@@ -22,7 +22,7 @@
 .aksel-search__wrapper {
   display: inline-flex;
   align-items: center;
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
 
   /* We have to outline the whole container to include the Search-buttons */
   &:has(.aksel-search__input:focus-visible) {
@@ -97,8 +97,8 @@
 .aksel-search__button-search {
   flex-shrink: 0;
   border-radius: 0;
-  border-top-right-radius: var(--ax-border-radius-large);
-  border-bottom-right-radius: var(--ax-border-radius-large);
+  border-top-right-radius: var(--ax-radius-8);
+  border-bottom-right-radius: var(--ax-radius-8);
 }
 
 .aksel-search__button-search.aksel-button--secondary {

package/darkside/form/select.darkside.css

@@ -1,7 +1,7 @@
 .aksel-select__input {
   appearance: none;
   background-color: var(--ax-bg-input);
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
   border: 1px solid var(--ax-border-neutral);
   color: var(--ax-text-neutral);
   width: 100%;

package/darkside/form/switch.darkside.css

@@ -57,7 +57,7 @@
     left: 0;
     width: 100%;
     height: calc(100% - var(--__axc-switch-block-padding) * 2);
-    border-radius: var(--ax-border-radius-medium);
+    border-radius: var(--ax-radius-4);
     outline: 3px solid var(--ax-border-focus);
     outline-offset: 3px;
     pointer-events: none;
@@ -85,7 +85,7 @@
   position: absolute;
   top: var(--ax-space-12);
   left: 0;
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
   border: 2px solid var(--ax-border-neutral);
   transition-property: background-color, border-color;
   transition-duration: 100ms;
@@ -124,7 +124,7 @@
 /* ------------------------------ Switch Thumb ------------------------------ */
 .aksel-switch__thumb {
   background-color: var(--ax-bg-neutral-strong);
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
   width: 1.125rem;
   height: 1.125rem;
   position: absolute;

package/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-large);
+  border-radius: var(--ax-radius-8);
   border: 1px solid var(--ax-border-neutral);
   min-height: 3rem;
   width: 100%;

package/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-large);
+  border-radius: var(--ax-radius-8);
   border: 1px solid var(--ax-border-neutral);
   resize: none;
   width: 100%;

package/darkside/guide-panel.darkside.css

@@ -35,7 +35,7 @@
 .aksel-guide {
   box-sizing: border-box;
   border: 2px solid var(--ax-border-info);
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
   overflow: hidden;
   width: var(--__axc-guide-panel-guide-size);
   height: var(--__axc-guide-panel-guide-size);
@@ -51,7 +51,7 @@
 .aksel-guide-panel__content {
   background-color: var(--ax-bg-raised);
   border: 2px solid var(--ax-border-info);
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
   position: relative;
 
   .aksel-guide-panel:is([data-poster="true"], [data-responsive="true"]) > & {
@@ -72,7 +72,7 @@
 
 .aksel-guide-panel__content-inner {
   padding: var(--ax-space-16);
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
   background-color: var(--ax-bg-raised);
   position: relative;
   height: 100%;

package/darkside/help-text.darkside.css

@@ -3,7 +3,7 @@
   border: 0;
   cursor: pointer;
   background-color: transparent;
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
   display: flex;
   justify-content: center;
   align-items: center;
@@ -13,13 +13,13 @@
 }
 
 .aksel-help-text__icon {
-  border-radius: var(--ax-border-radius-full);
+  border-radius: var(--ax-radius-full);
 }
 
 .aksel-help-text__popover.aksel-popover {
   background-color: var(--ax-bg-info-moderate);
   max-width: min(65ch, calc(100vw - var(--ax-space-24)));
-  border-radius: var(--ax-border-radius-large);
+  border-radius: var(--ax-radius-8);
   border: 1px solid var(--ax-border-info);
 }
 

package/darkside/modal.darkside.css

@@ -7,7 +7,7 @@
 
   background-color: var(--__axc-modal-bg);
   border: 1px solid var(--ax-border-neutral-subtleA);
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
   box-shadow: var(--ax-shadow-dialog);
   padding: 0;
   position: fixed;

package/darkside/panel.darkside.css

@@ -1,7 +1,7 @@
 .aksel-panel {
   background-color: var(--ax-bg-default);
   padding: var(--ax-space-16);
-  border-radius: var(--ax-border-radius-small);
+  border-radius: var(--ax-radius-2);
   border: 1px solid transparent;
 }
 

package/darkside/popover.darkside.css

@@ -3,7 +3,7 @@
   background: var(--ax-bg-raised);
   box-shadow: var(--ax-shadow-dialog);
   border: 1px solid var(--ax-border-neutral-subtleA);
-  border-radius: var(--ax-border-radius-xlarge);
+  border-radius: var(--ax-radius-12);
 
   /* Creates a small gutter between screen-edges on smaller devices */
   max-width: calc(100vw - var(--ax-space-24));