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

package/pagination.css

@@ -0,0 +1,69 @@
+@layer fds.pagination {
+  .fds-pagination {
+    --fds-pagination-listitem-margin: var(--fds-spacing-4);
+    --fds-pagination-ellipsis-width: var(--fds-sizing-12);
+    --fds-pagination-chevron-margin: var(--fds-spacing-2);
+
+    list-style-type: none;
+    display: flex;
+    padding: 0;
+    margin: 0;
+    position: relative;
+    width: fit-content;
+  }
+
+  .fds-pagination--hidden {
+    visibility: hidden;
+  }
+
+  .fds-pagination--small {
+    --fds-pagination-chevron-margin: var(--fds-spacing-2);
+  }
+
+  .fds-pagination--medium {
+    --fds-pagination-chevron-margin: var(--fds-spacing-2);
+  }
+
+  .fds-pagination--large {
+    --fds-pagination-chevron-margin: var(--fds-spacing-2);
+  }
+
+  .fds-pagination li:first-child {
+    margin-right: var(--fds-pagination-chevron-margin);
+  }
+
+  .fds-pagination li:last-child {
+    margin-left: var(--fds-pagination-chevron-margin);
+  }
+
+  .fds-pagination__item {
+    flex: 1;
+    margin-right: var(--fds-pagination-listitem-margin);
+  }
+
+  .fds-pagination--small .fds-pagination__item {
+    --fds-pagination-listitem-margin: var(--fds-spacing-2);
+    --fds-pagination-ellipsis-width: var(--fds-sizing-10);
+  }
+
+  .fds-pagination--medium .fds-pagination__item {
+    --fds-pagination-listitem-margin: var(--fds-spacing-4);
+    --fds-pagination-ellipsis-width: var(--fds-sizing-12);
+  }
+
+  .fds-pagination--large .fds-pagination__item {
+    --fds-pagination-listitem-margin: var(--fds-spacing-6);
+    --fds-pagination-ellipsis-width: var(--fds-sizing-14);
+  }
+
+  .fds-pagination__item.fds-pagination--compact {
+    --fds-pagination-listitem-margin: var(--fds-spacing-0);
+    --fds-pagination-chevron-margin: var(--fds-spacing-1);
+  }
+
+  .fds-pagination__ellipsis {
+    margin-top: 0.5em;
+    text-align: center;
+    width: var(--fds-pagination-ellipsis-width);
+  }
+}

package/paragraph.css

@@ -0,0 +1,82 @@
+@layer fds.typography.paragraph {
+  .fds-paragraph {
+    --fdsc-bottom-spacing: var(--fds-spacing-5);
+
+    color: var(--fds-semantic-text-neutral-default);
+    margin: 0;
+  }
+
+  .fds-paragraph--spacing {
+    margin-bottom: var(--fdsc-bottom-spacing);
+  }
+
+  .fds-paragraph--large {
+    --fdsc-bottom-spacing: var(--fds-spacing-6);
+
+    font: var(--fds-typography-paragraph-large);
+    font-family: inherit;
+  }
+
+  .fds-paragraph--large.fds-paragraph--short {
+    font: var(--fds-typography-paragraph-short-large);
+    font-family: inherit;
+  }
+
+  .fds-paragraph--large.fds-paragraph--long {
+    line-height: var(--fds-typography-paragraph-long-large);
+  }
+
+  .fds-paragraph--medium {
+    --fdsc-bottom-spacing: var(--fds-spacing-5);
+
+    font: var(--fds-typography-paragraph-medium);
+    font-family: inherit;
+  }
+
+  .fds-paragraph--medium.fds-paragraph--short {
+    --fdsc-bottom-spacing: var(--fds-spacing-5);
+
+    font: var(--fds-typography-paragraph-short-medium);
+    font-family: inherit;
+  }
+
+  .fds-paragraph--medium.fds-paragraph--long {
+    line-height: var(--fds-typography-paragraph-long-medium);
+  }
+
+  .fds-paragraph--small {
+    --fdsc-bottom-spacing: var(--fds-spacing-4);
+
+    font: var(--fds-typography-paragraph-small);
+    font-family: inherit;
+  }
+
+  .fds-paragraph--small.fds-paragraph--short {
+    --fdsc-bottom-spacing: var(--fds-spacing-4);
+
+    font: var(--fds-typography-paragraph-short-small);
+    font-family: inherit;
+  }
+
+  .fds-paragraph--small.fds-paragraph--long {
+    line-height: var(--fds-typography-paragraph-long-small);
+  }
+
+  .fds-paragraph--xsmall {
+    --fdsc-bottom-spacing: var(--fds-spacing-3);
+
+    font: var(--fds-typography-paragraph-xsmall);
+    font-family: inherit;
+  }
+
+  .fds-paragraph--xsmall.fds-paragraph--short {
+    --fdsc-bottom-spacing: var(--fds-spacing-3);
+
+    font: var(--fds-typography-paragraph-short-xsmall);
+    font-family: inherit;
+  }
+
+  .fds-paragraph--xsmall.fds-paragraph--long {
+    line-height: var(--fds-typography-paragraph-long-xsmall);
+  }
+}

