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

package/tabs.css

@@ -0,0 +1,103 @@
+@layer fds.tabs {
+  .fds-tabs__tab {
+    --fds-tabs__tab-bottom-border-color: transparent;
+
+    display: flex;
+    flex-direction: row;
+    box-sizing: border-box;
+    gap: var(--fds-spacing-1);
+    justify-content: center;
+    text-align: center;
+    align-items: center;
+    padding: var(--fds-spacing-2) var(--fds-spacing-3);
+    border: none;
+    border-radius: 0;
+    background-color: transparent;
+    cursor: pointer;
+    color: var(--fds-semantic-text-neutral-subtle);
+    position: relative;
+  }
+
+  .fds-tabs__content {
+    padding: var(--fds-spacing-5);
+  }
+
+  .fds-tabs--small .fds-tabs__tab,
+  .fds-tabs--small .fds-tabs__content {
+    font: var(--fds-typography-paragraph-short-small);
+  }
+
+  .fds-tabs--medium .fds-tabs__tab,
+  .fds-tabs--medium .fds-tabs__content {
+    font: var(--fds-typography-paragraph-short-medium);
+  }
+
+  .fds-tabs--large .fds-tabs__tab,
+  .fds-tabs--large .fds-tabs__content {
+    font: var(--fds-typography-paragraph-short-large);
+  }
+
+  .fds-tabs--small .fds-tabs__tab {
+    padding: var(--fds-spacing-2) var(--fds-spacing-4);
+  }
+
+  .fds-tabs--medium .fds-tabs__tab {
+    padding: var(--fds-spacing-3) var(--fds-spacing-5);
+  }
+
+  .fds-tabs--large .fds-tabs__tab {
+    padding: var(--fds-spacing-4) var(--fds-spacing-6);
+  }
+
+  .fds-tabs--small .fds-tabs__content {
+    padding: var(--fds-spacing-4);
+  }
+
+  .fds-tabs--medium .fds-tabs__content {
+    padding: var(--fds-spacing-5);
+  }
+
+  .fds-tabs--large .fds-tabs__content {
+    padding: var(--fds-spacing-6);
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .fds-tabs__tab:hover {
+      --fds-tabs__tab-bottom-border-color: var(--fds-semantic-border-neutral-subtle);
+
+      color: var(--fds-semantic-text-neutral-default);
+    }
+  }
+
+  .fds-tabs__tab--active {
+    --fds-tabs__tab-bottom-border-color: var(--fds-semantic-border-action-default);
+
+    color: var(--fds-semantic-text-action-default);
+  }
+
+  .fds-tabs__tab:focus-visible {
+    --fds-tabs__tab-bottom-border-color: var(--fds-semantic-text-neutral-default);
+
+    background: var(--fds-semantic-border-focus-outline);
+    color: var(--fds-semantic-text-neutral-default);
+    outline: none;
+  }
+
+  .fds-tabs__tab::after {
+    content: '';
+    display: block;
+    height: 3px;
+    width: 100%;
+    border-radius: var(--fds-border_radius-full);
+    background-color: var(--fds-tabs__tab-bottom-border-color);
+    position: absolute;
+    bottom: 0;
+    left: 0;
+  }
+
+  .fds-tabs__tablist {
+    display: flex;
+    flex-direction: row;
+    border-bottom: var(--fds-border_width-default) solid var(--fds-semantic-border-neutral-subtle);
+  }
+}

package/tag.css

@@ -0,0 +1,72 @@
+@layer fds.tag {
+  .fds-tag {
+    --fds-tag-background: var(--fds-semantic-surface-neutral-subtle);
+    --fds-tag-color: var(--fds-semantic-text-neutral-default);
+
+    color: var(--fds-tag-color);
+    padding: 0 var(--fds-spacing-2);
+    min-height: var(--fds-sizing-8);
+    background-color: var(--fds-tag-background);
+    border-radius: var(--fds-border_radius-small);
+    display: flex;
+    align-items: center;
+    box-sizing: border-box;
+    word-break: break-word;
+    width: max-content;
+  }
+
+  .fds-tag--small {
+    padding: 0 var(--fds-spacing-2);
+    min-height: var(--fds-sizing-7);
+  }
+
+  .fds-tag--medium {
+    padding: 0 var(--fds-spacing-2);
+    min-height: var(--fds-sizing-8);
+  }
+
+  .fds-tag--large {
+    padding: 0 var(--fds-spacing-3);
+    min-height: var(--fds-sizing-9);
+  }
+
+  .fds-tag--neutral {
+    --fds-tag-background: var(--fds-semantic-surface-neutral-subtle);
+    --fds-tag-color: var(--fds-semantic-text-neutral-default);
+  }
+
+  .fds-tag--info {
+    --fds-tag-background: var(--fds-semantic-surface-info-subtle);
+    --fds-tag-color: var(--fds-semantic-text-neutral-default);
+  }
+
+  .fds-tag--success {
+    --fds-tag-background: var(--fds-semantic-surface-success-subtle);
+    --fds-tag-color: var(--fds-semantic-text-success-on_success_subtle);
+  }
+
+  .fds-tag--warning {
+    --fds-tag-background: var(--fds-semantic-surface-warning-default);
+    --fds-tag-color: var(--fds-semantic-text-neutral-default);
+  }
+
+  .fds-tag--danger {
+    --fds-tag-background: var(--fds-semantic-surface-danger-subtle);
+    --fds-tag-color: var(--fds-semantic-text-danger-on_danger_subtle);
+  }
+
+  .fds-tag--first {
+    --fds-tag-background: var(--fds-semantic-surface-first-light);
+    --fds-tag-color: var(--fds-semantic-text-neutral-default);
+  }
+
+  .fds-tag--second {
+    --fds-tag-background: var(--fds-semantic-surface-second-light);
+    --fds-tag-color: var(--fds-semantic-text-neutral-default);
+  }
+
+  .fds-tag--third {
+    --fds-tag-background: var(--fds-semantic-surface-third-light);
+    --fds-tag-color: var(--fds-semantic-text-neutral-default);
+  }
+}

