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

package/dropdownmenu.css

@@ -0,0 +1,46 @@
+@layer fds.dropdownmenu {
+  .fds-dropdownmenu {
+    position: relative;
+    padding: var(--fds-spacing-2);
+    z-index: 1500;
+    margin: 0;
+    list-style: none;
+    border-radius: var(--fds-border_radius-medium);
+    box-shadow: var(--fds-shadow-medium);
+    background-color: var(--fds-semantic-background-default);
+  }
+
+  .fds-dropdownmenu--small {
+    min-width: 240px;
+    padding: var(--fds-spacing-2);
+  }
+
+  .fds-dropdownmenu--medium {
+    min-width: 260px;
+    padding: var(--fds-spacing-3) var(--fds-spacing-2);
+  }
+
+  .fds-dropdownmenu--large {
+    min-width: 280px;
+    padding: var(--fds-spacing-4) var(--fds-spacing-2);
+  }
+
+  .fds-dropdownmenu > hr {
+    border-color: var(--fds-semantic-border-divider-subtle) !important;
+  }
+
+  .fds-dropdownmenu__item {
+    justify-content: start;
+    padding: 0 var(--fds-spacing-4);
+  }
+
+  .fds-dropdownmenu__section {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .fds-dropdownmenu__heading {
+    padding: var(--fds-spacing-2) var(--fds-spacing-4);
+  }
+}

package/error-message.css

@@ -0,0 +1,43 @@
+@layer fds.typography.error-message {
+  .fds-error-message {
+    --fdsc-bottom-spacing: var(--fds-spacing-5);
+
+    margin: 0;
+  }
+
+  .fds-error-message--error {
+    color: var(--fds-semantic-text-danger-default);
+  }
+
+  .fds-error-message--spacing {
+    margin-bottom: var(--fdsc-bottom-spacing);
+  }
+
+  .fds-error-message--large {
+    --fdsc-bottom-spacing: var(--fds-spacing-5);
+
+    font: var(--fds-typography-error_message-large);
+    font-family: inherit;
+  }
+
+  .fds-error-message--medium {
+    --fdsc-bottom-spacing: var(--fds-spacing-5);
+
+    font: var(--fds-typography-error_message-medium);
+    font-family: inherit;
+  }
+
+  .fds-error-message--small {
+    --fdsc-bottom-spacing: var(--fds-spacing-4);
+
+    font: var(--fds-typography-error_message-small);
+    font-family: inherit;
+  }
+
+  .fds-error-message--xsmall {
+    --fdsc-bottom-spacing: var(--fds-spacing-3);
+
+    font: var(--fds-typography-error_message-xsmall);
+    font-family: inherit;
+  }
+}

package/error-summary.css

@@ -0,0 +1,15 @@
+@layer fds.errorsummary {
+  .fds-error-summary {
+    padding: var(--fds-spacing-6) var(--fds-spacing-8);
+    border-radius: var(--fds-border_radius-large);
+    background-color: var(--fds-semantic-surface-danger-subtle);
+  }
+
+  .fds-error-summary a {
+    color: var(--fds-semantic-text-neutral-default);
+  }
+
+  .fds-error-summary li:last-of-type {
+    margin-bottom: 0;
+  }
+}

package/fieldset.css

@@ -0,0 +1,41 @@
+@layer fds.fieldset {
+  .fds-fieldset {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    min-width: 0;
+  }
+
+  .fds-fieldset--spacing {
+    display: flex;
+    flex-direction: column;
+    gap: var(--fds-spacing-2);
+  }
+
+  .fds-fieldset__description {
+    color: var(--fds-semantic-text-neutral-subtle);
+    font-weight: 400;
+  }
+
+  .fds-fieldset__legend {
+    display: contents;
+  }
+
+  .fds-fieldset--readonly .fds-fieldset__legend__content {
+    display: inline-flex;
+  }
+
+  .fds-fieldset--readonly .fds-fieldset__readonly__icon {
+    height: 1.2em;
+    width: 1.2em;
+  }
+
+  .fds-fieldset--disabled .fds-fieldset__legend,
+  .fds-fieldset--disabled .fds-fieldset__description {
+    color: var(--fds-semantic-border-neutral-subtle);
+  }
+
+  .fds-fieldset__error-message {
+    display: contents;
+  }
+}

package/heading.css

@@ -0,0 +1,68 @@
+@layer fds.typography.heading {
+  .fds-heading {
+    --fdsc-bottom-spacing: var(--fds-spacing-6);
+
+    margin: 0;
+    color: var(--fds-semantic-text-neutral-default);
+  }
+
+  .fds-heading--spacing {
+    margin-bottom: var(--fdsc-bottom-spacing);
+  }
+
+  .fds-heading--3xlarge {
+    --fdsc-bottom-spacing: var(--fds-spacing-8);
+
+    font: var(--fds-typography-heading-3xlarge);
+    font-family: inherit;
+  }
+
+  .fds-heading--2xlarge {
+    --fdsc-bottom-spacing: var(--fds-spacing-7);
+
+    font: var(--fds-typography-heading-2xlarge);
+    font-family: inherit;
+  }
+
+  .fds-heading--xlarge {
+    --fdsc-bottom-spacing: var(--fds-spacing-6);
+
+    font: var(--fds-typography-heading-xlarge);
+    font-family: inherit;
+  }
+
+  .fds-heading--large {
+    --fdsc-bottom-spacing: var(--fds-spacing-5);
+
+    font: var(--fds-typography-heading-large);
+    font-family: inherit;
+  }
+
+  .fds-heading--medium {
+    --fdsc-bottom-spacing: var(--fds-spacing-4);
+
+    font: var(--fds-typography-heading-medium);
+    font-family: inherit;
+  }
+
+  .fds-heading--small {
+    --fdsc-bottom-spacing: var(--fds-spacing-3);
+
+    font: var(--fds-typography-heading-small);
+    font-family: inherit;
+  }
+
+  .fds-heading--xsmall {
+    --fdsc-bottom-spacing: var(--fds-spacing-2);
+
+    font: var(--fds-typography-heading-xsmall);
+    font-family: inherit;
+  }
+
+  .fds-heading--xxsmall {
+    --fdsc-bottom-spacing: var(--fds-spacing-1);
+
+    font: var(--fds-typography-heading-xxsmall);
+    font-family: inherit;
+  }
+}

package/helptext.css

@@ -0,0 +1,58 @@
+@layer fds.helptext {
+  .fds-helptext__button {
+    background-color: transparent;
+    border-radius: 50px;
+    padding: 0 !important;
+    cursor: pointer;
+    display: flex;
+    border: none;
+    min-width: 0;
+    min-height: 0;
+  }
+
+  @media print {
+    .fds-helptext__button {
+      display: none;
+    }
+  }
+
+  .fds-helptext__icon--filled {
+    display: none;
+  }
+
+  .fds-helptext__icon {
+    color: var(--fds-semantic-text-action-default);
+    width: var(--fds-sizing-7);
+    height: var(--fds-sizing-7);
+  }
+
+  .fds-helptext__button:where(:hover, :focus, [data-state^='open']) > .fds-helptext__icon {
+    display: none;
+  }
+
+  .fds-helptext__button:where(:hover, :focus, [data-state^='open']) > .fds-helptext__icon--filled {
+    display: inline-block;
+  }
+
+  .fds-helptext__content {
+    font: var(--fds-typography-paragraph-medium);
+    font-family: inherit;
+    width: fit-content;
+    max-width: 700px;
+  }
+
+  .fds-helptext--small .fds-helptext__icon {
+    width: var(--fds-sizing-6);
+    height: var(--fds-sizing-6);
+  }
+
+  .fds-helptext--medium .fds-helptext__icon {
+    width: var(--fds-sizing-7);
+    height: var(--fds-sizing-7);
+  }
+
+  .fds-helptext--large .fds-helptext__icon {
+    width: var(--fds-sizing-8);
+    height: var(--fds-sizing-8);
+  }
+}

package/index.css

@@ -1,12 +1,43 @@
 @charset "UTF-8";
 
-@layer fds.utils, fds.btn;
+@layer fds.typography, fds.utils, fds.btn;
 
 /** Import order defines ordinal specificity for layers */
-@import url('./react-css-modules.css');
 @import url('./button.css');
 @import url('./utils.css');
+@import url('./box.css');
 @import url('./alert.css');
 @import url('./ingress.css');
 @import url('./skiplink.css');
 @import url('./accordion.css');
+@import url('./switch.css');
+@import url('./checkbox.css');
+@import url('./error-message.css');
+@import url('./label.css');
+@import url('./heading.css');
+@import url('./paragraph.css');
+@import url('./radio.css');
+@import url('./search.css');
+@import url('./native-select.css');
+@import url('./textfield.css');
+@import url('./textarea.css');
+@import url('./helptext.css');
+@import url('./modal.css');
+@import url('./list.css');
+@import url('./card.css');
+@import url('./link.css');
+@import url('./fieldset.css');
+@import url('./dropdownmenu.css');
+@import url('./chip');
+@import url('./divider.css');
+@import url('./tabs.css');
+@import url('./pagination.css');
+@import url('./popover.css');
+@import url('./skeleton.css');
+@import url('./tag.css');
+@import url('./error-summary.css');
+@import url('./togglegroup.css');
+@import url('./tooltip.css');
+@import url('./spinner.css');
+@import url('./table.css');
+@import url('./combobox.css');

package/ingress.css

@@ -1,4 +1,4 @@
-@layer fds.ingress {
+@layer fds.typography.ingress {
   .fds-ingress {
     --fdsc-bottom-spacing: var(--fds-spacing-5);
 

package/label.css

@@ -0,0 +1,46 @@
+@layer fds.typography.label {
+  .fds-label {
+    --fdsc-bottom-spacing: var(--fds-spacing-1);
+
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    color: var(--fds-semantic-text-neutral-default);
+  }
+
+  .fds-label--spacing {
+    margin-bottom: var(--fdsc-bottom-spacing);
+  }
+
+  .fds-label--large {
+    font: var(--fds-typography-label-large);
+    font-family: inherit;
+  }
+
+  .fds-label--medium {
+    font: var(--fds-typography-label-medium);
+    font-family: inherit;
+  }
+
+  .fds-label--small {
+    font: var(--fds-typography-label-small);
+    font-family: inherit;
+  }
+
+  .fds-label--xsmall {
+    font: var(--fds-typography-label-xsmall);
+    font-family: inherit;
+  }
+
+  .fds-label--regular-weight {
+    font-weight: 400;
+  }
+
+  .fds-label--medium-weight {
+    font-weight: 500;
+  }
+
+  .fds-label--semibold-weight {
+    font-weight: 600;
+  }
+}

package/link.css

@@ -0,0 +1,36 @@
+@layer fds.link {
+  .fds-link {
+    color: var(--fds-semantic-text-action-default);
+    cursor: pointer;
+    text-decoration: underline;
+    text-decoration-thickness: max(1px, 0.0625rem);
+    text-underline-offset: max(4px, 0.25rem);
+    display: inline-flex;
+    align-items: center;
+    gap: var(--fds-spacing-1);
+  }
+
+  .fds-link:visited {
+    color: var(--fds-semantic-text-visited-default);
+    text-decoration: none;
+  }
+
+  .fds-link:hover {
+    color: var(--fds-semantic-text-action-hover);
+    text-decoration-thickness: max(2px, 0.125rem, 0.12em);
+  }
+
+  .fds-link:focus-visible {
+    background: var(--fds-semantic-border-focus-outline);
+    box-shadow: 0 max(3px, 0.1875rem, 0.18em) var(--fds-semantic-border-focus-boxshadow);
+    color: var(--fds-semantic-text-action-active);
+    outline: none;
+    text-decoration: none;
+  }
+
+  .fds-link--inverted:not(:focus-visible, :active),
+  .fds-link--inverted:not(:focus-visible, :active):hover,
+  .fds-link--inverted:not(:focus-visible, :active):visited {
+    color: white;
+  }
+}

package/list.css

@@ -0,0 +1,18 @@
+@layer fds.list {
+  .fds-list--small {
+    padding-left: var(--fds-spacing-4);
+  }
+
+  .fds-list--medium,
+  .fds-list--large {
+    padding-left: var(--fds-spacing-6);
+  }
+
+  .fds-list__item {
+    margin-bottom: var(--fds-spacing-2);
+  }
+
+  .fds-list__item > .fds-list {
+    margin-top: var(--fds-spacing-2);
+  }
+}

package/modal.css

@@ -0,0 +1,106 @@
+@layer fds.modal {
+  .fds-modal {
+    padding: 0;
+    width: 100%;
+    max-width: 650px;
+    border: none;
+    border-radius: var(--fds-border_radius-medium);
+    box-shadow: var(--fds-shadow-xlarge);
+  }
+
+  .fds-modal::backdrop {
+    background-color: rgb(0 0 0 / 0.5);
+    animation: fade-in 300ms ease-in-out;
+  }
+
+  .fds-modal[open] {
+    animation:
+      slide-in 300ms ease-in-out,
+      fade-in 300ms ease-in-out;
+  }
+
+  .fds-modal > hr {
+    margin: var(--fds-spacing-3) 0 !important;
+    border-color: var(--fds-semantic-border-divider-subtle);
+  }
+
+  .fds-modal--lock-scroll {
+    overflow: hidden;
+  }
+
+  @media (max-width: 650px) {
+    .fds-modal {
+      min-width: 100%;
+      max-width: 100%;
+      border-radius: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .fds-modal[open] {
+      animation: none;
+    }
+
+    .fds-modal::backdrop {
+      animation: none;
+    }
+  }
+
+  @keyframes slide-in {
+    0% {
+      transform: translateY(50px);
+    }
+
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .fds-modal__header {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    padding-top: var(--fds-spacing-6);
+    padding-bottom: var(--fds-spacing-2);
+    padding-left: var(--fds-spacing-6);
+    padding-right: var(--fds-spacing-18);
+    gap: var(--fds-spacing-1);
+    color: var(--fds-semantic-text-neutral-default);
+  }
+
+  .fds-modal__header--no-button {
+    padding-right: var(--fds-spacing-6);
+  }
+
+  .fds-modal__header__button {
+    position: absolute;
+    top: var(--fds-spacing-3);
+    right: var(--fds-spacing-3);
+  }
+
+  .fds-modal__footer {
+    display: flex;
+    align-items: center;
+    gap: var(--fds-spacing-4);
+    padding-top: var(--fds-spacing-3);
+    padding-bottom: var(--fds-spacing-6);
+    padding-left: var(--fds-spacing-6);
+    padding-right: var(--fds-spacing-6);
+  }
+
+  .fds-modal__content {
+    padding: var(--fds-spacing-2) var(--fds-spacing-6);
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+}

package/native-select.css

@@ -0,0 +1,92 @@
+@layer fds.nativeselect {
+  .fds-native-select {
+    position: relative;
+    font: inherit;
+    font-family: inherit;
+    box-sizing: border-box;
+    flex: 0 1 auto;
+    padding: 0 var(--fds-spacing-2);
+    border: solid 1px var(--fds-semantic-border-input-default);
+    border-radius: var(--fds-border_radius-medium);
+    background-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMWVtJyBoZWlnaHQ9JzFlbScgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZvY3VzYWJsZT0nZmFsc2UnIHJvbGU9J2ltZyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J001Ljk3IDkuNDdhLjc1Ljc1IDAgMCAxIDEuMDYgMEwxMiAxNC40NGw0Ljk3LTQuOTdhLjc1Ljc1IDAgMSAxIDEuMDYgMS4wNmwtNS41IDUuNWEuNzUuNzUgMCAwIDEtMS4wNiAwbC01LjUtNS41YS43NS43NSAwIDAgMSAwLTEuMDZaJyBmaWxsPSdjdXJyZW50Q29sb3InPjwvcGF0aD48L3N2Zz4=');
+    background-color: var(--fds-semantic-background-default);
+    background-repeat: no-repeat;
+    background-position: right var(--fds-spacing-2) center;
+    background-size: 1.5em 1.5em;
+    appearance: none;
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .fds-native-select: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-native-select.fds-native-select--multiple {
+    background-image: none;
+  }
+
+  .fds-native-select--small {
+    padding: 0 var(--fds-spacing-2);
+    padding-right: var(--fds-spacing-8);
+    height: var(--fds-sizing-10);
+  }
+
+  .fds-native-select--medium {
+    padding: 0 var(--fds-spacing-3);
+    padding-right: var(--fds-spacing-10);
+    height: var(--fds-sizing-12);
+  }
+
+  .fds-native-select--large {
+    padding: 0 var(--fds-spacing-4);
+    padding-right: var(--fds-spacing-12);
+    height: var(--fds-sizing-14);
+  }
+
+  .fds-native-select--container {
+    display: grid;
+    gap: var(--fds-spacing-2);
+  }
+
+  .fds-native-select--disabled {
+    opacity: var(--fds-opacity-disabled);
+  }
+
+  .fds-native-select--disabled .fds-native-select {
+    cursor: not-allowed;
+  }
+
+  .fds-native-select--readonly .fds-native-select {
+    background: var(--fds-semantic-surface-neutral-subtle);
+    border-color: var(--fds-semantic-border-neutral-default);
+  }
+
+  .fds-native-select--error > .fds-native-select:not(:focus-visible) {
+    border-color: var(--fds-semantic-border-danger-default);
+    box-shadow: inset 0 0 0 1px var(--fds-semantic-border-danger-default);
+  }
+
+  .fds-native-select__readonly__icon {
+    height: 1.2em;
+    width: 1.2em;
+  }
+
+  .fds-native-select__error-message:empty {
+    display: none;
+  }
+
+  .fds-native-select__label {
+    min-width: min-content;
+    display: inline-flex;
+    flex-direction: row;
+    gap: var(--fds-spacing-1);
+    align-items: center;
+  }
+
+  .fds-native-select__description {
+    color: var(--fds-semantic-text-neutral-subtle);
+    margin-top: calc(var(--fds-spacing-2) * -1);
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digdir/designsystemet-css",
-  "version": "0.6.1-alpha.1",
+  "version": "0.8.0",
   "description": "CSS for Designsystemet",
   "author": "Designsystemet team",
   "repository": "https://github.com/digdir/designsystemet",
@@ -39,8 +39,5 @@
     "postcss-import": "^16.0.1",
     "rimraf": "^5.0.5"
   },
-  "dependencies": {
-    "@digdir/designsystemet-react": "^0.59.1-alpha.1"
-  },
-  "gitHead": "7e9e9ba1eed73f95f9edb4cc4226167a551e92aa"
+  "gitHead": "878b8bbe53351879efff228b0b8c11eeca8c23bb"
 }