@digdir/designsystemet-css 0.10.0-alpha.1 → 0.11.0-alpha.2

package/radio.css

@@ -1,22 +1,22 @@
 @layer ds.radio {
-  .fds-radio {
+  .ds-radio {
     --dsc-radio-size: var(--ds-spacing-5);
     --dsc-radio-focus-border-width: 3px;
     --dsc-radio-background: var(--ds-color-neutral-background-default);
-    --dsc-radio-border-color: var(--ds-color-neutral-border-strong);
+    --dsc-radio-border-color: var(--ds-color-neutral-border-default);
     --dsc-radio-border__hover--size: calc(var(--ds-spacing-3) / 2);
     --dsc-radio-border__hover: 0 0 0 var(--dsc-radio-border__hover--size) var(--ds-color-accent-surface-hover);
 
     display: grid;
   }
 
-  .fds-radio:has(.fds-radio__label) {
+  .ds-radio:has(.ds-radio__label) {
     grid-template-columns: var(--dsc-radio-size) auto;
     gap: var(--ds-spacing-2);
   }
 
   /* Radio */
-  .fds-radio__input {
+  .ds-radio__input {
     position: relative;
     width: var(--dsc-radio-size);
     height: var(--dsc-radio-size);
@@ -31,7 +31,7 @@
     border-radius: 50%;
   }
 
-  .fds-radio__input::before {
+  .ds-radio__input::before {
     position: absolute;
     content: '';
     display: block;
@@ -44,8 +44,8 @@
     border-radius: var(--ds-border-radius-md);
   }
 
-  .fds-radio__label {
-    min-height: var(--ds-sizing-10);
+  .ds-radio__label {
+    /* min-height: var(--ds-sizing-10); */
     min-width: min-content;
     display: inline-flex;
     flex-direction: row;
@@ -54,72 +54,78 @@
     cursor: pointer;
   }
 
-  .fds-radio__description {
+  .ds-radio__description {
     margin-top: calc(var(--ds-spacing-3) * -1);
     color: var(--ds-color-neutral-text-subtle);
     grid-column: 2;
   }
 
-  .fds-radio--readonly > .fds-radio__input,
-  .fds-radio--readonly > .fds-radio__label,
-  .fds-radio--readonly > .fds-radio__input::before {
+  .ds-radio--readonly > .ds-radio__input,
+  .ds-radio--readonly > .ds-radio__label,
+  .ds-radio--readonly > .ds-radio__input::before {
     cursor: default;
   }
 
-  .fds-radio:has(.fds-radio__input:disabled) > .fds-radio__description {
+  .ds-radio:has(.ds-radio__input:disabled) > .ds-radio__description {
     opacity: var(--ds-disabled-opacity);
   }
 
-  .fds-radio__input:disabled,
-  .fds-radio__input:disabled::before,
-  .fds-radio:has(.fds-radio__input:disabled) > .fds-radio__label {
+  .ds-radio__input:disabled,
+  .ds-radio__input:disabled::before,
+  .ds-radio:has(.ds-radio__input:disabled) > .ds-radio__label {
     cursor: not-allowed;
-    opacity: var(--fds-opacity-disabled);
+    opacity: var(--ds-disabled-opacity);
   }
 
-  .fds-radio__input:focus-visible {
-    outline-offset: var(--ds-spacing-1);
-    outline: var(--dsc-radio-focus-border-width) solid var(--ds-focus-outer);
+  .ds-radio__input:focus-visible {
     box-shadow:
       inset 0 0 0 2px var(--dsc-radio-border-color),
-      inset 0 0 0 var(--dsc-radio-focus-border-width) var(--ds-focus-inner),
       inset 0 0 0 6px var(--dsc-radio-background);
   }
 
-  .fds-radio__input:checked {
+  .ds-radio:has(.ds-radio__input:focus-visible) {
+    --dsc-focus-border-width: 3px;
+
+    outline: var(--dsc-focus-border-width) solid var(--ds-focus-outer);
+    outline-offset: var(--dsc-focus-border-width);
+    box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-focus-inner);
+    border-radius: var(--ds-border-radius-md);
+  }
+
+  .ds-radio__input:checked {
     --dsc-radio-border-color: var(--ds-color-accent-base-default);
 
     background: var(--dsc-radio-border-color);
   }
 
-  .fds-radio--readonly > .fds-radio__input {
+  .ds-radio--readonly > .ds-radio__input {
     --dsc-radio-border-color: var(--ds-color-neutral-border-subtle);
     --dsc-radio-background: var(--ds-color-neutral-background-subtle);
   }
 
-  .fds-radio__input:checked:not(:focus-visible) {
+  .ds-radio__input:checked:not(:focus-visible) {
     box-shadow:
       inset 0 0 0 2px var(--dsc-radio-border-color),
       inset 0 0 0 6px var(--dsc-radio-background);
   }
 
-  .fds-radio--readonly > .fds-radio__input:checked {
+  .ds-radio--readonly > .ds-radio__input:checked {
     background: var(--ds-color-neutral-border-strong);
   }
 
-  .fds-radio--error > .fds-radio__input:not(:disabled, :focus-visible) {
+  .ds-radio--error > .ds-radio__input:not(:disabled, :focus-visible) {
     --dsc-radio-border-color: var(--ds-color-danger-border-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__label:hover:not(:disabled),
-    .fds-radio:not(.fds-radio--readonly) > .fds-radio__input:hover:not(:disabled) + .fds-radio__label {
+    .ds-radio:not(.ds-radio--readonly) > .ds-radio__label:hover:not(:disabled),
+    .ds-radio:not(.ds-radio--readonly) > .ds-radio__input:hover:not(:disabled) + .ds-radio__label {
       color: var(--ds-color-accent-text-subtle);
     }
 
-    .fds-radio:not(.fds-radio--readonly) > .fds-radio__input:hover:not(:checked, :disabled) {
+    .ds-radio:not(.ds-radio--readonly) > .ds-radio__input:hover:not(:checked, :disabled, :focus-visible) {
       --dsc-radio-border-color: var(--ds-color-accent-border-strong);
 
       box-shadow:
@@ -127,7 +133,7 @@
         inset 0 0 0 2px var(--dsc-radio-border-color);
     }
 
-    .fds-radio:not(.fds-radio--readonly) > .fds-radio__input:hover:checked:not(:disabled) {
+    .ds-radio:not(.ds-radio--readonly) > .ds-radio__input:hover:checked:not(:disabled, :focus-visible) {
       box-shadow:
         var(--dsc-radio-border__hover),
         inset 0 0 0 2px var(--dsc-radio-border-color),
@@ -137,26 +143,33 @@
 
   /** Sizing */
 
-  .fds-radio--sm {
+  .ds-radio--sm {
     --dsc-radio-size: var(--ds-sizing-5);
 
-    min-height: var(--ds-sizing-10);
+    /* min-height: var(--ds-sizing-10); */
   }
 
-  .fds-radio--md {
+  .ds-radio--md {
     --dsc-radio-size: var(--ds-sizing-6);
     --dsc-radio-border__hover--size: var(--ds-spacing-1);
 
-    min-height: var(--ds-sizing-11);
+    /* min-height: var(--ds-sizing-11); */
   }
 
-  .fds-radio--lg {
+  .ds-radio--lg {
     --dsc-radio-size: var(--ds-sizing-7);
 
-    min-height: var(--ds-sizing-12);
+    /* min-height: var(--ds-sizing-12); */
+  }
+
+  .ds-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ds-spacing-3);
+    width: fit-content;
   }
 
-  .fds-radio-group--horizontal {
+  .ds-radio-group--horizontal {
     display: flex;
     flex-direction: row;
     gap: var(--ds-spacing-6);

package/search.css

@@ -1,27 +1,27 @@
 @layer ds.search {
-  .fds-search {
+  .ds-search {
     display: inline-grid;
     width: 100%;
     gap: var(--ds-spacing-2);
   }
 
-  .fds-search--sm {
+  .ds-search--sm {
     --dsc-search-button-clear-size: var(--ds-sizing-5);
   }
 
-  .fds-search--md {
+  .ds-search--md {
     --dsc-search-button-clear-size: var(--ds-sizing-6);
   }
 
-  .fds-search--lg {
+  .ds-search--lg {
     --dsc-search-button-clear-size: var(--ds-sizing-8);
   }
 
-  .fds-search__error:empty {
+  .ds-search__error:empty {
     display: none;
   }
 
-  .fds-search__label {
+  .ds-search__label {
     min-width: min-content;
     display: inline-flex;
     flex-direction: row;
@@ -29,7 +29,7 @@
     align-items: center;
   }
 
-  .fds-search__field {
+  .ds-search__field {
     display: flex;
     width: 100%;
     align-items: stretch;
@@ -37,7 +37,7 @@
     position: relative;
   }
 
-  .fds-search__icon {
+  .ds-search__icon {
     position: absolute;
     height: 100%;
     z-index: 2;
@@ -51,7 +51,7 @@
     appearance: none;
   }
 
-  .fds-search__input {
+  .ds-search__input {
     font: inherit;
     font-family: inherit;
     position: relative;
@@ -67,37 +67,37 @@
     border-radius: var(--ds-border-radius-md);
   }
 
-  .fds-search__input.fds-search__input--with-search-button {
+  .ds-search__input.ds-search__input--with-search-button {
     border-top-right-radius: 0;
     border-bottom-right-radius: 0;
   }
 
-  .fds-search__input:disabled {
+  .ds-search__input:disabled {
     cursor: not-allowed;
   }
 
-  .fds-search__input[type='search']:focus-visible {
+  .ds-search__input[type='search']:focus-visible {
     z-index: 1;
   }
 
-  .fds-search:has(.fds-search__input:disabled) {
+  .ds-search:has(.ds-search__input:disabled) {
     opacity: var(--ds-disabled-opacity);
   }
 
-  .fds-search__search-button {
+  .ds-search__search-button {
     border-top-left-radius: 0;
     border-bottom-left-radius: 0;
   }
 
-  .fds-search__search-button:not(:focus-visible) {
+  .ds-search__search-button:not(:focus-visible) {
     border-left: 0;
   }
 
-  .fds-search__search-button:focus-visible {
+  .ds-search__search-button:focus-visible {
     z-index: 1;
   }
 
-  .fds-search__clear-button {
+  .ds-search__clear-button {
     color: var(--ds-color-neutral-text-default);
     display: inline-flex;
     align-items: center;
@@ -117,7 +117,7 @@
     z-index: 2;
   }
 
-  .fds-search--sm .fds-search__input {
+  .ds-search--sm .ds-search__input {
     --dsc-search-button-clear-size: var(--ds-sizing-4);
 
     height: var(--ds-sizing-10);
@@ -125,11 +125,11 @@
     padding-right: 2.5em;
   }
 
-  .fds-search--sm .fds-search__icon {
+  .ds-search--sm .ds-search__icon {
     left: var(--ds-spacing-3);
   }
 
-  .fds-search--md .fds-search__input {
+  .ds-search--md .ds-search__input {
     --dsc-search-button-clear-size: var(--ds-sizing-6);
 
     height: var(--ds-sizing-12);
@@ -137,11 +137,11 @@
     padding-right: 2.2em;
   }
 
-  .fds-search--md .fds-search__icon {
+  .ds-search--md .ds-search__icon {
     left: var(--ds-spacing-4);
   }
 
-  .fds-search--lg .fds-search__input {
+  .ds-search--lg .ds-search__input {
     --dsc-search-button-clear-size: var(--ds-sizing-12);
 
     height: var(--ds-sizing-14);
@@ -149,26 +149,26 @@
     padding-right: 2em;
   }
 
-  .fds-search--lg .fds-search__icon {
+  .ds-search--lg .ds-search__icon {
     left: var(--ds-spacing-5);
   }
 
-  .fds-search__input.fds-search__input--simple {
+  .ds-search__input.ds-search__input--simple {
     padding-left: 2.4em;
   }
 
-  .fds-search__error-message > .input:not(:focus-visible) {
+  .ds-search__error-message > .input:not(:focus-visible) {
     border-color: var(--ds-color-danger-border-default);
     box-shadow: inset 0 0 0 1px var(--ds-color-danger-border-default);
   }
 
   @media (hover: hover) and (pointer: fine) {
-    .fds-search__input:not(:focus-visible, :disabled, [aria-disabled]):hover {
+    .ds-search__input:not(:focus-visible, :disabled, [aria-disabled]):hover {
       border-color: var(--ds-color-accent-border-strong);
       box-shadow: inset 0 0 0 1px var(--ds-color-accent-border-strong);
     }
 
-    .fds-search__clear-button:not(:focus-visible, :disabled, [aria-disabled]):hover {
+    .ds-search__clear-button:not(:focus-visible, :disabled, [aria-disabled]):hover {
       background: var(--ds-color-accent-surface-hover);
     }
   }

package/skeleton.css

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

package/skiplink.css

@@ -1,5 +1,5 @@
 @layer ds.skiplink {
-  .fds-skiplink:focus {
+  .ds-skiplink:focus {
     display: block;
     outline: 0;
     position: static;
@@ -16,7 +16,7 @@
     background: var(--ds-color-neutral-backround-default);
   }
 
-  .fds-skiplink__content {
+  .ds-skiplink__content {
     --dsc-skiplink-padding: var(--ds-spacing-2) var(--ds-spacing-4);
     --dsc-skiplink-border-width: 3px;
 
@@ -24,8 +24,8 @@
     align-items: center;
     border: var(--ds-border-width-default) solid transparent;
     background-color: transparent;
-    color: var(--ds-color-accent-base-hover);
-    border-color: var(--ds-color-accent-base-hover);
+    color: var(--ds-color-accent-text-subtle);
+    border-color: var(--ds-color-accent-border-strong);
     width: fit-content;
     padding: var(--dsc-skiplink-padding);
     box-sizing: border-box;

package/spinner.css

@@ -1,13 +1,13 @@
 @layer ds.spinner {
-  .fds-spinner {
-    animation: fds-spinner-rotate-animation linear infinite;
+  .ds-spinner {
+    animation: ds-spinner-rotate-animation linear infinite;
     animation-duration: 2s;
   }
 
-  .fds-spinner__circle {
+  .ds-spinner__circle {
     stroke-dasharray: 1px, 200px;
     transform-origin: center;
-    animation: fds-spinner-stroke-animation ease-in-out infinite;
+    animation: ds-spinner-stroke-animation ease-in-out infinite;
     animation-duration: 2s;
   }
 
@@ -15,28 +15,28 @@
     but don't remove it since it is not decorative.
    */
   @media (prefers-reduced-motion: reduce) {
-    .fds-spinner {
+    .ds-spinner {
       animation-duration: 6s;
     }
 
-    .fds-spinner__circle {
+    .ds-spinner__circle {
       animation-duration: 6s;
     }
   }
 
-  .fds-spinner--neutral .fds-spinner__circle {
+  .ds-spinner--neutral .ds-spinner__circle {
     stroke: var(--ds-color-neutral-border-default);
   }
 
-  .fds-spinner--accent .fds-spinner__circle {
+  .ds-spinner--accent .ds-spinner__circle {
     stroke: var(--ds-color-accent-base-default);
   }
 
-  .fds-spinner__background {
+  .ds-spinner__background {
     stroke: var(--ds-color-neutral-surface-default);
   }
 
-  @keyframes fds-spinner-rotate-animation {
+  @keyframes ds-spinner-rotate-animation {
     0% {
       transform: rotate(0deg);
     }
@@ -46,7 +46,7 @@
     }
   }
 
-  @keyframes fds-spinner-stroke-animation {
+  @keyframes ds-spinner-stroke-animation {
     0% {
       stroke-dasharray: 1px, 200px;
       stroke-dashoffset: 0;