@digdir/designsystemet-css 0.6.1-alpha.1 → 0.7.0

package/LICENSE

@@ -1,4 +1,4 @@
-Copyright 2023 Digitaliseringsdirektoratet (Digdir)
+Copyright 2024 Digitaliseringsdirektoratet (Digdir)
 
 Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:
 

package/box.css

@@ -0,0 +1,73 @@
+@layer fds.box {
+  .fds-box--xsmall-shadow {
+    box-shadow: var(--fds-shadow-xsmall);
+  }
+
+  .fds-box--small-shadow {
+    box-shadow: var(--fds-shadow-small);
+  }
+
+  .fds-box--medium-shadow {
+    box-shadow: var(--fds-shadow-medium);
+  }
+
+  .fds-box--large-shadow {
+    box-shadow: var(--fds-shadow-large);
+  }
+
+  .fds-box--xlarge-shadow {
+    box-shadow: var(--fds-shadow-xlarge);
+  }
+
+  .fds-box--default-border-color {
+    border: 1px solid var(--fds-semantic-border-neutral-default);
+  }
+
+  .fds-box--subtle-border-color {
+    border: 1px solid var(--fds-semantic-border-neutral-subtle);
+  }
+
+  .fds-box--strong-border-color {
+    border: 1px solid var(--fds-semantic-border-neutral-strong);
+  }
+
+  .fds-box--small-border-radius {
+    border-radius: var(--fds-border_radius-small);
+  }
+
+  .fds-box--medium-border-radius {
+    border-radius: var(--fds-border_radius-medium);
+  }
+
+  .fds-box--large-border-radius {
+    border-radius: var(--fds-border_radius-large);
+  }
+
+  .fds-box--xlarge-border-radius {
+    border-radius: var(--fds-border_radius-xlarge);
+  }
+
+  .fds-box--xxlarge-border-radius {
+    border-radius: var(--fds-border_radius-xxlarge);
+  }
+
+  .fds-box--xxxlarge-border-radius {
+    border-radius: var(--fds-border_radius-xxxlarge);
+  }
+
+  .fds-box--xxxxlarge-border-radius {
+    border-radius: var(--fds-border_radius-xxxxlarge);
+  }
+
+  .fds-box--full-border-radius {
+    border-radius: var(--fds-border_radius-full);
+  }
+
+  .fds-box--default-background {
+    background-color: var(--fds-semantic-background-default);
+  }
+
+  .fds-box--subtle-background {
+    background-color: var(--fds-semantic-background-subtle);
+  }
+}

package/button.css

