@digdir/designsystemet-css 0.11.0-next.12 → 0.100.51-next.52

package/package.json

@@ -1,14 +1,19 @@
 {
   "name": "@digdir/designsystemet-css",
-  "version": "0.11.0-next.12",
+  "version": "0.100.51-next.52",
   "description": "CSS for Designsystemet",
   "author": "Designsystemet team",
-  "repository": "https://github.com/digdir/designsystemet",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/digdir/designsystemet.git"
+  },
   "license": "MIT",
-  "main": "./dist/index.css",
+  "exports": {
+    ".": "./dist/src/index.css",
+    "./*": "./dist/src/*"
+  },
   "files": [
-    "dist",
-    "*.css"
+    "dist"
   ],
   "publishConfig": {
     "access": "public"
@@ -28,16 +33,15 @@
     "digdir"
   ],
   "scripts": {
-    "build": "rimraf dist && postcss ./*.css --base . --dir ./dist",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "build": "rimraf dist && postcss ./src/*.css --base . --dir ./dist"
   },
   "devDependencies": {
     "autoprefixer": "^10.4.20",
-    "cssnano": "^7.0.4",
-    "postcss": "^8.4.41",
+    "cssnano": "^7.0.6",
+    "postcss": "^8.5.1",
     "postcss-cli": "^11.0.0",
     "postcss-import": "^16.1.0",
-    "postcss-nesting": "^13.0.0",
+    "postcss-nesting": "^13.0.1",
     "rimraf": "^6.0.1"
   }
 }

package/accordion.css

