npm - @central-design-system/components - Versions diffs - 3.0.0-beta.5 → 3.0.0-beta.6 - Mend

@central-design-system/components 3.0.0-beta.5 → 3.0.0-beta.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (35) hide show

package/dist/cds.css +1 -1
package/dist/cds.es.js +1313 -1300
package/dist/cds.umd.js +2 -2
package/dist/components/CdsBadge/CdsBadge.vue.d.ts +17 -2
package/dist/components/CdsExpandablePanel/CdsExpandablePanels.vue.d.ts +1 -1
package/dist/components/CdsNotification/CdsNotificationAlert.vue.d.ts +1 -1
package/package.json +1 -1
package/src/scss/themes/b2b/tokens.json +104 -104
package/src/scss/themes/cds/tokens.json +104 -104
package/src/scss/themes/index.ts +1 -1
package/src/scss/utility/display.scss +56 -5
package/src/scss/utility/flexbox.scss +26 -28
package/src/scss/utility/index.scss +0 -2
package/src/scss/utility/layout.scss +65 -3
package/src/scss/utility/spacing.scss +46 -86
package/src/scss/utility/variables/display.scss +11 -0
package/src/scss/utility/variables/exports/_display.scss +7 -0
package/src/scss/utility/variables/exports/_flex.scss +13 -0
package/src/scss/utility/variables/exports/_overflow.scss +7 -0
package/src/scss/utility/variables/exports/_position.scss +7 -0
package/src/scss/utility/variables/exports/_spacing.scss +14 -0
package/src/scss/utility/variables/exports/_visibility.scss +7 -0
package/src/scss/utility/variables/exports/_widthHeight.scss +7 -0
package/src/scss/utility/variables/flex.scss +99 -0
package/src/scss/utility/variables/index.scss +11 -0
package/src/scss/utility/variables/overflow.scss +6 -0
package/src/scss/utility/variables/position.scss +7 -0
package/src/scss/utility/variables/spacing.scss +37 -0
package/src/scss/utility/variables/visibility.scss +5 -0
package/src/scss/utility/variables/widthHeight.scss +69 -0
package/dist/components/CdsTable/composable/scroll.d.ts +0 -4607
package/src/scss/utility/generatedFiles/generatedStyles.json +0 -1
package/src/scss/utility/generatedFiles/generatedStyles.scss +0 -300
package/src/scss/utility/typography.scss +0 -16
package/src/scss/utility/variables.scss +0 -116

package/src/scss/utility/generatedFiles/generatedStyles.json DELETED Viewed

@@ -1 +0,0 @@

