@digdir/designsystemet-css 0.0.0-next-20240724125515

package/dropdownmenu.css

@@ -0,0 +1,56 @@
+.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);
+}

package/error-summary.css

@@ -0,0 +1,23 @@
+.ds-error-summary {
+  --dsc-errorsummary-background: var(--ds-color-danger-surface-default);
+  --dsc-errorsummary-border-radius: min(1rem, var(--ds-border-radius-lg));
+  --dsc-errorsummary-padding: var(--ds-spacing-6) var(--ds-spacing-8);
+  --dsc-errorsummary-link-color: var(--ds-color-neutral-text-default);
+  --dsc-errorsummary-heading-color: var(--ds-color-danger-text-default);
+
+  padding: var(--dsc-errorsummary-padding);
+  border-radius: var(--dsc-errorsummary-border-radius);
+  background-color: var(--dsc-errorsummary-background);
+}
+
+.ds-error-summary a {
+  color: var(--dsc-errorsummary-link-color);
+}
+
+.ds-error-summary li:last-of-type {
+  margin-bottom: 0;
+}
+
+.ds-error-summary__heading {
+  color: var(--dsc-errorsummary-heading-color);
+}

package/fieldset.css

@@ -0,0 +1,43 @@
+.ds-fieldset {
+  margin: 0;
+  padding: 0;
+  border: 0;
+  min-width: 0;
+}
+
+.ds-fieldset--spacing {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ds-spacing-2);
+}
+
+.ds-fieldset__description {
+  color: var(--ds-color-neutral-text-subtle);
+  margin-bottom: var(--ds-spacing-2);
+}
+
+.ds-fieldset__legend {
+  display: contents;
+}
+
+.ds-fieldset--readonly .ds-fieldset__legend__content {
+  display: inline-flex;
+}
+
+.ds-fieldset:not(:has(.ds-fieldset__description)) .ds-fieldset__legend__content {
+  margin-bottom: var(--ds-spacing-4);
+}
+
+.ds-fieldset--readonly .ds-fieldset__readonly__icon {
+  height: 1.2em;
+  width: 1.2em;
+}
+
+.ds-fieldset:disabled .ds-fieldset__legend,
+.ds-fieldset:disabled .ds-fieldset__description {
+  color: var(--ds-color-neutral-border-subtle);
+}
+
+.ds-fieldset__error-message {
+  display: contents;
+}

package/helptext.css

@@ -0,0 +1,60 @@
+.ds-helptext__button {
+  --dsc-helptext-color: var(--ds-color-neutral-text-default);
+  --dsc-helptext-icon-color: var(--ds-color-accent-base-default);
+  --dsc-helptext-icon-width: var(--ds-sizing-7);
+  --dsc-helptext-icon-height: var(--ds-sizing-7);
+
+  background-color: transparent;
+  border-radius: 50px;
+  padding: 0 !important;
+  cursor: pointer;
+  display: flex;
+  border: none;
+  min-width: 0;
+  min-height: 0;
+}
+
+@media print {
+  .ds-helptext__button {
+    display: none;
+  }
+}
+
+.ds-helptext__icon--filled {
+  display: none;
+}
+
+.ds-helptext__icon {
+  color: var(--dsc-helptext-icon-color);
+  width: var(--dsc-helptext-icon-width);
+  height: var(--dsc-helptext-icon-height);
+}
+
+.ds-helptext__button:where(:hover, :focus, [data-state^='open']) > .ds-helptext__icon {
+  display: none;
+}
+
+.ds-helptext__button:where(:hover, :focus, [data-state^='open']) > .ds-helptext__icon--filled {
+  display: inline-block;
+}
+
+.ds-helptext__content {
+  color: var(--dsc-helptext-color);
+  width: fit-content;
+  max-width: 700px;
+}
+
+.ds-helptext--sm .ds-helptext__icon {
+  --dsc-helptext-icon-width: var(--ds-sizing-6);
+  --dsc-helptext-icon-height: var(--ds-sizing-6);
+}
+
+.ds-helptext--md .ds-helptext__icon {
+  --dsc-helptext-icon-width: var(--ds-sizing-7);
+  --dsc-helptext-icon-height: var(--ds-sizing-7);
+}
+
+.ds-helptext--lg .ds-helptext__icon {
+  --dsc-helptext-icon-width: var(--ds-sizing-8);
+  --dsc-helptext-icon-height: var(--ds-sizing-8);
+}

package/index.css

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

package/link.css

