@digdir/designsystemet-css 1.0.0-next.32 → 1.0.0-next.34

package/utilities.css

@@ -12,15 +12,18 @@
   width: 1px;
 }
 
+:root {
+  --dsc-focus-border-width: 3px; /* Default focus border width */
+  --dsc-focus-boxShadow: 0 0 0 var(--dsc-focus-border-width) var(--ds-color-focus-inner),
+    0 0 0 calc(var(--dsc-focus-border-width) * 2) var(--ds-color-focus-outer);
+}
+
 /**
  * Apply a focus outline on an element when it is focused with keyboard
  */
-.ds-focus: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);
+ .ds-focus:focus-visible {
+  outline: none;
+  box-shadow: var(--dsc-focus-boxShadow);
 }
 
 .ds-animate-height--openingOrClosing,

package/box.css

@@ -1,71 +0,0 @@
-.ds-box--xs-shadow {
-  box-shadow: var(--ds-shadow-xs);
-}
-
-.ds-box--sm-shadow {
-  box-shadow: var(--ds-shadow-sm);
-}
-
-.ds-box--md-shadow {
-  box-shadow: var(--ds-shadow-md);
-}
-
-.ds-box--lg-shadow {
-  box-shadow: var(--ds-shadow-lg);
-}
-
-.ds-box--xl-shadow {
-  box-shadow: var(--ds-shadow-xl);
-}
-
-.ds-box--default-border-color {
-  border: 1px solid var(--ds-color-neutral-border-default);
-}
-
-.ds-box--subtle-border-color {
-  border: 1px solid var(--ds-color-neutral-border-subtle);
-}
-
-.ds-box--strong-border-color {
-  border: 1px solid var(--ds-color-neutral-base-strong);
-}
-
-.ds-box--sm-border-radius {
-  border-radius: var(--ds-border-radius-sm);
-}
-
-.ds-box--md-border-radius {
-  border-radius: var(--ds-border-radius-md);
-}
-
-.ds-box--lg-border-radius {
-  border-radius: var(--ds-border-radius-lg);
-}
-
-.ds-box--xl-border-radius {
-  border-radius: var(--ds-border-radius-xl);
-}
-
-.ds-box--2xl-border-radius {
-  border-radius: var(--ds-border-radius-2xl);
-}
-
-.ds-box--3xl-border-radius {
-  border-radius: var(--ds-border-radius-3xl);
-}
-
-.ds-box--4xl-border-radius {
-  border-radius: var(--ds-border-radius-4xl);
-}
-
-.ds-box--full-border-radius {
-  border-radius: var(--ds-border-radius-full);
-}
-
-.ds-box--default-background {
-  background-color: var(--ds-color-neutral-background-default);
-}
-
-.ds-box--subtle-background {
-  background-color: var(--ds-color-neutral-background-subtle);
-}

package/dist/box.css

@@ -1 +0,0 @@
-.ds-box--xs-shadow{box-shadow:var(--ds-shadow-xs)}.ds-box--sm-shadow{box-shadow:var(--ds-shadow-sm)}.ds-box--md-shadow{box-shadow:var(--ds-shadow-md)}.ds-box--lg-shadow{box-shadow:var(--ds-shadow-lg)}.ds-box--xl-shadow{box-shadow:var(--ds-shadow-xl)}.ds-box--default-border-color{border:1px solid var(--ds-color-neutral-border-default)}.ds-box--subtle-border-color{border:1px solid var(--ds-color-neutral-border-subtle)}.ds-box--strong-border-color{border:1px solid var(--ds-color-neutral-base-strong)}.ds-box--sm-border-radius{border-radius:var(--ds-border-radius-sm)}.ds-box--md-border-radius{border-radius:var(--ds-border-radius-md)}.ds-box--lg-border-radius{border-radius:var(--ds-border-radius-lg)}.ds-box--xl-border-radius{border-radius:var(--ds-border-radius-xl)}.ds-box--2xl-border-radius{border-radius:var(--ds-border-radius-2xl)}.ds-box--3xl-border-radius{border-radius:var(--ds-border-radius-3xl)}.ds-box--4xl-border-radius{border-radius:var(--ds-border-radius-4xl)}.ds-box--full-border-radius{border-radius:var(--ds-border-radius-full)}.ds-box--default-background{background-color:var(--ds-color-neutral-background-default)}.ds-box--subtle-background{background-color:var(--ds-color-neutral-background-subtle)}