- ".cds-border-radius-s { border-radius: var(--cds-border-radius-s) !important; }/.cds-border-radius-m { border-radius: var(--cds-border-radius-m) !important; }/.cds-border-radius-l { border-radius: var(--cds-border-radius-l) !important; }/.cds-color-background-page-primary { background-color: var(--cds-color-background-page-primary) !important; }/.cds-color-background-page-secondary { background-color: var(--cds-color-background-page-secondary) !important; }/.cds-color-background-container-primary { background-color: var(--cds-color-background-container-primary) !important; }/.cds-color-background-container-secondary { background-color: var(--cds-color-background-container-secondary) !important; }/.cds-color-background-field-primary { background-color: var(--cds-color-background-field-primary) !important; }/.cds-color-background-field-secondary { background-color: var(--cds-color-background-field-secondary) !important; }/.cds-color-background-element-primary { background-color: var(--cds-color-background-element-primary) !important; }/.cds-color-background-inverse { background-color: var(--cds-color-background-inverse) !important; }/.cds-color-border-element-primary { border-color: var(--cds-color-border-element-primary) !important; }/.cds-color-border-element-secondary { border-color: var(--cds-color-border-element-secondary) !important; }/.cds-color-disabled-01 { color: var(--cds-color-disabled-01) !important; }/.cds-color-disabled-02 { color: var(--cds-color-disabled-02) !important; }/.cds-color-feedback-error-10 { color: var(--cds-color-feedback-error-10) !important; }/.cds-color-feedback-error-20 { color: var(--cds-color-feedback-error-20) !important; }/.cds-color-feedback-error-100 { color: var(--cds-color-feedback-error-100) !important; }/.cds-color-feedback-warning-10 { color: var(--cds-color-feedback-warning-10) !important; }/.cds-color-feedback-warning-20 { color: var(--cds-color-feedback-warning-20) !important; }/.cds-color-feedback-warning-100 { color: var(--cds-color-feedback-warning-100) !important; }/.cds-color-feedback-success-10 { color: var(--cds-color-feedback-success-10) !important; }/.cds-color-feedback-success-20 { color: var(--cds-color-feedback-success-20) !important; }/.cds-color-feedback-success-100 { color: var(--cds-color-feedback-success-100) !important; }/.cds-color-feedback-info-10 { color: var(--cds-color-feedback-info-10) !important; }/.cds-color-feedback-info-20 { color: var(--cds-color-feedback-info-20) !important; }/.cds-color-feedback-info-100 { color: var(--cds-color-feedback-info-100) !important; }/.cds-color-feedback-progress-10 { color: var(--cds-color-feedback-progress-10) !important; }/.cds-color-feedback-progress-20 { color: var(--cds-color-feedback-progress-20) !important; }/.cds-color-feedback-progress-100 { color: var(--cds-color-feedback-progress-100) !important; }/.cds-color-icon-default { color: var(--cds-color-icon-default) !important; }/.cds-color-icon-inverse { color: var(--cds-color-icon-inverse) !important; }/.cds-color-interactive-01 { color: var(--cds-color-interactive-01-default) !important; }/.cds-color-interactive-01:hover { color: var(--cds-color-interactive-01-hover) !important; }/.cds-color-interactive-01:focus { color: var(--cds-color-interactive-01-focus) !important; }/.cds-color-interactive-01:active { color: var(--cds-color-interactive-01-active) !important; }/.cds-color-interactive-01:above { color: var(--cds-color-interactive-01-above) !important; }/.cds-color-interactive-02 { color: var(--cds-color-interactive-02-default) !important; }/.cds-color-interactive-02:hover { color: var(--cds-color-interactive-02-hover) !important; }/.cds-color-interactive-02:focus { color: var(--cds-color-interactive-02-focus) !important; }/.cds-color-interactive-02:active { color: var(--cds-color-interactive-02-active) !important; }/.cds-color-interactive-02:above { color: var(--cds-color-interactive-02-above) !important; }/.cds-color-link-default { color: var(--cds-color-link-default) !important; }/.cds-color-link-visited { color: var(--cds-color-link-visited) !important; }/.cds-color-neutral-0 { color: var(--cds-color-neutral-0) !important; }/.cds-color-neutral-4 { color: var(--cds-color-neutral-4) !important; }/.cds-color-neutral-8 { color: var(--cds-color-neutral-8) !important; }/.cds-color-neutral-10 { color: var(--cds-color-neutral-10) !important; }/.cds-color-neutral-15 { color: var(--cds-color-neutral-15) !important; }/.cds-color-neutral-25 { color: var(--cds-color-neutral-25) !important; }/.cds-color-neutral-40 { color: var(--cds-color-neutral-40) !important; }/.cds-color-neutral-48 { color: var(--cds-color-neutral-48) !important; }/.cds-color-neutral-66 { color: var(--cds-color-neutral-66) !important; }/.cds-color-neutral-100 { color: var(--cds-color-neutral-100) !important; }/.cds-color-overlay-01 { color: var(--cds-color-overlay-01) !important; }/.cds-color-overlay-02 { color: var(--cds-color-overlay-02) !important; }/.cds-color-text-primary { color: var(--cds-color-text-primary) !important; }/.cds-color-text-secondary { color: var(--cds-color-text-secondary) !important; }/.cds-color-text-description { color: var(--cds-color-text-description) !important; }/.cds-color-text-label { color: var(--cds-color-text-label) !important; }/.cds-color-text-placeholder { color: var(--cds-color-text-placeholder) !important; }/.cds-color-text-inverse { color: var(--cds-color-text-inverse) !important; }/.cds-font-family-size { font-size: var(--cds-font-family-size) !important; }/.cds-font-body-size-xs { font-size: var(--cds-font-body-size-xs) !important; }/.cds-font-body-size-s { font-size: var(--cds-font-body-size-s) !important; }/.cds-font-body-size-m { font-size: var(--cds-font-body-size-m) !important; }/.cds-font-body-size-l { font-size: var(--cds-font-body-size-l) !important; }/.cds-font-heading-1 { font-size: var(--cds-font-heading-1) !important; }/.cds-font-heading-2 { font-size: var(--cds-font-heading-2) !important; }/.cds-font-heading-3 { font-size: var(--cds-font-heading-3) !important; }/.cds-font-heading-4 { font-size: var(--cds-font-heading-4) !important; }/.cds-font-heading-5 { font-size: var(--cds-font-heading-5) !important; }/.cds-font-heading-6 { font-size: var(--cds-font-heading-6) !important; }/.cds-font-heading-eyebrow { font-size: var(--cds-font-heading-eyebrow) !important; }/.cds-font-display-1 { font-size: var(--cds-font-display-1) !important; }/.cds-font-display-2 { font-size: var(--cds-font-display-2) !important; }/.cds-font-weight-bold { font-weight: var(--cds-font-weight-bold) !important; }/.cds-font-weight-semi-bold { font-weight: var(--cds-font-weight-semi-bold) !important; }/.cds-font-weight-normal { font-weight: var(--cds-font-weight-normal) !important; }/.cds-font-weight-light { font-weight: var(--cds-font-weight-light) !important; }/.cds-font-height-body { line-height: var(--cds-font-height-body) !important; }/.cds-font-height-heading { line-height: var(--cds-font-height-heading) !important; }/.cds-font-height-display { line-height: var(--cds-font-height-display) !important; }/.cds-font-height-helper { line-height: var(--cds-font-height-helper) !important; }/.cds-font-margin-heading-1 { margin: var(--cds-font-margin-heading-1) !important; }/.cds-font-margin-heading-2 { margin: var(--cds-font-margin-heading-2) !important; }/.cds-font-margin-heading-3 { margin: var(--cds-font-margin-heading-3) !important; }/.cds-font-margin-heading-4 { margin: var(--cds-font-margin-heading-4) !important; }/.cds-font-margin-heading-5 { margin: var(--cds-font-margin-heading-5) !important; }/.cds-font-margin-heading-6 { margin: var(--cds-font-margin-heading-6) !important; }/.cds-font-margin-display-1 { margin: var(--cds-font-margin-display-1) !important; }/.cds-font-margin-display-2 { margin: var(--cds-font-margin-display-2) !important; }/.cds-font-margin-s { margin: var(--cds-font-margin-s) !important; }/.cds-box-shadow-header { box-shadow: var(--cds-box-shadow-header) !important; }/.cds-box-shadow-footer { box-shadow: var(--cds-box-shadow-footer) !important; }/.cds-box-shadow-sidebar-left { box-shadow: var(--cds-box-shadow-sidebar-left) !important; }/.cds-box-shadow-sidebar-right { box-shadow: var(--cds-box-shadow-sidebar-right) !important; }/.cds-box-shadow-menu { box-shadow: var(--cds-box-shadow-menu) !important; }/.cds-box-shadow-modal { box-shadow: var(--cds-box-shadow-modal) !important; }/.cds-box-shadow-notification { box-shadow: var(--cds-box-shadow-notification) !important; }"