@@ -1,139 +0,0 @@
-.ds-accordion {
-  --dsc-accordion-border-radius: min(1rem, var(--ds-border-radius-md));
-  --dsc-accordion-border-color: var(--ds-color-neutral-border-subtle);
-  --dsc-accordion-background: var(--ds-color-neutral-background-default);
-  --dsc-accordion-button-background: var(--ds-color-neutral-background-default);
-  --dsc-accordion-button-background-open: var(--ds-color-neutral-background-subtle);
-  --dsc-accordion-icon-background-hover: var(--ds-color-neutral-surface-default);
-  --dsc-accordion-icon-background-active: var(--ds-color-neutral-surface-default);
-
-  border-bottom: 1px solid var(--dsc-accordion-border-color);
-  box-sizing: border-box;
-  background-color: var(--dsc-accordion-background);
-}
-
-.ds-accordion--border {
-  border: 1px solid var(--dsc-accordion-border-color);
-  border-radius: var(--dsc-accordion-border-radius);
-}
-
-.ds-accordion__expand-icon {
-  border-radius: var(--ds-border-radius-md);
-  color: var(--ds-color-neutral-text-default);
-}
-
-.ds-accordion__content {
-  padding: var(--ds-spacing-5, 1rem);
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.ds-accordion__heading {
-  margin: 0;
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: var(--ds-spacing-2);
-  text-align: left;
-  border: none;
-  border-top: 1px solid var(--dsc-accordion-border-color);
-  background-color: var(--dsc-accordion-button-background);
-}
-
-.ds-accordion__button {
-  cursor: pointer;
-  width: 100%;
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: var(--ds-spacing-2);
-  margin: 0;
-  padding: var(--ds-spacing-4);
-  background-color: transparent;
-  border: none;
-  font-family: inherit;
-}
-
-.ds-accordion__item--open .ds-accordion__heading {
-  background-color: var(--dsc-accordion-button-background-open);
-}
-
-.ds-accordion__item:focus-within {
-  position: relative;
-}
-
-.ds-accordion__item:where(.ds-accordion__item--open) .ds-accordion__expand-icon {
-  transform: rotateZ(180deg);
-}
-
-.ds-accordion__item:not(:first-child) .ds-accordion__heading {
-  border-top: 1px solid var(--dsc-accordion-border-color);
-}
-
-.ds-accordion--border .ds-accordion__item:first-child .ds-accordion__heading {
-  border-top: 0;
-}
-
-.ds-accordion--border .ds-accordion__item:first-of-type .ds-accordion__heading:first-of-type {
-  border-top-left-radius: var(--dsc-accordion-border-radius);
-  border-top-right-radius: var(--dsc-accordion-border-radius);
-}
-
-.ds-accordion--border .ds-accordion__item:last-of-type:not(.ds-accordion__item--open) .ds-accordion__heading:first-of-type {
-  border-bottom-left-radius: var(--dsc-accordion-border-radius);
-  border-bottom-right-radius: var(--dsc-accordion-border-radius);
-}
-
-@media (hover: hover) and (pointer: fine) {
-  .ds-accordion__heading:hover .ds-accordion__expand-icon {
-    background-color: var(--dsc-accordion-icon-background-hover);
-  }
-
-  .ds-accordion__item--open .ds-accordion__heading:hover .ds-accordion__expand-icon {
-    background-color: var(--dsc-accordion-icon-background-active);
-  }
-}
-
-.ds-accordion--neutral {
-  --dsc-accordion-background: var(--ds-color-neutral-background-default);
-  --dsc-accordion-button-background: var(--ds-color-neutral-background-default);
-  --dsc-accordion-button-background-open: var(--ds-color-neutral-background-subtle);
-  --dsc-accordion-icon-background-hover: var(--ds-color-neutral-surface-default);
-}
-
-.ds-accordion--subtle {
-  --dsc-accordion-background: var(--ds-color-neutral-background-subtle);
-  --dsc-accordion-border-color: var(--ds-color-neutral-border-default);
-  --dsc-accordion-button-background: var(--ds-color-neutral-background-subtle);
-  --dsc-accordion-button-background-open: var(--ds-color-neutral-surface-default);
-  --dsc-accordion-icon-background-hover: var(--ds-color-neutral-surface-default);
-  --dsc-accordion-icon-background-active: var(--ds-color-neutral-surface-active);
-}
-
-.ds-accordion--brand1 {
-  --dsc-accordion-background: var(--ds-color-brand1-background-subtle);
-  --dsc-accordion-border-color: var(--ds-color-brand1-border-subtle);
-  --dsc-accordion-button-background: var(--ds-color-brand1-surface-default);
-  --dsc-accordion-button-background-open: var(--ds-color-brand1-surface-hover);
-  --dsc-accordion-icon-background-hover: var(--ds-color-brand1-surface-active);
-  --dsc-accordion-icon-background-active: var(--ds-color-brand1-surface-active);
-}
-
-.ds-accordion--brand2 {
-  --dsc-accordion-background: var(--ds-color-brand2-background-subtle);
-  --dsc-accordion-border-color: var(--ds-color-brand2-border-subtle);
-  --dsc-accordion-button-background: var(--ds-color-brand2-surface-default);
-  --dsc-accordion-button-background-open: var(--ds-color-brand2-surface-hover);
-  --dsc-accordion-icon-background-hover: var(--ds-color-brand2-surface-active);
-  --dsc-accordion-icon-background-active: var(--ds-color-brand2-surface-active);
-}
-
-.ds-accordion--brand3 {
-  --dsc-accordion-background: var(--ds-color-brand3-background-subtle);
-  --dsc-accordion-border-color: var(--ds-color-brand3-border-subtle);
-  --dsc-accordion-button-background: var(--ds-color-brand3-surface-default);
-  --dsc-accordion-button-background-open: var(--ds-color-brand3-surface-hover);
-  --dsc-accordion-icon-background-hover: var(--ds-color-brand3-surface-active);
-  --dsc-accordion-icon-background-active: var(--ds-color-brand3-surface-active);
-}

package/alert.css

@@ -1,69 +0,0 @@
-.ds-alert {
-  --dsc-alert-border-color: var(--ds-color-info-border-strong);
-  --dsc-alert-border-radius: min(1rem, var(--ds-border-radius-md));
-  --dsc-alert-color: var(--ds-color-neutral-text-default);
-  --dsc-alert-icon-color: var(--ds-color-neutral-text-subtle);
-  --dsc-alert-icon-size: var(--ds-sizing-7);
-  --dsc-alert-background: var(--ds-color-info-surface-default);
-  --dsc-alert-padding: var(--ds-spacing-6);
-
-  border: 1px solid var(--dsc-alert-border-color);
-  border-radius: var(--dsc-alert-border-radius);
-  background: var(--dsc-alert-background);
-  color: var(--dsc-alert-color);
-  padding: var(--dsc-alert-padding);
-  display: grid;
-  grid-auto-flow: column;
-  grid-auto-columns: min-content auto;
-  gap: var(--ds-spacing-2);
-}
-
-.ds-alert__icon {
-  height: var(--dsc-alert-icon-size);
-  width: var(--dsc-alert-icon-size);
-  color: var(--dsc-alert-icon-color);
-}
-
-.ds-alert__content {
-  display: flex;
-  flex-direction: column;
-}
-
-.ds-alert--info {
-  --dsc-alert-border-color: var(--ds-color-info-border-strong);
-  --dsc-alert-icon-color: var(--ds-color-info-text-subtle);
-  --dsc-alert-background: var(--ds-color-info-surface-default);
-}
-
-.ds-alert--warning {
-  --dsc-alert-border-color: var(--ds-color-warning-border-default);
-  --dsc-alert-icon-color: var(--ds-color-warning-text-subtle);
-  --dsc-alert-background: var(--ds-color-warning-surface-default);
-}
-
-.ds-alert--success {
-  --dsc-alert-border-color: var(--ds-color-success-border-default);
-  --dsc-alert-icon-color: var(--ds-color-success-text-subtle);
-  --dsc-alert-background: var(--ds-color-success-surface-default);
-}
-
-.ds-alert--danger {
-  --dsc-alert-border-color: var(--ds-color-danger-border-default);
-  --dsc-alert-icon-color: var(--ds-color-danger-text-subtle);
-  --dsc-alert-background: var(--ds-color-danger-surface-default);
-}
-
-.ds-alert--sm {
-  --dsc-alert-padding: var(--ds-spacing-5);
-  --dsc-alert-icon-size: var(--ds-sizing-6);
-}
-
-.ds-alert--md {
-  --dsc-alert-padding: var(--ds-spacing-6);
-  --dsc-alert-icon-size: var(--ds-sizing-7);
-}
-
-.ds-alert--lg {
-  --dsc-alert-padding: var(--ds-spacing-7);
-  --dsc-alert-icon-size: var(--ds-sizing-8);
-}

package/badge.css

@@ -1,147 +0,0 @@
-.ds-badge {
-  --dsc-badge-background: var(--ds-color-accent-base-default);
-  --dsc-badge-color: var(--ds-color-accent-contrast-default);
-  --dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2));
-  --dsc-badge-height: var(--ds-sizing-6);
-  --dsc-badge-width: 14px;
-
-  background-color: var(--dsc-badge-background);
-  color: var(--dsc-badge-color);
-  border-radius: var(--ds-border-radius-full);
-  display: grid;
-  place-items: center;
-  padding: var(--dsc-badge-padding);
-  height: var(--dsc-badge-height);
-  width: var(--dsc-badge-width);
-}
-
-.ds-badge__wrapper {
-  display: inline-flex;
-  position: relative;
-  width: fit-content;
-  height: fit-content;
-  flex-shrink: 0;
-  align-items: center;
-  justify-content: center;
-}
-
-.ds-badge--float {
-  transform-origin: center;
-  position: absolute;
-}
-
-.ds-badge--float.ds-badge--top-right__rectangle {
-  top: 0;
-  right: 0;
-  transform: translateX(50%) translateY(-50%);
-}
-
-.ds-badge--float.ds-badge--top-left__rectangle {
-  top: 0;
-  left: 0;
-  transform: translateX(-50%) translateY(-50%);
-}
-
-.ds-badge--float.ds-badge--bottom-right__rectangle {
-  bottom: 0;
-  right: 0;
-  transform: translateX(50%) translateY(50%);
-}
-
-.ds-badge--float.ds-badge--bottom-left__rectangle {
-  bottom: 0;
-  left: 0;
-  transform: translateX(-50%) translateY(50%);
-}
-
-.ds-badge--float.ds-badge--top-right__circle {
-  top: 14%;
-  right: 14%;
-  transform: translateX(50%) translateY(-50%);
-}
-
-.ds-badge--float.ds-badge--top-left__circle {
-  top: 14%;
-  left: 14%;
-  transform: translateX(-50%) translateY(-50%);
-}
-
-.ds-badge--float.ds-badge--bottom-right__circle {
-  bottom: 14%;
-  right: 14%;
-  transform: translateX(50%) translateY(50%);
-}
-
-.ds-badge--float.ds-badge--bottom-left__circle {
-  bottom: 14%;
-  left: 14%;
-  transform: translateX(-50%) translateY(50%);
-}
-
-.ds-bade--accent {
-  --dsc-badge-background: var(--ds-color-accent-base-default);
-  --dsc-badge-color: var(--ds-color-accent-contrast-default);
-}
-
-.ds-badge--info {
-  --dsc-badge-background: var(--ds-color-info-base-default);
-  --dsc-badge-color: var(--ds-color-info-contrast-default);
-}
-
-.ds-badge--success {
-  --dsc-badge-background: var(--ds-color-success-base-default);
-  --dsc-badge-color: var(--ds-color-success-contrast-default);
-}
-
-.ds-badge--warning {
-  --dsc-badge-background: var(--ds-color-warning-base-default);
-  --dsc-badge-color: var(--ds-color-warning-contrast-default);
-}
-
-.ds-badge--danger {
-  --dsc-badge-background: var(--ds-color-danger-base-default);
-  --dsc-badge-color: var(--ds-color-danger-contrast-default);
-}
-
-.ds-badge--neutral {
-  --dsc-badge-background: var(--ds-color-neutral-surface-default);
-  --dsc-badge-color: var(--ds-color-neutral-text-default);
-}
-
-.ds-badge--sm {
-  --dsc-badge-height: var(--ds-sizing-3);
-  --dsc-badge-width: var(--ds-sizing-3);
-
-  &.ds-badge--count {
-    --dsc-badge-height: var(--ds-sizing-5);
-    --dsc-badge-width: auto;
-    --dsc-badge-padding: 0 var(--ds-spacing-1);
-  }
-}
-
-.ds-badge--md {
-  --dsc-badge-height: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));
-  --dsc-badge-width: calc(var(--ds-sizing-3) + calc(var(--ds-spacing-1) / 2));
-
-  &.ds-badge--count {
-    --dsc-badge-height: var(--ds-sizing-6);
-    --dsc-badge-width: auto;
-    --dsc-badge-padding: 0 calc(var(--ds-spacing-1) + calc(var(--ds-spacing-1) / 2));
-  }
-}
-
-.ds-badge--lg {
-  --dsc-badge-height: var(--ds-sizing-4);
-  --dsc-badge-width: var(--ds-sizing-4);
-
-  &.ds-badge--count {
-    --dsc-badge-height: var(--ds-sizing-7);
-    --dsc-badge-width: auto;
-    --dsc-badge-padding: 0 var(--ds-spacing-2);
-  }
-}
-
-.ds-badge--count {
-  --dsc-badge-height: auto;
-  --dsc-badge-width: auto;
-}

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/breadcrumbs.css