package/popover.css

@@ -0,0 +1,79 @@
+@layer fds.fds-popover {
+  .fds-popover {
+    --fds-popover-border: 1px solid;
+    --fds-popover-background: var(--fds-semantic-surface-neutral-default);
+
+    z-index: 1500;
+    background: var(--fds-popover-background);
+    padding: var(--fds-spacing-3);
+    border: var(--fds-popover-border);
+    border-radius: var(--fds-border_radius-medium);
+    max-width: 300px;
+  }
+
+  .fds-popover--small {
+    padding: var(--fds-spacing-2) var(--fds-spacing-3);
+  }
+
+  .fds-popover--medium {
+    padding: var(--fds-spacing-3) var(--fds-spacing-4);
+  }
+
+  .fds-popover--large {
+    padding: var(--fds-spacing-3) var(--fds-spacing-5);
+  }
+
+  .fds-popover--default {
+    --fds-popover-background: var(--fds-semantic-surface-neutral-default);
+
+    border-color: var(--fds-semantic-border-neutral-default);
+  }
+
+  .fds-popover--info {
+    --fds-popover-background: var(--fds-semantic-surface-info-subtle);
+
+    border-color: var(--fds-semantic-border-info-default);
+  }
+
+  .fds-popover--warning {
+    --fds-popover-background: var(--fds-semantic-surface-warning-subtle);
+
+    border-color: var(--fds-semantic-border-warning-default);
+  }
+
+  .fds-popover--danger {
+    --fds-popover-background: var(--fds-semantic-surface-danger-subtle);
+
+    border-color: var(--fds-semantic-border-danger-default);
+  }
+
+  .fds-popover__arrow {
+    position: absolute;
+    background: var(--fds-popover-background);
+    transform: rotate(45deg);
+  }
+
+  .fds-popover__arrow.fds-popover__arrow--top {
+    border-top: var(--fds-popover-border);
+    border-left: var(--fds-popover-border);
+    border-color: inherit;
+  }
+
+  .fds-popover__arrow.fds-popover__arrow--bottom {
+    border-bottom: var(--fds-popover-border);
+    border-right: var(--fds-popover-border);
+    border-color: inherit;
+  }
+
+  .fds-popover__arrow.fds-popover__arrow--right {
+    border-top: var(--fds-popover-border);
+    border-right: var(--fds-popover-border);
+    border-color: inherit;
+  }
+
+  .fds-popover__arrow.fds-popover__arrow--left {
+    border-bottom: var(--fds-popover-border);
+    border-left: var(--fds-popover-border);
+    border-color: inherit;
+  }
+}

package/radio.css

