@digdir/designsystemet-css 0.6.1-alpha.0 → 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/accordion.css

@@ -0,0 +1,132 @@
+@layer fds.accordion {
+  .fds-accordion {
+    --fds-accordion-border-radius: var(--fds-border_radius-interactive);
+    --fds-accordion-border-color: var(--fds-semantic-border-neutral-subtle);
+
+    border-bottom: 1px solid var(--fds-semantic-border-neutral-subtle);
+    box-sizing: border-box;
+  }
+
+  .fds-accordion--border {
+    border: 1px solid var(--fds-accordion-border-color);
+    border-radius: var(--fds-accordion-border-radius);
+  }
+
+  .fds-accordion__expand-icon {
+    border-radius: var(--fds-border_radius-interactive);
+  }
+
+  .fds-accordion__content {
+    padding: var(--fds-spacing-5, 1rem);
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .fds-accordion__header {
+    margin: 0;
+  }
+
+  .fds-accordion__button {
+    width: 100%;
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: var(--fds-spacing-2);
+    margin: 0;
+    text-align: left;
+    cursor: pointer;
+    border: none;
+    border-top: 1px solid var(--fds-semantic-border-neutral-subtle);
+    padding: var(--fds-spacing-4);
+  }
+
+  .fds-accordion--border .fds-accordion__button {
+    border-radius: var(--fds-accordion-border-radius);
+  }
+
+
+  .fds-accordion__item:focus-within {
+    position: relative;
+  }
+
+  .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__expand-icon {
+    transform: rotateZ(180deg);
+  }
+
+  .fds-accordion--neutral,
+  .fds-accordion--neutral .fds-accordion__button {
+    background-color: var(--fds-semantic-surface-neutral-default);
+  }
+
+  .fds-accordion--subtle,
+  .fds-accordion--subtle .fds-accordion__button {
+    background-color: var(--fds-semantic-surface-neutral-subtle);
+  }
+
+  .fds-accordion--first,
+  .fds-accordion--first .fds-accordion__button {
+    --fds-accordion-border-color: var(--fds-semantic-border-first-default);
+
+    background: var(--fds-semantic-surface-first-light);
+  }
+
+
+  .fds-accordion--second,
+  .fds-accordion--second .fds-accordion__button {
+    --fds-accordion-border-color: var(--fds-semantic-border-second-default);
+
+    background: var(--fds-semantic-surface-second-light);
+  }
+
+
+  .fds-accordion--third,
+  .fds-accordion--third .fds-accordion__button {
+    --fds-accordion-border-color: var(--fds-semantic-border-third-default);
+
+    background: var(--fds-semantic-surface-third-light);
+  }
+
+  .fds-accordion--first .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
+  .fds-accordion--second .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
+  .fds-accordion--third .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button {
+    background-color: rgba(0 0 0 / 0.03);
+  }
+
+  .fds-accordion--neutral .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button,
+  .fds-accordion--subtle .fds-accordion__item:where(.fds-accordion__item--open) .fds-accordion__button {
+    background-color: var(--fds-semantic-surface-action-first-no_fill-hover);
+  }
+
+  .fds-accordion--border .fds-accordion__item:first-child .fds-accordion__button {
+    border-top: 0;
+  }
+
+  .fds-accordion--first .fds-accordion__item:not(:first-child) .fds-accordion__button,
+  .fds-accordion--second .fds-accordion__item:not(:first-child) .fds-accordion__button,
+  .fds-accordion--third .fds-accordion__item:not(:first-child) .fds-accordion__button {
+    border-top: 1px solid var(--fds-semantic-surface-neutral-default);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .fds-accordion__button:hover .fds-accordion__expand-icon {
+      background-color: rgba(0 0 0 / 0.1);
+    }
+
+    .fds-accordion--neutral .fds-accordion__button:hover,
+    .fds-accordion--subtle .fds-accordion__button:hover {
+      background-color: var(--fds-semantic-surface-neutral-subtle-hover);
+    }
+
+    .fds-accordion--first .fds-accordion__button:hover {
+      background-color: var(--fds-semantic-surface-first-light-hover);
+    }
+
+    .fds-accordion--second .fds-accordion__button:hover {
+      background-color: var(--fds-semantic-surface-second-light-hover);
+    }
+
+    .fds-accordion--third .fds-accordion__button:hover {
+      background-color: var(--fds-semantic-surface-third-light-hover);
+    }
+  }
+}

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);
+  }
+}