@digdir/designsystemet-css 0.0.0-next-20240724125515

package/README.md

@@ -0,0 +1,9 @@
+# @digdir/designsystemet-css
+
+CSS implementation of the Designsystemet
+
+- Styling for React components in `@digdir/designsystemet-react`
+
+_These styles are currently not intended to be used directly. They are auto-generated from css modules in react components and may change without notice_
+
+Read the Designsystemet [README](https://github.com/digdir/designsystemet) to get started.

package/accordion.css

@@ -0,0 +1,139 @@
+.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__header {
+  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__header {
+  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__header {
+  border-top: 1px solid var(--dsc-accordion-border-color);
+}
+
+.ds-accordion--border .ds-accordion__item:first-child .ds-accordion__header {
+  border-top: 0;
+}
+
+.ds-accordion--border .ds-accordion__item:first-of-type .ds-accordion__header: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__header: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__header:hover .ds-accordion__expand-icon {
+    background-color: var(--dsc-accordion-icon-background-hover);
+  }
+
+  .ds-accordion__item--open .ds-accordion__header: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

@@ -0,0 +1,69 @@
+.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/box.css

@@ -0,0 +1,71 @@
+.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/button.css

@@ -0,0 +1,201 @@
+.ds-btn {
+  --dsc-btn-padding: var(--ds-spacing-2) var(--ds-spacing-4);
+  --dsc-btn-primary-background: var(--ds-color-accent-base-default);
+  --dsc-btn-primary-hover-background: var(--ds-color-accent-base-hover);
+  --dsc-btn-primary-active-background: var(--ds-color-accent-base-active);
+  --dsc-btn-primary-hover-color: var(--ds-color-accent-contrast-default);
+  --dsc-btn-secondary-color: var(--ds-color-accent-text-default);
+  --dsc-btn-secondary-hover-color: var(--ds-color-accent-text-default);
+  --dsc-btn-secondary-active-color: var(--ds-color-accent-text-default);
+  --dsc-btn-secondary-border-color: var(--ds-color-accent-border-strong);
+  --dsc-btn-secondary-hover-background: var(--ds-color-accent-surface-hover);
+  --dsc-btn-secondary-active-background: var(--ds-color-accent-surface-hover);
+  --dsc-btn-tertiary-color: var(--ds-color-accent-text-default);
+  --dsc-btn-tertiary-hover-color: var(--ds-color-accent-text-default);
+  --dsc-btn-tertiary-active-color: var(--ds-color-accent-text-default);
+  --dsc-btn-tertiary-hover-background: var(--ds-color-accent-surface-hover);
+  --dsc-btn-tertiary-active-background: var(--ds-color-accent-surface-hover);
+
+  display: flex;
+  align-items: center;
+  border: var(--ds-border-width-default) solid transparent;
+  background-color: var(--dsc-btn-primary-background);
+  color: var(--dsc-btn-primary-color);
+  min-width: 2.5em;
+  padding: var(--dsc-btn-padding);
+  box-sizing: border-box;
+  cursor: pointer;
+  font-family: inherit;
+  justify-content: center;
+  text-align: center;
+  text-decoration: none;
+  position: relative;
+  border-radius: var(--ds-border-radius-md);
+  min-height: var(--ds-sizing-10);
+}
+
+.ds-btn svg {
+  overflow: visible;
+}
+
+.ds-btn:disabled,
+.ds-btn[aria-disabled='true'] {
+  cursor: not-allowed;
+  opacity: var(--ds-disabled-opacity);
+}
+
+.ds-btn--sm {
+  --dsc-btn-padding: var(--ds-spacing-2) var(--ds-spacing-3);
+
+  gap: var(--ds-sizing-1);
+  min-height: var(--ds-sizing-10);
+}
+
+.ds-btn--sm::before {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: auto;
+  min-height: auto;
+  content: '';
+}
+
+.ds-btn--sm::after {
+  position: absolute;
+  top: -5px;
+  left: 0;
+  width: 100%;
+  height: 44px;
+  content: '';
+}
+
+.ds-btn--md {
+  --dsc-btn-padding: var(--ds-spacing-2) var(--ds-spacing-4);
+
+  gap: var(--ds-sizing-2);
+  min-height: var(--ds-sizing-12);
+}
+
+.ds-btn--lg {
+  --dsc-btn-padding: var(--ds-spacing-3) var(--ds-spacing-5);
+
+  gap: var(--ds-sizing-2);
+  min-height: var(--ds-sizing-14);
+}
+
+.ds-btn--full-width {
+  width: 100%;
+}
+
+.ds-btn--secondary,
+.ds-btn--tertiary {
+  background-color: transparent;
+}
+
+.ds-btn--icon-only {
+  --dsc-btn-padding: 0;
+}
+
+/* Only use hover for non-touch devices to prevent sticky-hovering */
+@media (hover: hover) and (pointer: fine) {
+  .ds-btn--primary:not([aria-disabled='true'], :disabled):hover {
+    background-color: var(--dsc-btn-primary-hover-background);
+  }
+
+  .ds-btn--secondary:not([aria-disabled='true'], :disabled):hover {
+    color: var(--dsc-btn-secondary-hover-color);
+    border-color: var(--dsc-btn-secondary-border-color);
+    background-color: var(--dsc-btn-secondary-hover-background);
+  }
+
+  .ds-btn--tertiary:not([aria-disabled='true'], :disabled):hover {
+    color: var(--dsc-btn-tertiary-hover-color);
+    background-color: var(--dsc-btn-tertiary-hover-background);
+  }
+}
+
+/* Primary button colors */
+.ds-btn--primary {
+  background-color: var(--dsc-btn-primary-background);
+}
+
+.ds-btn--primary:not([aria-disabled='true'], :disabled):active {
+  background-color: var(--dsc-btn-primary-active-background);
+}
+
+/* Secondary button colors */
+.ds-btn--secondary {
+  color: var(--dsc-btn-secondary-color);
+  border-color: var(--dsc-btn-secondary-border-color);
+  background-color: transparent;
+}
+
+.ds-btn--secondary:not([aria-disabled='true'], :disabled):active {
+  color: var(--dsc-btn-secondary-active-color);
+  border-color: var(--dsc-btn-secondary-border-color);
+  background-color: var(--dsc-btn-secondary-active-background);
+}
+
+/* Tertiary button colors */
+.ds-btn--tertiary {
+  color: var(--dsc-btn-tertiary-color);
+}
+
+.ds-btn--tertiary:not([aria-disabled='true'], :disabled):active {
+  color: var(--dsc-btn-tertiary-active-color);
+  background-color: var(--dsc-btn-tertiary-active-background);
+}
+
+.ds-btn--accent {
+  --dsc-btn-primary-background: var(--ds-color-accent-base-default);
+  --dsc-btn-primary-color: var(--ds-color-accent-contrast-default);
+  --dsc-btn-primary-hover-background: var(--ds-color-accent-base-hover);
+  --dsc-btn-primary-active-background: var(--ds-color-accent-base-active);
+  --dsc-btn-secondary-color: var(--ds-color-accent-text-subtle);
+  --dsc-btn-secondary-hover-color: var(--ds-color-accent-text-default);
+  --dsc-btn-secondary-active-color: var(--ds-color-accent-text-default);
+  --dsc-btn-secondary-border-color: var(--ds-color-accent-border-strong);
+  --dsc-btn-secondary-hover-background: var(--ds-color-accent-surface-default);
+  --dsc-btn-secondary-active-background: var(--ds-color-accent-surface-hover);
+  --dsc-btn-tertiary-color: var(--ds-color-accent-text-subtle);
+  --dsc-btn-tertiary-hover-color: var(--ds-color-accent-text-default);
+  --dsc-btn-tertiary-active-color: var(--ds-color-accent-text-default);
+  --dsc-btn-tertiary-hover-background: var(--ds-color-accent-surface-default);
+  --dsc-btn-tertiary-active-background: var(--ds-color-accent-surface-hover);
+}
+
+.ds-btn--neutral {
+  --dsc-btn-primary-background: var(--ds-color-neutral-base-default);
+  --dsc-btn-primary-color: var(--ds-color-neutral-contrast-default);
+  --dsc-btn-primary-hover-background: var(--ds-color-neutral-base-hover);
+  --dsc-btn-primary-active-background: var(--ds-color-neutral-base-active);
+  --dsc-btn-secondary-color: var(--ds-color-neutral-text-subtle);
+  --dsc-btn-secondary-hover-color: var(--ds-color-neutral-text-default);
+  --dsc-btn-secondary-active-color: var(--ds-color-neutral-text-default);
+  --dsc-btn-secondary-border-color: var(--ds-color-neutral-border-strong);
+  --dsc-btn-secondary-hover-background: var(--ds-color-neutral-surface-default);
+  --dsc-btn-secondary-active-background: var(--ds-color-neutral-surface-hover);
+  --dsc-btn-tertiary-color: var(--ds-color-neutral-text-subtle);
+  --dsc-btn-tertiary-hover-color: var(--ds-color-neutral-text-default);
+  --dsc-btn-tertiary-active-color: var(--ds-color-neutral-text-default);
+  --dsc-btn-tertiary-hover-background: var(--ds-color-neutral-surface-default);
+  --dsc-btn-tertiary-active-background: var(--ds-color-neutral-surface-hover);
+}
+
+.ds-btn--danger {
+  --dsc-btn-primary-background: var(--ds-color-danger-base-default);
+  --dsc-btn-primary-color: var(--ds-color-danger-contrast-default);
+  --dsc-btn-primary-hover-background: var(--ds-color-danger-base-hover);
+  --dsc-btn-primary-active-background: var(--ds-color-danger-base-active);
+  --dsc-btn-secondary-color: var(--ds-color-danger-text-subtle);
+  --dsc-btn-secondary-hover-color: var(--ds-color-danger-text-default);
+  --dsc-btn-secondary-active-color: var(--ds-color-danger-text-default);
+  --dsc-btn-secondary-border-color: var(--ds-color-danger-border-strong);
+  --dsc-btn-secondary-hover-background: var(--ds-color-danger-surface-default);
+  --dsc-btn-secondary-active-background: var(--ds-color-danger-surface-hover);
+  --dsc-btn-tertiary-color: var(--ds-color-danger-text-subtle);
+  --dsc-btn-tertiary-hover-color: var(--ds-color-danger-text-default);
+  --dsc-btn-tertiary-active-color: var(--ds-color-danger-text-default);
+  --dsc-btn-tertiary-hover-background: var(--ds-color-danger-surface-default);
+  --dsc-btn-tertiary-active-background: var(--ds-color-danger-surface-hover);
+}

package/card.css

@@ -0,0 +1,190 @@
+.ds-card {
+  --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
+  --dsc-card-backround: var(--ds-color-neutral-surface-default);
+  --dsc-card-color: var(--ds-color-neutral-text-default);
+
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+  position: relative;
+  overflow: hidden;
+  color: var(--dsc-card-color);
+  border-radius: min(1rem, var(--ds-border-radius-md));
+  border: 1px solid var(--dsc-card-border-color);
+  background: var(--dsc-card-backround);
+}
+
+.ds-card a,
+.ds-card a:visited {
+  color: var(--ds-color-neutral-text-default);
+}
+
+.ds-card > hr {
+  width: 100%;
+  margin: var(--ds-spacing-3) 0;
+}
+
+.ds-card__media {
+  width: auto;
+}
+
+.ds-card__media > * {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  border: 0;
+}
+
+.ds-card > *:not(.ds-card__media, hr) {
+  padding-left: var(--ds-spacing-6);
+  padding-right: var(--ds-spacing-6);
+}
+
+.ds-card > *:not(.ds-card__media):first-child {
+  padding-top: var(--ds-spacing-6);
+}
+
+.ds-card > *:not(.ds-card__media):last-child {
+  padding-bottom: var(--ds-spacing-6);
+}
+
+.ds-card__media:first-child {
+  padding-bottom: var(--ds-spacing-4);
+}
+
+.ds-card__media:last-child {
+  padding-top: var(--ds-spacing-6);
+}
+
+.ds-card--link {
+  --dsc-card-border-color: var(--ds-color-neutral-border-default);
+
+  text-decoration: none;
+}
+
+.ds-card__footer,
+.ds-card__content {
+  display: flex;
+  justify-content: flex-start;
+  gap: var(--ds-spacing-4);
+  flex-wrap: wrap;
+  word-wrap: break-word;
+  padding: var(--ds-spacing-2) 0;
+  color: inherit;
+}
+
+.ds-card__content {
+  flex-direction: column;
+}
+
+.ds-card__header {
+  display: flex;
+  flex-direction: column;
+  flex-wrap: wrap;
+  word-wrap: break-word;
+  font-family: inherit;
+  padding: var(--ds-spacing-2) 0;
+}
+
+.ds-card__header h1,
+.ds-card__header h2,
+.ds-card__header h3,
+.ds-card__header h4,
+.ds-card__header h5,
+.ds-card__header h6 {
+  color: inherit;
+}
+
+.ds-card--link h1,
+.ds-card--link h2,
+.ds-card--link h3,
+.ds-card--link h4,
+.ds-card--link h5,
+.ds-card--link h6 {
+  text-decoration: underline;
+  text-decoration-thickness: max(1px, 0.0625rem, 0.1025em);
+  text-underline-offset: max(6px, 0.25rem, 0.22em);
+}
+
+.ds-card--neutral {
+  --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
+  --dsc-card-backround: var(--ds-color-neutral-background-default);
+}
+
+.ds-card--neutral.ds-card--link:hover {
+  --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
+  --dsc-card-backround: var(--ds-color-neutral-background-subtle);
+}
+
+.ds-card--neutral.ds-card--link:active {
+  --dsc-card-backround: var(--ds-color-neutral-surface-default);
+}
+
+.ds-card--subtle {
+  --dsc-card-border-color: var(--ds-color-neutral-border-subtle);
+  --dsc-card-backround: var(--ds-color-neutral-background-subtle);
+}
+
+.ds-card--subtle.ds-card--link:hover {
+  --dsc-card-border-color: var(--ds-color-neutral-border-default);
+  --dsc-card-backround: var(--ds-color-neutral-surface-default);
+}
+
+.ds-card--subtle.ds-card--link:active {
+  --dsc-card-backround: var(--ds-color-neutral-surface-hover);
+}
+
+.ds-card--brand1 {
+  --dsc-card-border-color: var(--ds-color-brand1-border-subtle);
+  --dsc-card-backround: var(--ds-color-brand1-surface-default);
+  --dsc-card-color: var(--ds-color-brand1-text-default);
+}
+
+.ds-card--brand1.ds-card--link {
+  --dsc-card-border-color: var(--ds-color-brand1-border-default);
+}
+
+.ds-card--brand1.ds-card--link:hover {
+  --dsc-card-backround: var(--ds-color-brand1-surface-hover);
+}
+
+.ds-card--brand1.ds-card--link:active {
+  --dsc-card-backround: var(--ds-color-brand1-surface-active);
+}
+
+.ds-card--brand2 {
+  --dsc-card-border-color: var(--ds-color-brand2-border-subtle);
+  --dsc-card-backround: var(--ds-color-brand2-surface-default);
+  --dsc-card-color: var(--ds-color-brand2-text-default);
+}
+
+.ds-card--brand2.ds-card--link {
+  --dsc-card-border-color: var(--ds-color-brand2-border-default);
+}
+
+.ds-card--brand2.ds-card--link:hover {
+  --dsc-card-backround: var(--ds-color-brand2-surface-hover);
+}
+
+.ds-card--brand2.ds-card--link:active {
+  --dsc-card-backround: var(--ds-color-brand2-surface-active);
+}
+
+.ds-card--brand3 {
+  --dsc-card-border-color: var(--ds-color-brand3-border-subtle);
+  --dsc-card-backround: var(--ds-color-brand3-surface-default);
+  --dsc-card-color: var(--ds-color-brand3-text-default);
+}
+
+.ds-card--brand3.ds-card--link {
+  --dsc-card-border-color: var(--ds-color-brand3-border-default);
+}
+
+.ds-card--brand3.ds-card--link:hover {
+  --dsc-card-backround: var(--ds-color-brand3-surface-hover);
+}
+
+.ds-card--brand3.ds-card--link:active {
+  --dsc-card-backround: var(--ds-color-brand3-surface-active);
+}