package/textarea.css

@@ -0,0 +1,80 @@
+@layer fds.textarea {
+  .fds-textarea {
+    display: grid;
+    gap: var(--fds-spacing-2);
+  }
+
+  .fds-textarea__readonly__icon {
+    height: 1.2em;
+    width: 1.2em;
+  }
+
+  .fds-textarea__error-message:empty {
+    display: none;
+  }
+
+  .fds-textarea__label {
+    min-width: min-content;
+    display: inline-flex;
+    flex-direction: row;
+    gap: var(--fds-spacing-1);
+    align-items: center;
+  }
+
+  .fds-textarea__description {
+    color: var(--fds-semantic-text-neutral-subtle);
+    margin-top: calc(var(--fds-spacing-2) * -1);
+  }
+
+  .fds-textarea__input {
+    font: inherit;
+    font-family: inherit;
+    position: relative;
+    box-sizing: border-box;
+    flex: 0 1 auto;
+    min-height: 2.5em;
+    width: 100%;
+    appearance: none;
+    padding: var(--fds-spacing-3);
+    border: solid 1px var(--fds-semantic-border-input-default);
+    border-radius: var(--fds-border_radius-medium);
+    resize: vertical;
+  }
+
+  .fds-textarea--small .fds-textarea__input {
+    padding: var(--fds-spacing-2);
+  }
+
+  .fds-textarea--medium .fds-textarea__input {
+    padding: var(--fds-spacing-3);
+  }
+
+  .fds-textarea--large .fds-textarea__input {
+    padding: var(--fds-spacing-4);
+  }
+
+  .fds-textarea--disabled {
+    opacity: var(--fds-opacity-disabled);
+  }
+
+  .fds-textarea--disabled .fds-textarea__input {
+    cursor: not-allowed;
+  }
+
+  .fds-textarea--readonly .fds-textarea__input {
+    background: var(--fds-semantic-surface-neutral-subtle);
+    border-color: var(--fds-semantic-border-neutral-default);
+  }
+
+  .fds-textarea--error > .fds-textarea__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-textarea__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);
+    }
+  }
+}

package/textfield.css

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

package/togglegroup.css

@@ -0,0 +1,24 @@
+@layer fds.togglegroup {
+  .fds-togglegroup {
+    background-color: var(--fds-semantic-background-default);
+    border: var(--fds-semantic-border-neutral-default) solid var(--fds-border_width-default);
+    border-radius: var(--fds-border_radius-large);
+    width: fit-content;
+  }
+
+  .fds-togglegroup__content {
+    display: inline-grid;
+    gap: var(--fds-spacing-1);
+    grid-auto-columns: 1fr;
+    grid-auto-flow: column;
+    padding: var(--fds-spacing-1);
+  }
+
+  .fds-togglegroup__input {
+    display: none;
+  }
+
+  .fds-togglegroup__item:focus-visible {
+    z-index: 1;
+  }
+}

package/tooltip.css

@@ -0,0 +1,23 @@
+@layer fds.tooltip {
+  .fds-tooltip {
+    background: var(--fds-semantic-surface-neutral-inverted);
+    padding: var(--fds-spacing-1) var(--fds-spacing-2);
+    color: var(--fds-semantic-text-neutral-on_inverted);
+    border-radius: var(--fds-border_radius-medium);
+    font: var(--fds-typography-paragraph-xsmall);
+    font-family: inherit;
+  }
+
+  .fds-tooltip--inverted {
+    background: var(--fds-semantic-surface-neutral-subtle);
+    color: var(--fds-semantic-text-neutral-default);
+  }
+
+  .fds-tooltip__arrow {
+    fill: var(--fds-semantic-surface-neutral-inverted);
+  }
+
+  .fds-tooltip--inverted .fds-tooltip__arrow {
+    fill: var(--fds-semantic-surface-neutral-subtle);
+  }
+}

package/utils.css

@@ -23,4 +23,20 @@
     outline-offset: var(--fds-focus-border-width);
     box-shadow: 0 0 0 var(--fds-focus-border-width) var(--fds-semantic-border-focus-boxshadow);
   }
+
+  @layer animate-height {
+    .fds-animate-height--openingOrClosing,
+    .fds-animate-height--closed {
+      overflow: hidden;
+    }
+
+    .fds-animate-height--open .fds-animate-height__content {
+      height: auto;
+    }
+
+    .fds-animate-height--closed .fds-animate-height__content {
+      height: 0;
+      display: none;
+    }
+  }
 }