@digdir/designsystemet-css 0.11.0-alpha.7 → 0.11.0-alpha.9

package/radio.css

@@ -1,177 +1,182 @@
-@layer ds.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-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;
-  }
+.ds-radio {
+  --dsc-radio-size: var(--ds-spacing-5);
+  --dsc-radio-focus-border-width: 3px;
+  --dsc-radio-background: radial-gradient(circle, var(--ds-color-neutral-background-default) 60%, transparent 60%);
+  --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);
+  --dsc-radio-box_shadow-size: 7px;
+
+  display: grid;
+}
 
-  .ds-radio:has(.ds-radio__label) {
-    grid-template-columns: var(--dsc-radio-size) auto;
-    gap: var(--ds-spacing-2);
-  }
+.ds-radio:has(.ds-radio__label) {
+  grid-template-columns: var(--dsc-radio-size) auto;
+  gap: var(--ds-spacing-2);
+}
 
-  /* Radio */
-  .ds-radio__input {
-    position: relative;
-    width: var(--dsc-radio-size);
-    height: var(--dsc-radio-size);
-    z-index: 1;
-    appearance: none;
-    outline: none;
-    cursor: pointer;
-    margin: 0;
-    align-self: center;
-    box-shadow: inset 0 0 0 2px var(--dsc-radio-border-color);
-    background: var(--dsc-radio-background);
-    border-radius: 50%;
-  }
+/* Radio */
+.ds-radio__input {
+  position: relative;
+  width: var(--dsc-radio-size);
+  height: var(--dsc-radio-size);
+  z-index: 1;
+  appearance: none;
+  outline: none;
+  cursor: pointer;
+  margin: 0;
+  align-self: center;
+  box-shadow: inset 0 0 0 2px var(--dsc-radio-border-color);
+  background: var(--dsc-radio-background);
+  border-radius: 50%;
+}
 
-  .ds-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(--ds-border-radius-md);
-  }
+.ds-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(--ds-border-radius-md);
+}
 
-  .ds-radio__label {
-    /* min-height: var(--ds-sizing-10); */
-    min-width: min-content;
-    display: inline-flex;
-    flex-direction: row;
-    gap: var(--ds-spacing-1);
-    align-items: center;
-    cursor: pointer;
-  }
+.ds-radio__label {
+  /* min-height: var(--ds-sizing-10); */
+  min-width: min-content;
+  display: inline-flex;
+  flex-direction: row;
+  gap: var(--ds-spacing-1);
+  align-items: center;
+  cursor: pointer;
+}
 
-  .ds-radio__description {
-    margin-top: calc(var(--ds-spacing-2) * -1);
-    color: var(--ds-color-neutral-text-subtle);
-    grid-column: 2;
-  }
+.ds-radio__description {
+  margin-top: calc(var(--ds-spacing-2) * -1);
+  color: var(--ds-color-neutral-text-subtle);
+  grid-column: 2;
+}
 
-  .ds-radio--readonly > .ds-radio__input,
-  .ds-radio--readonly > .ds-radio__label,
-  .ds-radio--readonly > .ds-radio__input::before {
-    cursor: default;
-  }
+.ds-radio--readonly > .ds-radio__input,
+.ds-radio--readonly > .ds-radio__label,
+.ds-radio--readonly > .ds-radio__input::before {
+  cursor: default;
+}
 
-  .ds-radio:has(.ds-radio__input:disabled) > .ds-radio__description {
-    opacity: var(--ds-disabled-opacity);
-  }
+.ds-radio:has(.ds-radio__input:disabled) > .ds-radio__description {
+  opacity: var(--ds-disabled-opacity);
+}
 
-  .ds-radio__input:disabled,
-  .ds-radio__input:disabled::before,
-  .ds-radio:has(.ds-radio__input:disabled) > .ds-radio__label {
-    cursor: not-allowed;
-    opacity: var(--ds-disabled-opacity);
-  }
+.ds-radio__input:disabled,
+.ds-radio__input:disabled::before,
+.ds-radio:has(.ds-radio__input:disabled) > .ds-radio__label {
+  cursor: not-allowed;
+  opacity: var(--ds-disabled-opacity);
+}
 
-  .ds-radio__input:focus-visible {
-    box-shadow:
-      inset 0 0 0 2px var(--dsc-radio-border-color),
-      inset 0 0 0 6px var(--dsc-radio-background);
-  }
+.ds-radio:has(.ds-radio__input:focus-visible) {
+  --dsc-focus-border-width: 3px;
 
-  .ds-radio:has(.ds-radio__input:focus-visible) {
-    --dsc-focus-border-width: 3px;
+  outline: var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);
+  outline-offset: var(--dsc-focus-border-width);
+  box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
+  border-radius: var(--ds-border-radius-md);
+}
 