@@ -1,72 +0,0 @@
-.ds-breadcrumbs {
-  --dsc-breadcrumbs-spacing: var(--ds-spacing-2);
-  --dsc-breadcrumbs-chevron-size: var(--ds-sizing-6);
-  --dsc-breadcrumbs-link-color: inherit;
-}
-
-.ds-breadcrumbs--sm {
-  --dsc-breadcrumbs-spacing: var(--ds-spacing-1);
-  --dsc-breadcrumbs-chevron-size: var(--ds-sizing-5);
-}
-
-.ds-breadcrumbs--md {
-  --dsc-breadcrumbs-spacing: var(--ds-spacing-2);
-  --dsc-breadcrumbs-chevron-size: var(--ds-sizing-6);
-}
-
-.ds-breadcrumbs--lg {
-  --dsc-breadcrumbs-spacing: var(--ds-spacing-3);
-  --dsc-breadcrumbs-chevron-size: var(--ds-sizing-7);
-}
-
-.ds-breadcrumbs__list {
-  display: flex;
-  flex-wrap: wrap;
-  list-style-type: none;
-  margin: 0;
-  padding: 0;
-  gap: var(--dsc-breadcrumbs-spacing) 0;
-}
-
-.ds-breadcrumbs__item:where(:not(:last-child))::after,
-.ds-breadcrumbs > .ds-breadcrumbs__link::before {
-  background: currentcolor;
-  content: '';
-  display: inline-block;
-  height: var(--dsc-breadcrumbs-chevron-size);
-  margin-inline: var(--dsc-breadcrumbs-spacing);
-  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24'%3E%3Cpath d='M9.47 5.97a.75.75 0 0 1 1.06 0l5.5 5.5a.75.75 0 0 1 0 1.06l-5.5 5.5a.75.75 0 1 1-1.06-1.06L14.44 12 9.47 7.03a.75.75 0 0 1 0-1.06'/%3E%3C/svg%3E")
-    50% / contain no-repeat;
-  vertical-align: middle;
-  width: var(--dsc-breadcrumbs-chevron-size);
-}
-
-/* When link is direct child of Breadcrumbs, make it back button */
-.ds-breadcrumbs > .ds-breadcrumbs__link::before {
-  margin: 0;
-  rotate: 180deg;
-}
-
-.ds-breadcrumbs__link {
-  --dsc-link-color: var(--dsc-breadcrumbs-link-color);
-  --dsc-link-color-visited: var(--dsc-breadcrumbs-link-color);
-}
-
-.ds-breadcrumbs__link[aria-current='page'] {
-  text-decoration: none;
-}
-
-.ds-breadcrumbs > .ds-breadcrumbs__link:where(:not(:only-child)) {
-  display: none;
-}
-
-@media (max-width: 650px) {
-  .ds-breadcrumbs > .ds-breadcrumbs__nav:where(:not(:only-child)) {
-    display: none;
-  }
-
-  .ds-breadcrumbs > .ds-breadcrumbs__link {
-    display: block;
-    width: fit-content;
-  }
-}