@@ -1,6 +1,6 @@
 @layer fds.btn {
   .fds-btn {
-    --fds-btn-padding: 0 var(--fds-spacing-4);
+    --fds-btn-padding: var(--fds-spacing-2) var(--fds-spacing-4);
 
     display: flex;
     align-items: center;
@@ -31,7 +31,7 @@
   }
 
   .fds-btn--small {
-    --fds-btn-padding: 0 var(--fds-spacing-3);
+    --fds-btn-padding: var(--fds-spacing-2) var(--fds-spacing-3);
 
     gap: var(--fds-sizing-1);
     font: var(--fds-typography-paragraph-short-small);
@@ -58,7 +58,7 @@
   }
 
   .fds-btn--medium {
-    --fds-btn-padding: 0 var(--fds-spacing-4);
+    --fds-btn-padding: var(--fds-spacing-2) var(--fds-spacing-4);
 
     gap: var(--fds-sizing-2);
     font: var(--fds-typography-paragraph-short-medium);
@@ -67,7 +67,7 @@
   }
 
   .fds-btn--large {
-    --fds-btn-padding: 0 var(--fds-spacing-5);
+    --fds-btn-padding: var(--fds-spacing-3) var(--fds-spacing-5);
 
     gap: var(--fds-sizing-2);
     font: var(--fds-typography-paragraph-short-large);

package/card.css

@@ -0,0 +1,157 @@
+@layer fds.card {
+  .fds-card__media {
+    width: auto;
+  }
+
+  .fds-card__media > * {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    border: 0;
+  }
+
+  .fds-card__footer,
+  .fds-card__content {
+    display: flex;
+    justify-content: flex-start;
+    gap: var(--fds-spacing-4);
+    flex-wrap: wrap;
+    word-wrap: break-word;
+    font: var(--fds-typography-paragraph-medium);
+    font-family: inherit;
+    padding: var(--fds-spacing-2) 0;
+  }
+
+  .fds-card__content {
+    flex-direction: column;
+  }
+
+  .fds-card__header {
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    word-wrap: break-word;
+    font: var(--fds-typography-heading-medium);
+    font-family: inherit;
+    padding: var(--fds-spacing-2) 0;
+  }
+
+  .fds-card {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    box-sizing: border-box;
+    position: relative;
+    overflow: hidden;
+    color: var(--fds-semantic-text-neutral-default);
+    border-radius: var(--fds-border_radius-medium);
+  }
+
+  .fds-card a,
+  .fds-card a:visited {
+    color: var(--fds-semantic-text-neutral-default);
+  }
+
+  .fds-card > hr {
+    width: 100%;
+    margin: var(--fds-spacing-3) 0;
+  }
+
+  .fds-card > *:not(.fds-card__media, hr) {
+    padding-left: var(--fds-spacing-6);
+    padding-right: var(--fds-spacing-6);
+  }
+
+  .fds-card > *:not(.fds-card__media):first-child {
+    padding-top: var(--fds-spacing-6);
+  }
+
+  .fds-card > *:not(.fds-card__media):last-child {
+    padding-bottom: var(--fds-spacing-6);
+  }
+
+  .fds-card__media:first-child {
+    padding-bottom: var(--fds-spacing-4);
+  }
+
+  .fds-card__media:last-child {
+    padding-top: var(--fds-spacing-6);
+  }
+
+  .fds-card--link {
+    text-decoration: none;
+  }
+
+  .fds-card--link h1,
+  .fds-card--link h2,
+  .fds-card--link h3,
+  .fds-card--link h4,
+  .fds-card--link h5,
+  .fds-card--link h6 {
+    text-decoration: underline;
+    text-decoration-thickness: max(1px, 0.0625rem, 0.1025em);
+    text-underline-offset: max(4px, 0.25rem, 0.22em);
+  }
+
+  .fds-card--neutral {
+    background-color: var(--fds-semantic-surface-neutral-default);
+    border: 1px solid var(--fds-semantic-border-neutral-subtle);
+  }
+
+  .fds-card--subtle {
+    background-color: var(--fds-semantic-surface-neutral-subtle);
+    border: 1px solid var(--fds-semantic-border-neutral-subtle);
+  }
+
+  .fds-card--neutral.fds-card--link:hover,
+  .fds-card--subtle.fds-card--link:hover {
+    background-color: var(--fds-semantic-surface-neutral-subtle-hover);
+  }
+
+  /*
+  --fds surface-neutral-subtle-active does not exist? Old style
+  .fds-card--neutral.fds-card--link:active,
+  .fds-card--subtle.fds-card--link:active {
+    background-color: var(--fds-semantic-surface-neutral-subtle-active);
+  }
+  */
+
+  .fds-card--first {
+    background-color: var(--fds-semantic-surface-first-light);
+    border: 1px solid var(--fds-semantic-border-neutral-subtle);
+  }
+
+  .fds-card--first.fds-card--link:hover {
+    background-color: var(--fds-semantic-surface-first-light-hover);
+  }
+
+  .fds-card--first.fds-card--link:active {
+    background-color: var(--fds-semantic-surface-first-light-active);
+  }
+
+  .fds-card--second {
+    background-color: var(--fds-semantic-surface-second-light);
+    border: 1px solid var(--fds-semantic-border-neutral-subtle);
+  }
+
+  .fds-card--second.fds-card--link:hover {
+    background-color: var(--fds-semantic-surface-second-light-hover);
+  }
+
+  .fds-card--second.fds-card--link:active {
+    background-color: var(--fds-semantic-surface-second-light-active);
+  }
+
+  .fds-card--third {
+    background-color: var(--fds-semantic-surface-third-light);
+    border: 1px solid var(--fds-semantic-border-neutral-subtle);
+  }
+
+  .fds-card--third.fds-card--link:hover {
+    background-color: var(--fds-semantic-surface-third-light-hover);
+  }
+
+  .fds-card--third.fds-card--link:active {
+    background-color: var(--fds-semantic-surface-third-light-active);
+  }
+}

package/checkbox.css

@@ -0,0 +1,175 @@
+@layer fds.checkbox {
+  .fds-checkbox {
+    --fds-checkbox-size: 1.75rem;
+    --fds-checkbox-focus-border-width: 3px;
+    --fds-checkbox-background: var(--fds-semantic-background-default);
+    --fds-checkbox-border-color: var(--fds-semantic-border-input-default);
+    --fds-checkbox-border__hover: 0 0 0 var(--fds-spacing-2) var(--fds-semantic-surface-info-subtle-hover);
+
+    display: grid;
+  }
+
+  .fds-checkbox:has(.fds-checkbox__label) {
+    grid-template-columns: var(--fds-checkbox-size) auto;
+    gap: var(--fds-spacing-2);
+  }
+
+  /* Checkbox */
+  .fds-checkbox__input {
+    position: relative;
+    width: var(--fds-checkbox-size);
+    height: var(--fds-checkbox-size);
+    z-index: 1;
+    appearance: none;
+    margin: 0;
+    align-self: center;
+    outline: none;
+    cursor: pointer;
+    box-shadow: inset 0 0 0 2px var(--fds-checkbox-border-color);
+    background: var(--fds-checkbox-background);
+    border-radius: var(--fds-border_radius-medium);
+  }
+
+  .fds-checkbox__input::before {
+    position: absolute;
+    content: '';
+    display: block;
+    width: 2.75rem;
+    height: 2.75rem;
+    transform: translate(-50%, -50%);
+    top: 50%;
+    left: 50%;
+    cursor: pointer;
+    border-radius: var(--fds-border_radius-medium);
+  }
+
+  .fds-checkbox__label {
+    min-height: var(--fds-sizing-10);
+    min-width: min-content;
+    display: inline-flex;
+    flex-direction: row;
+    gap: var(--fds-spacing-1);
+    align-items: center;
+    cursor: pointer;
+  }
+
+  .fds-checkbox__description {
+    margin-top: calc(var(--fds-spacing-3) * -1);
+    color: var(--fds-semantic-text-neutral-subtle);
+    grid-column: 2;
+  }
+
+  .fds-checkbox--disabled > .fds-checkbox__input,
+  .fds-checkbox--disabled > .fds-checkbox__label,
+  .fds-checkbox--disabled > .fds-checkbox__input::before {
+    cursor: not-allowed;
+  }
+
+  .fds-checkbox--disabled > .fds-checkbox__label,
+  .fds-checkbox--disabled > .fds-checkbox__input,
+  .fds-checkbox--disabled > .fds-checkbox__description {
+    opacity: var(--fds-opacity-disabled);
+  }
+
+  .fds-checkbox--readonly > .fds-checkbox__label,
+  .fds-checkbox--readonly > .fds-checkbox__input,
+  .fds-checkbox--readonly > .fds-checkbox__input::before {
+    cursor: default;
+  }
+
+  .fds-checkbox__input:focus-visible {
+    outline-offset: 0;
+    outline: var(--fds-checkbox-focus-border-width) solid var(--fds-semantic-border-focus-outline);
+    box-shadow: inset 0 0 0 var(--fds-checkbox-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
+  }
+
+  .fds-checkbox__input:checked {
+    --fds-checkbox-border-color: var(--fds-semantic-border-input-hover);
+
+    background: var(--fds-checkbox-border-color);
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5509 6.32414C18.9414 6.71467 18.9414 7.34783 18.5509 7.73836L10.5821 15.7071C10.1916 16.0976 9.55842 16.0976 9.16789 15.7071L4.94914 11.4884C4.55862 11.0978 4.55862 10.4647 4.94914 10.0741C5.33967 9.68362 5.97283 9.68362 6.36336 10.0741L9.875 13.5858L17.1366 6.32414C17.5272 5.93362 18.1603 5.93362 18.5509 6.32414Z' fill='white'/%3E%3C/svg%3E%0A");
+  }
+
+  .fds-checkbox__input:indeterminate {
+    --fds-checkbox-border-color: var(--fds-semantic-border-input-hover);
+
+    background-color: var(--fds-checkbox-border-color);
+    background-repeat: no-repeat;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 11.25C4.25 10.4216 4.92157 9.75 5.75 9.75H16.75C17.5784 9.75 18.25 10.4216 18.25 11.25C18.25 12.0784 17.5784 12.75 16.75 12.75H5.75C4.92157 12.75 4.25 12.0784 4.25 11.25Z' fill='white' /%3E%3C/svg%3E%0A");
+  }
+
+  .fds-checkbox--readonly > .fds-checkbox__input {
+    --fds-checkbox-border-color: var(--fds-semantic-border-neutral-subtle);
+    --fds-checkbox-background: var(--fds-semantic-surface-neutral-subtle);
+  }
+
+  .fds-checkbox__input:checked:not(:focus-visible) {
+    box-shadow: inset 0 0 0 2px var(--fds-checkbox-border-color);
+  }
+
+  .fds-checkbox--readonly > .fds-checkbox__input:checked {
+    background: var(--fds-checkbox-background);
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.5509 6.32414C18.9414 6.71467 18.9414 7.34783 18.5509 7.73836L10.5821 15.7071C10.1916 16.0976 9.55842 16.0976 9.16789 15.7071L4.94914 11.4884C4.55862 11.0978 4.55862 10.4647 4.94914 10.0741C5.33967 9.68362 5.97283 9.68362 6.36336 10.0741L9.875 13.5858L17.1366 6.32414C17.5272 5.93362 18.1603 5.93362 18.5509 6.32414Z' fill='%2368707c'/%3E%3C/svg%3E%0A");
+  }
+
+  .fds-checkbox--readonly > .fds-checkbox__input:indeterminate {
+    background: var(--fds-checkbox-background);
+    background-repeat: no-repeat;
+    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 23 23' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.25 11.25C4.25 10.4216 4.92157 9.75 5.75 9.75H16.75C17.5784 9.75 18.25 10.4216 18.25 11.25C18.25 12.0784 17.5784 12.75 16.75 12.75H5.75C4.92157 12.75 4.25 12.0784 4.25 11.25Z' fill='%2368707c' /%3E%3C/svg%3E%0A");
+  }
+
+  .fds-checkbox--error > .fds-checkbox__input:not(:disabled, :focus-visible) {
+    --fds-checkbox-border-color: var(--fds-semantic-border-danger-default);
+  }
+
+  /* Only use hover for non-touch devices to prevent sticky-hovering
+    "input:not(:read-only)" does not work so using ".container:not(.readonly) >" instead */
+  @media (hover: hover) and (pointer: fine) {
+    .fds-checkbox:not(.fds-checkbox--readonly, .fds-checkbox--disabled) > .fds-checkbox__label:hover,
+    .fds-checkbox:not(.fds-checkbox--readonly, .fds-checkbox--disabled) > .fds-checkbox__input:hover + .fds-checkbox__label {
+      color: var(--fds-semantic-text-action-hover);
+    }
+
+    .fds-checkbox:not(.fds-checkbox--readonly, .fds-checkbox--disabled) > .fds-checkbox__input:hover:not(:checked) {
+      --fds-checkbox-border-color: var(--fds-semantic-border-input-hover);
+
+      box-shadow:
+        var(--fds-checkbox-border__hover),
+        inset 0 0 0 2px var(--fds-checkbox-border-color);
+    }
+
+    .fds-checkbox:not(.fds-checkbox--readonly, .fds-checkbox--disabled) > .fds-checkbox__input:hover:checked {
+      --fds-checkbox-border-color: var(--fds-semantic-border-input-hover);
+
+      box-shadow:
+        var(--fds-checkbox-border__hover),
+        inset 0 0 0 2px var(--fds-checkbox-border-color);
+    }
+
+    .fds-checkbox:not(.fds-checkbox--readonly, .fds-checkbox--disabled) > .fds-checkbox__input:hover:checked:focus-visible {
+      box-shadow:
+        var(--fds-checkbox-border__hover),
+        inset 0 0 0 var(--fds-checkbox-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
+    }
+  }
+
+  /** Sizing */
+
+  .fds-checkbox--small {
+    --fds-checkbox-size: var(--fds-sizing-5);
+
+    min-height: var(--fds-sizing-10);
+  }
+
+  .fds-checkbox--medium {
+    --fds-checkbox-size: var(--fds-sizing-6);
+
+    min-height: var(--fds-sizing-11);
+  }
+
+  .fds-checkbox--large {
+    --fds-checkbox-size: var(--fds-sizing-7);
+
+    min-height: var(--fds-sizing-12);
+  }
+}

package/chip.css

@@ -0,0 +1,173 @@
+@layer fds.chip {
+  /*
+  The class is unused. There is no root chip component?
+  .chip {
+    display: flex;
+  }
+  */
+
+  .fds-chip--button {
+    --fdsc-chip-height: var(--fds-sizing-7);
+    --fdsc-chip-padding: var(--fds-spacing-3);
+    --fdsc-chip-background: var(--fds-semantic-surface-action-first-subtle);
+    --fdsc-chip-text-color: var(--fds-semantic-text-neutral-default);
+    --fdsc-chip-border: var(--fds-semantic-border-action-first-subtle);
+    --fdsc-chip-border-radius: var(--fds-border_radius-full);
+
+    background: var(--fdsc-chip-background);
+    padding: 0 var(--fdsc-chip-padding);
+    min-height: var(--fdsc-chip-height);
+    border-radius: var(--fdsc-chip-border-radius);
+    border: 1px solid var(--fdsc-chip-border);
+    color: var(--fdsc-chip-text-color);
+    text-decoration: none;
+    font-family: inherit;
+    display: inline-flex;
+    align-items: center;
+  }
+
+  .fds-chip--button:disabled,
+  .fds-chip--button[aria-disabled='true'] {
+    cursor: not-allowed;
+    opacity: var(--fds-opacity-disabled);
+  }
+
+  .fds-chip--button .fds-chip__label {
+    color: inherit;
+    line-height: normal;
+    display: flex;
+    align-items: center;
+    flex-direction: row;
+    gap: var(--fds-spacing-2);
+  }
+
+  .fds-chip--removable {
+    --fdsc-removable-background: var(--fds-semantic-surface-action-default);
+    --fdsc-removable-text-color: var(--fds-semantic-text-neutral-on_inverted);
+    --fdsc-removable-chip-size: var(--fds-sizing-7);
+    --fdsc-removable-chip-xmark-color: var(--fds-semantic-text-neutral-on_inverted);
+    --fdsc-removable-chip-xmark-padding_right: var(--fds-spacing-1);
+    --fdsc-removable-chip-xmark-size: var(--fds-sizing-6);
+    --fdsc-removable-chip-xmark-wrapper-width: calc(var(--fdsc-removable-chip-xmark-size) + var(--fdsc-removable-chip-xmark-padding_right));
+
+    color: var(--fdsc-removable-text-color);
+    background: var(--fdsc-removable-background);
+    border: 0;
+    padding-right: var(--fds-spacing-2);
+    min-height: var(--fdsc-chip-height);
+  }
+
+  .fds-chip--removable.fds-chip--small {
+    padding-right: var(--fds-spacing-1);
+  }
+
+  .fds-chip--removable.fds-chip--large {
+    padding-right: var(--fds-spacing-2);
+  }
+
+  .fds-chip__x-mark {
+    color: var(--fdsc-removable-chip-xmark-color);
+    height: var(--fdsc-removable-chip-xmark-size);
+    width: var(--fdsc-removable-chip-xmark-size);
+  }
+
+  .fds-chip__x-mark .fds-chip__icon {
+    height: var(--fdsc-removable-chip-xmark-size);
+    width: var(--fdsc-removable-chip-xmark-size);
+  }
+
+  .fds-chip--spacing {
+    padding-left: var(--fds-spacing-2) !important;
+  }
+
+  .fds-chip--small .fds-chip__checkmark-icon {
+    height: var(--fds-sizing-5);
+    width: auto;
+  }
+
+  .fds-chip--medium .fds-chip__checkmark-icon {
+    height: 24px;
+    width: auto;
+  }
+
+  .fds-chip--large .fds-chip__checkmark-icon {
+    height: 26px;
+    width: auto;
+  }
+
+  .fds-chip--group-container {
+    --fdsc-gap: var(--fds-spacing-2);
+
+    display: flex;
+    gap: var(--fdsc-gap);
+    list-style-type: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .fds-chip--group-container.fds-chip--small {
+    --fdsc-gap: var(--fds-spacing-2);
+  }
+
+  .fds-chip--group-container.fds-chip--medium {
+    --fdsc-gap: var(--fds-spacing-2);
+  }
+
+  .fds-chip--group-container.fds-chip--large {
+    --fdsc-gap: var(--fds-spacing-2);
+  }
+
+  /* Only use hover for non-touch devices to prevent sticky-hovering */
+  @media (hover: hover) and (pointer: fine) {
+    .fds-chip--button:not(:disabled, [aria-disabled='true']):hover {
+      --fdsc-chip-background: var(--fds-semantic-surface-action-first-subtle-hover);
+      --fdsc-chip-text-color: var(--fds-semantic-text-neutral-default);
+      --fdsc-chip-border: var(--fds-semantic-border-action-first-subtle-hover);
+
+      cursor: pointer;
+    }
+
+    .fds-chip--button:not(:disabled, [aria-disabled='true']):is([aria-pressed='true']):hover {
+      --fdsc-chip-background: var(--fds-semantic-surface-action-first-no_fill-active);
+      --fdsc-chip-text-color: var(--fds-semantic-text-neutral-default);
+    }
+
+    .fds-chip--removable:not(:disabled, [aria-disabled='true']):hover,
+    .fds-chip--removable:not(:disabled, [aria-disabled='true']):focus {
+      --fdsc-removable-background: var(--fds-semantic-surface-action-hover);
+      --fdsc-removable-chip-xmark-color: var(--fds-semantic-text-neutral-on_inverted);
+    }
+  }
+
+  .fds-chip--button:is([aria-pressed='true']),
+  .fds-chip--button:not(:disabled, [aria-disabled='true']):active,
+  .fds-chip--removable:is([aria-pressed='true']),
+  .fds-chip--removable:not(:disabled, [aria-disabled='true']):active {
+    --fdsc-chip-background: var(--fds-semantic-surface-action-first-active);
+    --fdsc-chip-text-color: var(--fds-semantic-text-neutral-on_inverted);
+    --fdsc-chip-border: var(--fds-semantic-surface-action-first-active);
+    --fdsc-removable-background: var(--fds-semantic-surface-action-first-active);
+    --fdsc-removable-text-color: var(--fds-semantic-text-neutral-on_inverted);
+  }
+
+  .fds-chip--small {
+    --fdsc-chip-height: var(--fds-sizing-7);
+    --fdsc-chip-padding: var(--fds-spacing-3);
+    --fdsc-removable-chip-xmark-size: var(--fds-sizing-5);
+    --fdsc-removable-chip-xmark-padding_right: var(--fds-spacing-1);
+  }
+
+  .fds-chip--medium {
+    --fdsc-chip-height: var(--fds-sizing-8);
+    --fdsc-chip-padding: var(--fds-spacing-3);
+    --fdsc-removable-chip-xmark-size: var(--fds-sizing-6);
+    --fdsc-removable-chip-xmark-padding_right: var(--fds-spacing-2);
+  }
+
+  .fds-chip--large {
+    --fdsc-chip-height: var(--fds-sizing-9);
+    --fdsc-chip-padding: var(--fds-spacing-4);
+    --fdsc-removable-chip-xmark-size: var(--fds-sizing-7);
+    --fdsc-removable-chip-xmark-padding_right: var(--fds-spacing-3);
+  }
+}