@@ -0,0 +1,58 @@
+.ds-link {
+  --dsc-link-color: var(--ds-color-accent-text-subtle);
+  --dsc-link-color-hover: var(--ds-color-accent-text-default);
+  --dsc-link-color-active: var(--ds-color-accent-text-default);
+  --dsc-link-color-active-background: var(--ds-color-accent-surface-default);
+  --dsc-link-color-visited: var(--ds-global-purple-12);
+  --dsc-link-color-focus: var(--ds-color-focus-inner);
+  --dsc-link-color-focus-background: var(--ds-color-focus-outer);
+
+  position: relative;
+  color: var(--dsc-link-color);
+  cursor: pointer;
+  text-decoration: underline;
+  text-decoration-thickness: max(1px, 0.0625rem);
+  text-underline-offset: max(5px, 0.25rem);
+  display: inline-flex;
+  align-items: center;
+  gap: var(--ds-spacing-1);
+}
+
+.ds-link--accent {
+  --dsc-link-color: var(--ds-color-accent-text-subtle);
+  --dsc-link-color-hover: var(--ds-color-accent-text-default);
+  --dsc-link-color-active: var(--ds-color-accent-text-default);
+  --dsc-link-color-active-background: var(--ds-color-accent-surface-default);
+  --dsc-link-color-visited: var(--ds-global-purple-12);
+}
+
+.ds-link--neutral {
+  --dsc-link-color: var(--ds-color-neutral-text-default);
+  --dsc-link-color-hover: var(--ds-color-neutral-text-subtle);
+  --dsc-link-color-active: var(--ds-color-neutral-text-subtle);
+  --dsc-link-color-active-background: var(--ds-color-neutral-surface-default);
+  --dsc-link-color-visited: var(--ds-global-purple-12);
+}
+
+.ds-link:visited {
+  color: var(--dsc-link-color-visited);
+  text-decoration: none;
+}
+
+.ds-link:hover {
+  color: var(--dsc-link-color-hover);
+  text-decoration-thickness: max(2px, 0.125rem, 0.12em);
+}
+
+.ds-link:focus-visible {
+  color: var(--dsc-link-color-focus);
+  background: var(--dsc-link-color-focus-background);
+  outline: none;
+}
+
+.ds-link:active {
+  color: var(--dsc-link-color-active);
+  background: var(--dsc-link-color-active-background);
+  border-radius: min(0.25rem, var(--ds-border-radius-md));
+  outline: none;
+}

package/list.css

@@ -0,0 +1,22 @@
+.ds-list {
+  --dsc-list-padding-left: var(--ds-spacing-6);
+
+  padding-left: var(--dsc-list-padding-left);
+}
+
+.ds-list--sm {
+  --dsc-list-padding-left: var(--ds-spacing-4);
+}
+
+.ds-list--md,
+.ds-list--lg {
+  --dsc-list-padding-left: var(--ds-spacing-6);
+}
+
+.ds-list__item {
+  margin-bottom: var(--ds-spacing-2);
+}
+
+.ds-list__item > .ds-list {
+  margin-top: var(--ds-spacing-2);
+}

package/modal.css

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

package/native-select.css