-    outline: var(--dsc-focus-border-width) solid var(--ds-color-focus-outer);
-    outline-offset: var(--dsc-focus-border-width);
-    box-shadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner);
-    border-radius: var(--ds-border-radius-md);
-  }
+.ds-radio__input:checked {
+  --dsc-radio-border-color: var(--ds-color-accent-base-default);
+  --dsc-radio-background: radial-gradient(circle, var(--ds-color-accent-contrast-1) 60%, transparent 60%);
 
-  .ds-radio__input:checked {
-    --dsc-radio-border-color: var(--ds-color-accent-base-default);
+  /* We use a gradient to avoid bleeding pixels */
+  background: var(--dsc-radio-background);
+}
 
-    background: var(--dsc-radio-border-color);
-  }
+.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);
+}
 
-  .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);
-  }
+.ds-radio__input:focus-visible:not(:checked) {
+  --dsc-radio-border-color: var(--ds-color-accent-border-strong);
 
-  .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);
-  }
+  box-shadow: inset 0 0 0 2px var(--dsc-radio-border-color);
+}
 
-  .ds-radio--readonly > .ds-radio__input:checked {
-    background: var(--ds-color-neutral-border-strong);
-  }
+.ds-radio--readonly > .ds-radio__input:checked {
+  background: var(--ds-color-neutral-border-strong);
+}
 
-  .ds-radio--error > .ds-radio__input:not(:disabled, :focus-visible) {
-    --dsc-radio-border-color: var(--ds-color-danger-border-default);
-  }
+.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
+.ds-radio__input:focus-visible:checked {
+  box-shadow: inset 0 0 0 var(--dsc-radio-box_shadow-size) var(--dsc-radio-border-color);
+}
+
+.ds-radio__input:checked:not(:focus-visible) {
+  box-shadow: inset 0 0 0 var(--dsc-radio-box_shadow-size) var(--dsc-radio-border-color);
+}
+
+/* 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) {
-    .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);
-    }
-
-    .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:
-        var(--dsc-radio-border__hover),
-        inset 0 0 0 2px var(--dsc-radio-border-color);
-    }
-
-    .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),
-        inset 0 0 0 6px var(--dsc-radio-background);
-    }
+@media (hover: hover) and (pointer: fine) {
+  .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);
   }
 
-  /** Sizing */
+  .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);
 
-  .ds-radio--sm {
-    --dsc-radio-size: var(--ds-sizing-5);
+    box-shadow:
+      var(--dsc-radio-border__hover),
+      inset 0 0 0 2px var(--dsc-radio-border-color);
+  }
 
-    /* min-height: var(--ds-sizing-10); */
+  .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 var(--dsc-radio-box_shadow-size) var(--dsc-radio-border-color);
   }
+}
 
-  .ds-radio--md {
-    --dsc-radio-size: var(--ds-sizing-6);
-    --dsc-radio-border__hover--size: var(--ds-spacing-1);
+/** Sizing */
 
-    /* min-height: var(--ds-sizing-11); */
-  }
+.ds-radio--sm {
+  --dsc-radio-size: var(--ds-sizing-5);
+  --dsc-radio-box_shadow-size: 6px;
 
-  .ds-radio--lg {
-    --dsc-radio-size: var(--ds-sizing-7);
+  /* min-height: var(--ds-sizing-10); */
+}
 
-    /* min-height: var(--ds-sizing-12); */
-  }
+.ds-radio--md {
+  --dsc-radio-size: var(--ds-sizing-6);
+  --dsc-radio-border__hover--size: var(--ds-spacing-1);
+  --dsc-radio-box_shadow-size: 7px;
 
-  .ds-radio-group {
-    display: flex;
-    flex-direction: column;
-    gap: var(--ds-spacing-3);
-    width: fit-content;
-  }
+  /* min-height: var(--ds-sizing-11); */
+}
 
-  .ds-radio-group--horizontal {
-    display: flex;
-    flex-direction: row;
-    gap: var(--ds-spacing-6);
-  }
+.ds-radio--lg {
+  --dsc-radio-size: var(--ds-sizing-7);
+  --dsc-radio-box_shadow-size: 8px;
+
+  /* min-height: var(--ds-sizing-12); */
+}
+
+.ds-radio-group {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-3);
+  width: fit-content;
+}
+
+.ds-radio-group--horizontal {
+  display: flex;
+  flex-direction: row;
+  gap: var(--ds-spacing-6);
 }

package/search.css

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