package/dist/dropdownmenu.css

@@ -1 +0,0 @@
-.ds-dropdownmenu{--dsc-dropdownmenu-background:var(--ds-color-neutral-background-default);--dsc-dropdownmenu-padding:var(--ds-spacing-2);--dsc-dropdownmenu-border-radius:min(1rem,var(--ds-border-radius-md));--dsc-dropdownmenu-border:1px solid var(--ds-color-neutral-border-subtle);--dsc-dropdownmenu-min-width:260px;--dsc-dropdownmenu-shadow:var(--ds-shadow-md);--dsc-dropdownmenu-hr-border-color:var(--ds-color-neutral-border-subtle);--dsc-dropdownmenu-item-padding:0 var(--ds-spacing-4);--dsc-dropdownmenu-header-padding:var(--ds-spacing-2) var(--ds-spacing-4);background-color:var(--dsc-dropdownmenu-background);border:var(--dsc-dropdownmenu-border);border-radius:var(--dsc-dropdownmenu-border-radius);box-shadow:var(--dsc-dropdownmenu-shadow);list-style:none;margin:0;min-width:var(--dsc-dropdownmenu-min-width);padding:var(--dsc-dropdownmenu-padding);position:relative;z-index:1500}.ds-dropdownmenu--sm{--dsc-dropdownmenu-padding:var(--ds-spacing-2);--dsc-dropdownmenu-min-width:240px}.ds-dropdownmenu--md{--dsc-dropdownmenu-padding:var(--ds-spacing-3) var(--ds-spacing-2);--dsc-dropdownmenu-min-width:260px}.ds-dropdownmenu--lg{--dsc-dropdownmenu-padding:var(--ds-spacing-4) var(--ds-spacing-2);--dsc-dropdownmenu-min-width:280px}.ds-dropdownmenu>hr{border-color:var(--dsc-dropdownmenu-hr-border-color)!important}.ds-dropdownmenu__item{justify-content:start;padding:var(--dsc-dropdownmenu-item-padding)}.ds-dropdownmenu__section{list-style:none;margin:0;padding:0}.ds-dropdownmenu__heading{padding:var(--dsc-dropdownmenu-header-padding)}

package/dist/native-select.css