@@ -0,0 +1,171 @@
+@layer fds.radio {
+  .fds-radio {
+    --fds-radio-size: 1.75rem;
+    --fds-radio-focus-border-width: 3px;
+    --fds-radio-background: var(--fds-semantic-background-default);
+    --fds-radio-border-color: var(--fds-semantic-border-input-default);
+    --fds-radio-border__hover: 0 0 0 var(--fds-spacing-2) var(--fds-semantic-surface-info-subtle-hover);
+
+    display: grid;
+  }
+
+  .fds-radio:has(.fds-radio__label) {
+    grid-template-columns: var(--fds-radio-size) auto;
+    gap: var(--fds-spacing-2);
+  }
+
+  /* Radio */
+  .fds-radio__input {
+    position: relative;
+    width: var(--fds-radio-size);
+    height: var(--fds-radio-size);
+    z-index: 1;
+    appearance: none;
+    outline: none;
+    cursor: pointer;
+    margin: 0;
+    align-self: center;
+    box-shadow: inset 0 0 0 2px var(--fds-radio-border-color);
+    background: var(--fds-radio-background);
+    border-radius: 50%;
+  }
+
+  .fds-radio__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-radio__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-radio__description {
+    margin-top: calc(var(--fds-spacing-3) * -1);
+    color: var(--fds-semantic-text-neutral-subtle);
+    grid-column: 2;
+  }
+
+  .fds-radio--disabled > .fds-radio__input,
+  .fds-radio--disabled > .fds-radio__label,
+  .fds-radio--disabled > .fds-radio__input::before {
+    cursor: not-allowed;
+  }
+
+  .fds-radio--disabled > .fds-radio__label,
+  .fds-radio--disabled > .fds-radio__input,
+  .fds-radio--disabled > .fds-radio__description {
+    opacity: var(--fds-opacity-disabled);
+  }
+
+  .fds-radio--readonly > .fds-radio__input,
+  .fds-radio--readonly > .fds-radio__label,
+  .fds-radio--readonly > .fds-radio__input::before {
+    cursor: default;
+  }
+
+  .fds-radio__input:focus-visible {
+    outline-offset: 0;
+    outline: var(--fds-radio-focus-border-width) solid var(--fds-semantic-border-focus-outline);
+    box-shadow:
+      inset 0 0 0 var(--fds-radio-focus-border-width) var(--fds-semantic-border-focus-boxshadow),
+      inset 0 0 0 6px var(--fds-radio-background);
+  }
+
+  .fds-radio__input:checked {
+    --fds-radio-border-color: var(--fds-semantic-border-input-hover);
+
+    background: var(--fds-radio-border-color);
+  }
+
+  .fds-radio--readonly > .fds-radio__input {
+    --fds-radio-border-color: var(--fds-semantic-border-neutral-subtle);
+    --fds-radio-background: var(--fds-semantic-surface-neutral-subtle);
+  }
+
+  .fds-radio__input:checked:not(:focus-visible) {
+    box-shadow:
+      inset 0 0 0 2px var(--fds-radio-border-color),
+      inset 0 0 0 6px var(--fds-radio-background);
+  }
+
+  .fds-radio--readonly > .fds-radio__input:checked {
+    background: var(--fds-semantic-border-neutral-default);
+  }
+
+  .fds-radio--error > .fds-radio__input:not(:disabled, :focus-visible) {
+    --fds-radio-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-radio:not(.fds-radio--readonly, .fds-radio--disabled) > .fds-radio__label:hover,
+    .fds-radio:not(.fds-radio--readonly, .fds-radio--disabled) > .fds-radio__input:hover + .fds-radio__label {
+      color: var(--fds-semantic-text-action-hover);
+    }
+
+    .fds-radio:not(.fds-radio--readonly, .fds-radio--disabled) > .fds-radio__input:hover:not(:checked) {
+      --fds-radio-border-color: var(--fds-semantic-border-input-hover);
+
+      box-shadow:
+        var(--fds-radio-border__hover),
+        inset 0 0 0 2px var(--fds-radio-border-color);
+    }
+
+    .fds-radio:not(.fds-radio--readonly, .fds-radio--disabled) > .fds-radio__input:hover:checked {
+      --fds-radio-border-color: var(--fds-semantic-border-input-hover);
+
+      box-shadow:
+        var(--fds-radio-border__hover),
+        inset 0 0 0 2px var(--fds-radio-border-color),
+        inset 0 0 0 6px var(--fds-radio-background);
+    }
+
+    .fds-radio:not(.fds-radio--readonly, .fds-radio--disabled) > .fds-radio__input:hover:checked:focus-visible {
+      box-shadow:
+        var(--fds-radio-border__hover),
+        inset 0 0 0 var(--fds-radio-focus-border-width) var(--fds-semantic-border-focus-boxshadow),
+        inset 0 0 0 6px var(--fds-radio-background);
+    }
+  }
+
+  /** Sizing */
+
+  .fds-radio--small {
+    --fds-radio-size: var(--fds-sizing-5);
+
+    min-height: var(--fds-sizing-10);
+  }
+
+  .fds-radio--medium {
+    --fds-radio-size: var(--fds-sizing-6);
+
+    min-height: var(--fds-sizing-11);
+  }
+
+  .fds-radio--large {
+    --fds-radio-size: var(--fds-sizing-7);
+
+    min-height: var(--fds-sizing-12);
+  }
+
+  .fds-radio-group--horizontal {
+    display: flex;
+    flex-direction: row;
+    gap: var(--fds-spacing-2);
+  }
+}

