@digdir/designsystemet-css 0.0.0-next-20240724125515

package/textfield.css

@@ -0,0 +1,151 @@
+.ds-textfield {
+  display: grid;
+  gap: var(--ds-spacing-2);
+}
+
+.ds-textfield__adornment {
+  color: var(--ds-color-neutral-text-subtle);
+  background: var(--ds-color-neutral-background-subtle);
+  padding: 9px var(--ds-spacing-4);
+  border-radius: var(--ds-border-radius-md);
+  border: solid 1px var(--ds-color-neutral-border-default);
+  box-sizing: border-box;
+  display: inline-block;
+}
+
+.ds-textfield__input {
+  font-family: inherit;
+  position: relative;
+  box-sizing: border-box;
+  flex: 0 1 auto;
+  width: 100%;
+  appearance: none;
+  padding: 0 var(--ds-spacing-3);
+  border: solid 1px var(--ds-color-neutral-border-default);
+  background: var(--ds-color-neutral-background-default);
+  color: var(--ds-color-neutral-text-default);
+  border-radius: var(--ds-border-radius-md);
+}
+
+.ds-textfield__input:disabled {
+  cursor: not-allowed;
+}
+
+.ds-textfield--readonly .ds-textfield__input {
+  background: var(--ds-color-neutral-background-subtle);
+  border-color: var(--ds-color-neutral-border-strong);
+}
+
+.ds-textfield__field {
+  display: flex;
+  align-items: stretch;
+  border-radius: var(--ds-border-radius-md);
+}
+
+.ds-textfield__field > *:first-child {
+  border-top-left-radius: var(--ds-border-radius-md);
+  border-bottom-left-radius: var(--ds-border-radius-md);
+}
+
+.ds-textfield__field > *:last-child {
+  border-top-right-radius: var(--ds-border-radius-md);
+  border-bottom-right-radius: var(--ds-border-radius-md);
+}
+
+.ds-textfield--sm .ds-textfield__adornment {
+  padding: var(--ds-sizing-2) var(--ds-spacing-3);
+}
+
+.ds-textfield--md .ds-textfield__adornment {
+  padding: 0.65rem var(--ds-spacing-4);
+}
+
+.ds-textfield--lg .ds-textfield__adornment {
+  padding: 0.85rem var(--ds-spacing-5);
+}
+
+.ds-textfield--sm .ds-textfield__field {
+  height: var(--ds-sizing-10);
+}
+
+.ds-textfield--md .ds-textfield__field {
+  height: var(--ds-sizing-12);
+}
+
+.ds-textfield--lg .ds-textfield__field {
+  height: var(--ds-sizing-14);
+}
+
+.ds-textfield--sm .ds-textfield__input {
+  padding: 0 var(--ds-spacing-2);
+}
+
+.ds-textfield--md .ds-textfield__input {
+  padding: 0 var(--ds-spacing-3);
+}
+
+.ds-textfield--lg .ds-textfield__input {
+  padding: 0 var(--ds-spacing-4);
+}
+
+.ds-textfield__label {
+  min-width: min-content;
+  display: inline-flex;
+  flex-direction: row;
+  gap: var(--ds-spacing-1);
+  align-items: center;
+}
+
+.ds-textfield__description {
+  color: var(--ds-color-neutral-text-subtle);
+  margin-top: calc(var(--ds-spacing-2) * -1);
+}
+
+.ds-textfield:has(.ds-textfield__input:disabled) {
+  opacity: var(--ds-disabled-opacity);
+}
+
+.ds-textfield--error .ds-textfield__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) {
+  .ds-textfield__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-textfield__input--with-prefix {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.ds-textfield__input--with-suffix {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.ds-textfield__prefix {
+  border-right: 0;
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+  white-space: nowrap;
+}
+
+.ds-textfield__suffix {
+  border-left: 0;
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+  white-space: nowrap;
+}
+
+.ds-textfield__readonly__icon {
+  height: 1.2em;
+  width: 1.2em;
+}
+
+.ds-textfield__error-message:empty {
+  display: none;
+}

package/togglegroup.css

@@ -0,0 +1,27 @@
+.ds-togglegroup {
+  --dsc-togglegroup-padding: var(--ds-spacing-1);
+  --dsc-togglegroup-background: var(--ds-color-neutral-background-default);
+  --dsc-togglegroup-border-color: var(--ds-color-neutral-border-default);
+
+  background-color: var(--dsc-togglegroup-background);
+  border: var(--dsc-togglegroup-border-color) solid var(--ds-border-width-default);
+  border-radius: calc(var(--ds-border-radius-md) + var(--dsc-togglegroup-padding));
+  width: fit-content;
+  height: fit-content;
+}
+
+.ds-togglegroup__content {
+  display: inline-grid;
+  gap: var(--dsc-togglegroup-padding);
+  grid-auto-columns: 1fr;
+  grid-auto-flow: column;
+  padding: var(--dsc-togglegroup-padding);
+}
+
+.ds-togglegroup__input {
+  display: none;
+}
+
+.ds-togglegroup__item:focus-visible {
+  z-index: 1;
+}

package/tooltip.css

@@ -0,0 +1,15 @@
+.ds-tooltip {
+  --dsc-tooltip-background: var(--ds-color-neutral-text-default);
+  --dsc-tooltip-color: var(--ds-color-neutral-background-default);
+  --dsc-tooltip-padding: var(--ds-spacing-1) var(--ds-spacing-2);
+  --dsc-tooltip-border-radius: var(--ds-border-radius-md);
+
+  background: var(--dsc-tooltip-background);
+  padding: var(--dsc-tooltip-padding);
+  color: var(--dsc-tooltip-color);
+  border-radius: var(--dsc-tooltip-border-radius);
+}
+
+.ds-tooltip__arrow {
+  fill: var(--dsc-tooltip-background);
+}

package/utilities.css

@@ -0,0 +1,38 @@
+/**
+ * Visually hide an element, but leave it available for screen readers
+ */
+.ds-sr-only {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+/**
+ * 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-animate-height--openingOrClosing,
+.ds-animate-height--closed {
+  overflow: hidden;
+}
+
+.ds-animate-height--open .ds-animate-height__content {
+  height: auto;
+}
+
+.ds-animate-height--closed .ds-animate-height__content {
+  height: 0;
+  display: none;
+}