@@ -1 +0,0 @@
-.ds-native-select__wrapper{display:grid;flex:0 1 auto;position:relative}.ds-native-select__wrapper:after{background-color:var(--ds-color-neutral-text-default);content:"";height:1.5em;-webkit-mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS45NyA5LjQ3YS43NS43NSAwIDAgMSAxLjA2IDBMMTIgMTQuNDRsNC45Ny00Ljk3YS43NS43NSAwIDEgMSAxLjA2IDEuMDZsLTUuNSA1LjVhLjc1Ljc1IDAgMCAxLTEuMDYgMGwtNS41LTUuNWEuNzUuNzUgMCAwIDEgMC0xLjA2IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");mask-image:url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxZW0iIGhlaWdodD0iMWVtIiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiPjxwYXRoIGZpbGw9ImN1cnJlbnRDb2xvciIgZmlsbC1ydWxlPSJldmVub2RkIiBkPSJNNS45NyA5LjQ3YS43NS43NSAwIDAgMSAxLjA2IDBMMTIgMTQuNDRsNC45Ny00Ljk3YS43NS43NSAwIDEgMSAxLjA2IDEuMDZsLTUuNSA1LjVhLjc1Ljc1IDAgMCAxLTEuMDYgMGwtNS41LTUuNWEuNzUuNzUgMCAwIDEgMC0xLjA2IiBjbGlwLXJ1bGU9ImV2ZW5vZGQiLz48L3N2Zz4=");-webkit-mask-size:contain;mask-size:contain;pointer-events:none;position:absolute;right:var(--ds-spacing-2);top:50%;transform:translateY(-50%);width:1.5em}.ds-native-select{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--ds-color-neutral-background-default);border:1px solid var(--ds-color-neutral-border-default);border-radius:var(--ds-border-radius-md);box-sizing:border-box;color:var(--ds-color-neutral-text-default);font-family:inherit;padding:0 var(--ds-spacing-2);position:relative}@media (hover:hover) and (pointer:fine){.ds-native-select: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-native-select.ds-native-select--multiple{background-image:none}.ds-native-select--sm{height:var(--ds-sizing-10);padding:0 var(--ds-spacing-2);padding-right:var(--ds-spacing-8)}.ds-native-select--md{height:var(--ds-sizing-12);padding:0 var(--ds-spacing-3);padding-right:var(--ds-spacing-10)}.ds-native-select--lg{height:var(--ds-sizing-14);padding:0 var(--ds-spacing-4);padding-right:var(--ds-spacing-12)}.ds-native-select--container{display:grid;gap:var(--ds-spacing-2)}.ds-native-select--container:has(.ds-native-select:disabled){opacity:var(--ds-disabled-opacity)}.ds-native-select:disabled{cursor:not-allowed}.ds-native-select--readonly .ds-native-select{background:var(--ds-color-neutral-background-subtle);border-color:var(--ds-color-neutral-border-strong)}.ds-native-select--error>.ds-native-select:not(:focus-visible){border-color:var(--ds-color-danger-border-default);box-shadow:inset 0 0 0 1px var(--ds-color-danger-border-default)}.ds-native-select__readonly__icon{height:1.2em;width:1.2em}.ds-native-select__error-message:empty{display:none}.ds-native-select__label{align-items:center;display:inline-flex;flex-direction:row;gap:var(--ds-spacing-1);min-width:-webkit-min-content;min-width:-moz-min-content;min-width:min-content}.ds-native-select__description{color:var(--ds-color-neutral-text-subtle);margin-top:calc(var(--ds-spacing-2)*-1)}

package/dropdownmenu.css

@@ -1,56 +0,0 @@
-.ds-dropdownmenu {
-  --dsc-dropdownmenu-background: var(--ds-color-neutral-background-default);
-  --dsc-dropdownmenu-padding: var(--ds-spacing-2);
-  --dsc-dropdownmenu-border-radius: min(1rem, var(--ds-border-radius-md));
-  --dsc-dropdownmenu-border: 1px solid var(--ds-color-neutral-border-subtle);
-  --dsc-dropdownmenu-min-width: 260px;
-  --dsc-dropdownmenu-shadow: var(--ds-shadow-md);
-  --dsc-dropdownmenu-hr-border-color: var(--ds-color-neutral-border-subtle);
-  --dsc-dropdownmenu-item-padding: 0 var(--ds-spacing-4);
-  --dsc-dropdownmenu-header-padding: var(--ds-spacing-2) var(--ds-spacing-4);
-
-  position: relative;
-  padding: var(--dsc-dropdownmenu-padding);
-  z-index: 1500;
-  margin: 0;
-  list-style: none;
-  border-radius: var(--dsc-dropdownmenu-border-radius);
-  box-shadow: var(--dsc-dropdownmenu-shadow);
-  background-color: var(--dsc-dropdownmenu-background);
-  border: var(--dsc-dropdownmenu-border);
-  min-width: var(--dsc-dropdownmenu-min-width);
-}
-
-.ds-dropdownmenu--sm {
-  --dsc-dropdownmenu-padding: var(--ds-spacing-2);
-  --dsc-dropdownmenu-min-width: 240px;
-}
-
-.ds-dropdownmenu--md {
-  --dsc-dropdownmenu-padding: var(--ds-spacing-3) var(--ds-spacing-2);
-  --dsc-dropdownmenu-min-width: 260px;
-}
-
-.ds-dropdownmenu--lg {
-  --dsc-dropdownmenu-padding: var(--ds-spacing-4) var(--ds-spacing-2);
-  --dsc-dropdownmenu-min-width: 280px;
-}
-
-.ds-dropdownmenu > hr {
-  border-color: var(--dsc-dropdownmenu-hr-border-color) !important;
-}
-
-.ds-dropdownmenu__item {
-  justify-content: start;
-  padding: var(--dsc-dropdownmenu-item-padding);
-}
-
-.ds-dropdownmenu__section {
-  margin: 0;
-  padding: 0;
-  list-style: none;
-}
-
-.ds-dropdownmenu__heading {
-  padding: var(--dsc-dropdownmenu-header-padding);
-}