package/search.css

@@ -0,0 +1,170 @@
+@layer fds.search {
+  .fds-search {
+    display: inline-grid;
+    width: 100%;
+    gap: var(--fds-spacing-2);
+  }
+
+  .fds-search--small {
+    --f-search-button-clear-size: var(--fds-sizing-5);
+  }
+
+  .fds-search--medium {
+    --f-search-button-clear-size: var(--fds-sizing-6);
+  }
+
+  .fds-search--large {
+    --f-search-button-clear-size: var(--fds-sizing-8);
+  }
+
+  .fds-search__error:empty {
+    display: none;
+  }
+
+  .fds-search__label {
+    min-width: min-content;
+    display: inline-flex;
+    flex-direction: row;
+    gap: var(--fds-spacing-1);
+    align-items: center;
+  }
+
+  .fds-search__field {
+    display: flex;
+    width: 100%;
+    align-items: stretch;
+    border-radius: var(--fds-border_radius-medium);
+    position: relative;
+  }
+
+  .fds-search__icon {
+    position: absolute;
+    height: 100%;
+    z-index: 2;
+    left: var(--fds-spacing-4);
+    transform: scale(1.5);
+    pointer-events: none;
+  }
+
+  [type='search']::-webkit-search-decoration,
+  [type='search']::-webkit-search-cancel-button {
+    appearance: none;
+  }
+
+  .fds-search__input {
+    font: inherit;
+    font-family: inherit;
+    position: relative;
+    box-sizing: border-box;
+    flex: 0 1 auto;
+    height: var(--fds-sizing-10);
+    width: 100%;
+    appearance: none;
+    padding: 0 var(--fds-spacing-3);
+    border: solid 1px var(--fds-semantic-border-input-default);
+    border-radius: var(--fds-border_radius-medium);
+  }
+
+  .fds-search__input.fds-search__input--with-search-button {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .fds-search__input:disabled {
+    cursor: not-allowed;
+  }
+
+  .fds-search__input[type='search']:focus-visible {
+    z-index: 1;
+  }
+
+  .fds-search--disabled {
+    opacity: var(--fds-opacity-disabled);
+  }
+
+  .fds-search__search-button {
+    border-left: 0;
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .fds-search__search-button:focus-visible {
+    z-index: 1;
+  }
+
+  .fds-search__clear-button {
+    color: var(--fds-semantic-text-neutral-default);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: absolute;
+    background: none;
+    border: none;
+    right: 0.6em;
+    top: 50%;
+    transform: translateY(-50%);
+    cursor: pointer;
+    height: var(--f-search-button-clear-size);
+    width: var(--f-search-button-clear-size);
+    border-radius: var(--fds-border_radius-medium);
+    font-size: 1.25rem;
+    padding: 0;
+    z-index: 2;
+  }
+
+  .fds-search--small .fds-search__input {
+    --f-search-button-clear-size: var(--fds-sizing-4);
+
+    height: var(--fds-sizing-10);
+    padding: 0 var(--fds-spacing-3);
+    padding-right: 2.5em;
+  }
+
+  .fds-search--small .fds-search__icon {
+    left: var(--fds-spacing-3);
+  }
+
+  .fds-search--medium .fds-search__input {
+    --f-search-button-clear-size: var(--fds-sizing-6);
+
+    height: var(--fds-sizing-12);
+    padding: 0 var(--fds-spacing-4);
+    padding-right: 2.2em;
+  }
+
+  .fds-search--medium .fds-search__icon {
+    left: var(--fds-spacing-4);
+  }
+
+  .fds-search--large .fds-search__input {
+    --f-search-button-clear-size: var(--fds-sizing-12);
+
+    height: var(--fds-sizing-14);
+    padding: 0 var(--fds-spacing-5);
+    padding-right: 2em;
+  }
+
+  .fds-search--large .fds-search__icon {
+    left: var(--fds-spacing-5);
+  }
+
+  .fds-search__input.fds-search__input--simple {
+    padding-left: 2.4em;
+  }
+
+  .fds-search__error-message > .input:not(:focus-visible) {
+    border-color: var(--fds-semantic-border-danger-default);
+    box-shadow: inset 0 0 0 1px var(--fds-semantic-border-danger-default);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .fds-search__input:not(:focus-visible, :disabled, [aria-disabled]):hover {
+      border-color: var(--fds-semantic-border-input-hover);
+      box-shadow: inset 0 0 0 1px var(--fds-semantic-border-input-hover);
+    }
+
+    .fds-search__clear-button:not(:focus-visible, :disabled, [aria-disabled]):hover {
+      background: var(--fds-semantic-surface-action-subtle-hover);
+    }
+  }
+}

package/skeleton.css

@@ -0,0 +1,59 @@
+@layer fds.skeleton {
+  .fds-skeleton {
+    --fds-skeleton-animation-duration: 0.8s;
+
+    height: 1.3em;
+    pointer-events: none;
+    user-select: none;
+    background-color: var(--fds-semantic-surface-neutral-subtle-hover);
+    animation: fds-skeleton-opacity-fade var(--fds-skeleton-animation-duration) linear infinite alternate;
+  }
+
+  .fds-skeleton--circle {
+    width: 1.3em;
+    border-radius: 50%;
+  }
+
+  .fds-skeleton--rectangle {
+    width: 100%;
+    border-radius: 0.2em;
+  }
+
+  .fds-skeleton--text {
+    width: 100%;
+    height: auto;
+    transform-origin: 0 55%;
+    transform: scale(1, 0.6);
+    border-radius: 0.55em;
+  }
+
+  .fds-skeleton--text:empty::before {
+    content: '\00a0';
+  }
+
+  .fds-skeleton--has-children {
+    width: fit-content;
+    height: fit-content;
+    color: transparent !important;
+  }
+
+  .fds-skeleton--has-children > * {
+    visibility: hidden;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .fds-skeleton {
+      --fds-skeleton-animation-duration: 1.6s;
+    }
+  }
+
+  @keyframes fds-skeleton-opacity-fade {
+    0% {
+      opacity: 1;
+    }
+
+    100% {
+      opacity: 0.4;
+    }
+  }
+}

package/spinner.css

@@ -0,0 +1,75 @@
+@layer fds.spinner {
+  .fds-spinner {
+    animation: fds-spinner-rotate-animation linear infinite;
+    animation-duration: 2s;
+  }
+
+  .fds-spinner__circle {
+    stroke-dasharray: 1px, 200px;
+    transform-origin: center;
+    animation: fds-spinner-stroke-animation ease-in-out infinite;
+    animation-duration: 2s;
+  }
+
+  /* Prefers reduced motion needs longer animation,
+    but don't remove it since it is not decorative.
+   */
+  @media (prefers-reduced-motion: reduce) {
+    .fds-spinner {
+      animation-duration: 6s;
+    }
+
+    .fds-spinner__circle {
+      animation-duration: 6s;
+    }
+  }
+
+  .fds-spinner--default .fds-spinner__circle {
+    stroke: var(--fds-semantic-border-neutral-default);
+  }
+
+  .fds-spinner--interaction .fds-spinner__circle {
+    stroke: var(--fds-semantic-border-action-first-default);
+  }
+
+  .fds-spinner--inverted .fds-spinner__circle {
+    stroke: var(--fds-semantic-surface-neutral-default);
+  }
+
+  .fds-spinner__background {
+    stroke: var(--fds-semantic-border-neutral-subtle);
+  }
+
+  .fds-spinner__background--inverted {
+    stroke: var(--fds-semantic-surface-neutral-dark);
+  }
+
+  @keyframes fds-spinner-rotate-animation {
+    0% {
+      transform: rotate(0deg);
+    }
+
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+
+  @keyframes fds-spinner-stroke-animation {
+    0% {
+      stroke-dasharray: 1px, 200px;
+      stroke-dashoffset: 0;
+    }
+
+    50% {
+      stroke-dasharray: 100px, 200px;
+      stroke-dashoffset: -15px;
+      transform: rotate(0deg);
+    }
+
+    100% {
+      stroke-dasharray: 1px, 200px;
+      stroke-dashoffset: -120px;
+      transform: rotate(15deg);
+    }
+  }
+}