@@ -0,0 +1,106 @@
+.ds-native-select__wrapper {
+  position: relative;
+  display: grid;
+  flex: 0 1 auto;
+}
+
+/* chevron for native select */
+.ds-native-select__wrapper::after {
+  content: '';
+  position: absolute;
+  background-color: var(--ds-color-neutral-text-default);
+  pointer-events: none;
+  top: 50%;
+  right: var(--ds-spacing-2);
+  transform: translateY(-50%);
+  width: 1.5em;
+  height: 1.5em;
+  mask-image: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0nMWVtJyBoZWlnaHQ9JzFlbScgdmlld0JveD0nMCAwIDI0IDI0JyBmaWxsPSdub25lJyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIGZvY3VzYWJsZT0nZmFsc2UnIHJvbGU9J2ltZyc+PHBhdGggZmlsbC1ydWxlPSdldmVub2RkJyBjbGlwLXJ1bGU9J2V2ZW5vZGQnIGQ9J001Ljk3IDkuNDdhLjc1Ljc1IDAgMCAxIDEuMDYgMEwxMiAxNC40NGw0Ljk3LTQuOTdhLjc1Ljc1IDAgMSAxIDEuMDYgMS4wNmwtNS41IDUuNWEuNzUuNzUgMCAwIDEtMS4wNiAwbC01LjUtNS41YS43NS43NSAwIDAgMSAwLTEuMDZaJyBmaWxsPSdjdXJyZW50Q29sb3InPjwvcGF0aD48L3N2Zz4=');
+  mask-size: contain;
+}
+
+.ds-native-select {
+  position: relative;
+  font-family: inherit;
+  box-sizing: border-box;
+  padding: 0 var(--ds-spacing-2);
+  border: solid 1px var(--ds-color-neutral-border-default);
+  border-radius: var(--ds-border-radius-md);
+  background-color: var(--ds-color-neutral-background-default);
+  color: var(--ds-color-neutral-text-default);
+  appearance: none;
+}
+
+@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 {
+  padding: 0 var(--ds-spacing-2);
+  padding-right: var(--ds-spacing-8);
+  height: var(--ds-sizing-10);
+}
+
+.ds-native-select--md {
+  padding: 0 var(--ds-spacing-3);
+  padding-right: var(--ds-spacing-10);
+  height: var(--ds-sizing-12);
+}
+
+.ds-native-select--lg {
+  padding: 0 var(--ds-spacing-4);
+  padding-right: var(--ds-spacing-12);
+  height: var(--ds-sizing-14);
+}
+
+.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 {
+  min-width: min-content;
+  display: inline-flex;
+  flex-direction: row;
+  gap: var(--ds-spacing-1);
+  align-items: center;
+}
+
+.ds-native-select__description {
+  color: var(--ds-color-neutral-text-subtle);
+  margin-top: calc(var(--ds-spacing-2) * -1);
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@digdir/designsystemet-css",
+  "version": "0.0.0-next-20240724125515",
+  "description": "CSS for Designsystemet",
+  "author": "Designsystemet team",
+  "repository": "https://github.com/digdir/designsystemet",
+  "license": "MIT",
+  "main": "./dist/index.css",
+  "files": [
+    "dist",
+    "*.css"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "browserslist": [
+    "cover 90% in NO",
+    "last 2 versions",
+    "Firefox ESR",
+    "not dead",
+    "not ie <= 11",
+    "not op_mini all"
+  ],
+  "keywords": [
+    "css",
+    "designsystem",
+    "designsystemet",
+    "digdir"
+  ],
+  "scripts": {
+    "build": "rimraf dist && postcss ./*.css --base . --dir ./dist",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "devDependencies": {
+    "autoprefixer": "^10.4.19",
+    "cssnano": "^6.0.2",
+    "postcss": "^8.4.35",
+    "postcss-cli": "^11.0.0",
+    "postcss-import": "^16.0.1",
+    "rimraf": "^5.0.5"
+  }
+}

package/pagination.css

@@ -0,0 +1,67 @@
+.ds-pagination {
+  --dsc-pagination-listitem-margin: var(--ds-spacing-4);
+  --dsc-pagination-ellipsis-width: var(--ds-sizing-12);
+  --dsc-pagination-chevron-margin: var(--ds-spacing-2);
+
+  list-style-type: none;
+  display: flex;
+  padding: 0;
+  margin: 0;
+  position: relative;
+  width: fit-content;
+}
+
+.ds-pagination--hidden {
+  visibility: hidden;
+}
+
+.ds-pagination--sm {
+  --dsc-pagination-chevron-margin: var(--ds-spacing-2);
+}
+
+.ds-pagination--md {
+  --dsc-pagination-chevron-margin: var(--ds-spacing-2);
+}
+
+.ds-pagination--lg {
+  --dsc-pagination-chevron-margin: var(--ds-spacing-2);
+}
+
+.ds-pagination li:first-child {
+  margin-right: var(--dsc-pagination-chevron-margin);
+}
+
+.ds-pagination li:last-child {
+  margin-left: var(--dsc-pagination-chevron-margin);
+}
+
+.ds-pagination__item {
+  flex: 1;
+  margin-right: var(--dsc-pagination-listitem-margin);
+}
+
+.ds-pagination--sm .ds-pagination__item {
+  --dsc-pagination-listitem-margin: var(--ds-spacing-2);
+  --dsc-pagination-ellipsis-width: var(--ds-sizing-10);
+}
+
+.ds-pagination--md .ds-pagination__item {
+  --dsc-pagination-listitem-margin: var(--ds-spacing-4);
+  --dsc-pagination-ellipsis-width: var(--ds-sizing-12);
+}
+
+.ds-pagination--lg .ds-pagination__item {
+  --dsc-pagination-listitem-margin: var(--ds-spacing-6);
+  --dsc-pagination-ellipsis-width: var(--ds-sizing-14);
+}
+
+.ds-pagination__item.ds-pagination--compact {
+  --dsc-pagination-listitem-margin: var(--ds-spacing-0);
+  --dsc-pagination-chevron-margin: var(--ds-spacing-1);
+}
+
+.ds-pagination__ellipsis {
+  margin-top: 0.5em;
+  text-align: center;
+  width: var(--dsc-pagination-ellipsis-width);
+}