package/src/scss/utility/generatedFiles/generatedStyles.scss DELETED Viewed

@@ -1,300 +0,0 @@
-.cds-border-radius-s {
-  border-radius: var(--cds-border-radius-s) !important;
-}
-.cds-border-radius-m {
-  border-radius: var(--cds-border-radius-m) !important;
-}
-.cds-border-radius-l {
-  border-radius: var(--cds-border-radius-l) !important;
-}
-.cds-color-background-page-primary {
-  background-color: var(--cds-color-background-page-primary) !important;
-}
-.cds-color-background-page-secondary {
-  background-color: var(--cds-color-background-page-secondary) !important;
-}
-.cds-color-background-container-primary {
-  background-color: var(--cds-color-background-container-primary) !important;
-}
-.cds-color-background-container-secondary {
-  background-color: var(--cds-color-background-container-secondary) !important;
-}
-.cds-color-background-field-primary {
-  background-color: var(--cds-color-background-field-primary) !important;
-}
-.cds-color-background-field-secondary {
-  background-color: var(--cds-color-background-field-secondary) !important;
-}
-.cds-color-background-element-primary {
-  background-color: var(--cds-color-background-element-primary) !important;
-}
-.cds-color-background-inverse {
-  background-color: var(--cds-color-background-inverse) !important;
-}
-.cds-color-border-element-primary {
-  border-color: var(--cds-color-border-element-primary) !important;
-}
-.cds-color-border-element-secondary {
-  border-color: var(--cds-color-border-element-secondary) !important;
-}
-.cds-color-disabled-01 {
-  color: var(--cds-color-disabled-01) !important;
-}
-.cds-color-disabled-02 {
-  color: var(--cds-color-disabled-02) !important;
-}
-.cds-color-feedback-error-10 {
-  color: var(--cds-color-feedback-error-10) !important;
-}
-.cds-color-feedback-error-20 {
-  color: var(--cds-color-feedback-error-20) !important;
-}
-.cds-color-feedback-error-100 {
-  color: var(--cds-color-feedback-error-100) !important;
-}
-.cds-color-feedback-warning-10 {
-  color: var(--cds-color-feedback-warning-10) !important;
-}
-.cds-color-feedback-warning-20 {
-  color: var(--cds-color-feedback-warning-20) !important;
-}
-.cds-color-feedback-warning-100 {
-  color: var(--cds-color-feedback-warning-100) !important;
-}
-.cds-color-feedback-success-10 {
-  color: var(--cds-color-feedback-success-10) !important;
-}
-.cds-color-feedback-success-20 {
-  color: var(--cds-color-feedback-success-20) !important;
-}
-.cds-color-feedback-success-100 {
-  color: var(--cds-color-feedback-success-100) !important;
-}
-.cds-color-feedback-info-10 {
-  color: var(--cds-color-feedback-info-10) !important;
-}
-.cds-color-feedback-info-20 {
-  color: var(--cds-color-feedback-info-20) !important;
-}
-.cds-color-feedback-info-100 {
-  color: var(--cds-color-feedback-info-100) !important;
-}
-.cds-color-feedback-progress-10 {
-  color: var(--cds-color-feedback-progress-10) !important;
-}
-.cds-color-feedback-progress-20 {
-  color: var(--cds-color-feedback-progress-20) !important;
-}
-.cds-color-feedback-progress-100 {
-  color: var(--cds-color-feedback-progress-100) !important;
-}
-.cds-color-icon-default {
-  color: var(--cds-color-icon-default) !important;
-}
-.cds-color-icon-inverse {
-  color: var(--cds-color-icon-inverse) !important;
-}
-.cds-color-interactive-01 {
-  color: var(--cds-color-interactive-01-default) !important;
-}
-.cds-color-interactive-01:hover {
-  color: var(--cds-color-interactive-01-hover) !important;
-}
-.cds-color-interactive-01:focus {
-  color: var(--cds-color-interactive-01-focus) !important;
-}
-.cds-color-interactive-01:active {
-  color: var(--cds-color-interactive-01-active) !important;
-}
-.cds-color-interactive-01:above {
-  color: var(--cds-color-interactive-01-above) !important;
-}
-.cds-color-interactive-02 {
-  color: var(--cds-color-interactive-02-default) !important;
-}
-.cds-color-interactive-02:hover {
-  color: var(--cds-color-interactive-02-hover) !important;
-}
-.cds-color-interactive-02:focus {
-  color: var(--cds-color-interactive-02-focus) !important;
-}
-.cds-color-interactive-02:active {
-  color: var(--cds-color-interactive-02-active) !important;
-}
-.cds-color-interactive-02:above {
-  color: var(--cds-color-interactive-02-above) !important;
-}
-.cds-color-link-default {
-  color: var(--cds-color-link-default) !important;
-}
-.cds-color-link-visited {
-  color: var(--cds-color-link-visited) !important;
-}
-.cds-color-neutral-0 {
-  color: var(--cds-color-neutral-0) !important;
-}
-.cds-color-neutral-4 {
-  color: var(--cds-color-neutral-4) !important;
-}
-.cds-color-neutral-8 {
-  color: var(--cds-color-neutral-8) !important;
-}
-.cds-color-neutral-10 {
-  color: var(--cds-color-neutral-10) !important;
-}
-.cds-color-neutral-15 {
-  color: var(--cds-color-neutral-15) !important;
-}
-.cds-color-neutral-25 {
-  color: var(--cds-color-neutral-25) !important;
-}
-.cds-color-neutral-40 {
-  color: var(--cds-color-neutral-40) !important;
-}
-.cds-color-neutral-48 {
-  color: var(--cds-color-neutral-48) !important;
-}
-.cds-color-neutral-66 {
-  color: var(--cds-color-neutral-66) !important;
-}
-.cds-color-neutral-100 {
-  color: var(--cds-color-neutral-100) !important;
-}
-.cds-color-overlay-01 {
-  color: var(--cds-color-overlay-01) !important;
-}
-.cds-color-overlay-02 {
-  color: var(--cds-color-overlay-02) !important;
-}
-.cds-color-text-primary {
-  color: var(--cds-color-text-primary) !important;
-}
-.cds-color-text-secondary {
-  color: var(--cds-color-text-secondary) !important;
-}
-.cds-color-text-description {
-  color: var(--cds-color-text-description) !important;
-}
-.cds-color-text-label {
-  color: var(--cds-color-text-label) !important;
-}
-.cds-color-text-placeholder {
-  color: var(--cds-color-text-placeholder) !important;
-}
-.cds-color-text-inverse {
-  color: var(--cds-color-text-inverse) !important;
-}
-.cds-font-family-size {
-  font-size: var(--cds-font-family-size) !important;
-}
-.cds-font-body-size-xs {
-  font-size: var(--cds-font-body-size-xs) !important;
-}
-.cds-font-body-size-s {
-  font-size: var(--cds-font-body-size-s) !important;
-}
-.cds-font-body-size-m {
-  font-size: var(--cds-font-body-size-m) !important;
-}
-.cds-font-body-size-l {
-  font-size: var(--cds-font-body-size-l) !important;
-}
-.cds-font-heading-1 {
-  font-size: var(--cds-font-heading-1) !important;
-}
-.cds-font-heading-2 {
-  font-size: var(--cds-font-heading-2) !important;
-}
-.cds-font-heading-3 {
-  font-size: var(--cds-font-heading-3) !important;
-}
-.cds-font-heading-4 {
-  font-size: var(--cds-font-heading-4) !important;
-}
-.cds-font-heading-5 {
-  font-size: var(--cds-font-heading-5) !important;
-}
-.cds-font-heading-6 {
-  font-size: var(--cds-font-heading-6) !important;
-}
-.cds-font-heading-eyebrow {
-  font-size: var(--cds-font-heading-eyebrow) !important;
-}
-.cds-font-display-1 {
-  font-size: var(--cds-font-display-1) !important;
-}
-.cds-font-display-2 {
-  font-size: var(--cds-font-display-2) !important;
-}
-.cds-font-weight-bold {
-  font-weight: var(--cds-font-weight-bold) !important;
-}
-.cds-font-weight-semi-bold {
-  font-weight: var(--cds-font-weight-semi-bold) !important;
-}
-.cds-font-weight-normal {
-  font-weight: var(--cds-font-weight-normal) !important;
-}
-.cds-font-weight-light {
-  font-weight: var(--cds-font-weight-light) !important;
-}
-.cds-font-height-body {
-  line-height: var(--cds-font-height-body) !important;
-}
-.cds-font-height-heading {
-  line-height: var(--cds-font-height-heading) !important;
-}
-.cds-font-height-display {
-  line-height: var(--cds-font-height-display) !important;
-}
-.cds-font-height-helper {
-  line-height: var(--cds-font-height-helper) !important;
-}
-.cds-font-margin-heading-1 {
-  margin: var(--cds-font-margin-heading-1) !important;
-}
-.cds-font-margin-heading-2 {
-  margin: var(--cds-font-margin-heading-2) !important;
-}
-.cds-font-margin-heading-3 {
-  margin: var(--cds-font-margin-heading-3) !important;
-}
-.cds-font-margin-heading-4 {
-  margin: var(--cds-font-margin-heading-4) !important;
-}
-.cds-font-margin-heading-5 {
-  margin: var(--cds-font-margin-heading-5) !important;
-}
-.cds-font-margin-heading-6 {
-  margin: var(--cds-font-margin-heading-6) !important;
-}
-.cds-font-margin-display-1 {
-  margin: var(--cds-font-margin-display-1) !important;
-}
-.cds-font-margin-display-2 {
-  margin: var(--cds-font-margin-display-2) !important;
-}
-.cds-font-margin-s {
-  margin: var(--cds-font-margin-s) !important;
-}
-.cds-box-shadow-header {
-  box-shadow: var(--cds-box-shadow-header) !important;
-}
-.cds-box-shadow-footer {
-  box-shadow: var(--cds-box-shadow-footer) !important;
-}
-.cds-box-shadow-sidebar-left {
-  box-shadow: var(--cds-box-shadow-sidebar-left) !important;
-}
-.cds-box-shadow-sidebar-right {
-  box-shadow: var(--cds-box-shadow-sidebar-right) !important;
-}
-.cds-box-shadow-menu {
-  box-shadow: var(--cds-box-shadow-menu) !important;
-}
-.cds-box-shadow-modal {
-  box-shadow: var(--cds-box-shadow-modal) !important;
-}
-.cds-box-shadow-notification {
-  box-shadow: var(--cds-box-shadow-notification) !important;
-}

package/src/scss/utility/typography.scss DELETED Viewed

@@ -1,16 +0,0 @@
-@import "variables";
-@each $type, $value in $typography {
-  .cds-text-#{$type} {
-    @each $name, $val in $value {
-      @if $name == 'size' {
-        font-size: $val !important;
-      } @else if $name == 'height' {
-        line-height: $val !important;
-      } @else if $name == 'weight' {
-        font-weight: $val !important;
-      }
-    }
-    font-family: var(--cds-font-family-sans) !important;
-  }
-}

package/src/scss/utility/variables.scss DELETED Viewed

@@ -1,116 +0,0 @@
-@import "../mixins/layout/spacing";
-@import "../mixins/layout/layout";
-@import "../mixins/layout/spacing";
-@import "../mixins/typo";
-$xs: ('size': var(--cds-font-body-size-xs), 'height': var(--cds-font-height-body), 'weight': var(--cds-font-weight-light));
-$sm: ('size': var(--cds-font-body-size-s), 'height': var(--cds-font-height-body), 'weight': var(--cds-font-weight-light));
-$md: ('size': var(--cds-font-body-size-m), 'height': var(--cds-font-height-body), 'weight': var(--cds-font-weight-light));
-$lg: ('size': var(--cds-font-body-size-l), 'height': var(--cds-font-height-body), 'weight': var(--cds-font-weight-normal));
-$h1: ('size': var(--cds-font-heading-1), 'height': var(--cds-font-height-heading), 'weight': var(--cds-font-weight-light));
-$h2: ('size': var(--cds-font-heading-2), 'height': var(--cds-font-height-heading), 'weight': var(--cds-font-weight-light));
-$h3: ('size': var(--cds-font-heading-3), 'height': var(--cds-font-height-heading), 'weight': var(--cds-font-weight-light));
-$h4: ('size': var(--cds-font-heading-4), 'height': var(--cds-font-height-heading), 'weight': var(--cds-font-weight-bold));
-$h5: ('size': var(--cds-font-heading-5), 'height': var(--cds-font-height-heading), 'weight': var(--cds-font-weight-bold));
-$h6: ('size': var(--cds-font-heading-6), 'height': var(--cds-font-height-heading), 'weight': var(--cds-font-weight-bold));
-$display1: ('size': var(--cds-font-display-1), 'height': var(--cds-font-height-display), 'weight': var(--cds-font-weight-bold));
-$display2: ('size': var(--cds-font-display-2), 'height': var(--cds-font-height-display), 'weight': var(--cds-font-weight-bold));
-$typography: (
-  'h1': $h1,
-  'h2': $h2,
-  'h3': $h3,
-  'h4': $h4,
-  'h5': $h5,
-  'h6': $h6,
-  'xs': $xs,
-  'sm': $sm,
-  'md': $md,
-  'lg': $lg,
-  'display-1': $display1,
-  'display-2': $display2
-);
-$borders: ('1': var(--cds-border-element-01), '2': var(--cds-border-element-02));
-$borders-radius: ('3': var(--cds-border-radius-s), '6': var(--cds-border-radius-m), '9': var(--cds-border-radius-l));
-$spaces: (
-  'none': 0,
-  '3xs': $cds-spacing-3xs,
-  'xxs': $cds-spacing-xxs,
-  'xs': $cds-spacing-xs,
-  's': $cds-spacing-s,
-  'm': $cds-spacing-m,
-  'l': $cds-spacing-l,
-  'xl': $cds-spacing-xl,
-  'xxl': $cds-spacing-xxl,
-  '3xl': $cds-spacing-3xl,
-  '4xl': $cds-spacing-4xl,
-  '5xl': $cds-spacing-5xl,
-  '6xl': $cds-spacing-6xl
-);
-$displays: (
-  'block': block,
-  'inline-block': inline-block,
-  'inline': inline,
-  'flex': flex,
-  'inline-flex': inline-flex,
-  'hidden': none,
-);
-$visibility: (
-  'invisible': hidden,
-  'visible': visible,
-);
-$flex-direction: (
-  'flex-col': column,
-  'flex-row': row,
-  'flex-row-reverse': row-reverse,
-  'flex-col-reverse': column-reverse
-);
-$justify-content: (
-  'center': center,
-  'start': flex-start,
-  'end': flex-end,
-  'between': space-between,
-  'around': space-around,
-  'stretch': stretch
-);
-$align-items: (
-  'start': flex-start,
-  'end': flex-end,
-  'center': center,
-  'baseline': baseline,
-  'stretch': stretch
-);
-$align-content: (
-  'start': flex-start,
-  'end': flex-end,
-  'center': center,
-  'between': space-between,
-  'around': space-around,
-  'stretch': stretch,
-);
-$align-self: (
-  'start': flex-start,
-  'end': flex-end,
-  'center': center,
-  'baseline': baseline,
-  'stretch': stretch,
-  'auto': auto,
-  'normal': normal,
-  'first-baseline': first baseline,
-  'last-baseline': last baseline
-);
-$flex-wrap: (
-  'wrap': wrap,
-  'nowrap': nowrap,
-  'wrap-reverse': wrap-reverse
-);