@central-design-system/components 2.30.0 → 3.0.0-alpha.0

package/{dist/tokens → src/scss/themes}/cds/variables.css

@@ -70,7 +70,6 @@
   --cds-font-body-size-s: 0.875rem; /* Font size */
   --cds-font-body-size-m: 1rem; /* Font size */
   --cds-font-body-size-l: 1.5rem; /* Font size */
-  --cds-font-body-size-xl: 1.75rem; /* Font size */
   --cds-font-heading-1: 2.625rem; /* Font size */
   --cds-font-heading-2: 2rem; /* Font size */
   --cds-font-heading-3: 1.75rem; /* Font size */

package/src/scss/themes/index.ts

@@ -0,0 +1,43 @@
+/**
+ * Automatically generated by CDS CLI
+ * Generated on 2/18/2023, 7:04:48 PM
+ **/
+
+/**
+ * @etchteam/storybook-addon-css-variables-theme not support Vite, only webpack loaders
+ * because need this hack for loading css variable with Vite
+ * @param theme
+ */
+const cssVariablesViteHack = (theme: string) => {
+  return {
+    styleTag: null as any,
+    innerStyles: '',
+    use: async function () {
+      if (!this.styleTag?.innerHTML) {
+        this.styleTag = document.createElement('style');
+        this.styleTag.type = 'text/css';
+        this.innerStyles = (await import(`./${theme}/variables.css?inline`)).default;
+        this.styleTag.innerHTML = this.innerStyles;
+        document.body.appendChild(this.styleTag);
+        return;
+      }
+      this.styleTag.innerHTML = this.innerStyles;
+    },
+    unuse: function () {
+      if (this.styleTag) {
+        this.styleTag.innerHTML = '';
+      }
+    }
+  };
+};
+
+const B2B = cssVariablesViteHack('b2b');
+const CDS = cssVariablesViteHack('cds');
+
+export default {
+  files: {
+    B2B,
+    CDS
+  },
+  defaultTheme: 'CDS'
+};

package/src/scss/utility/display.scss

@@ -0,0 +1,13 @@
+@import "variables";
+
+@each $name, $display in $displays {
+  .cds-#{$name} {
+    display: $display !important;
+  }
+}
+
+@each $name, $visibility in $visibility {
+  .cds-#{$name} {
+    visibility: $visibility !important;
+  }
+}

package/src/scss/utility/flexbox.scss

@@ -0,0 +1,37 @@
+@import "variables";
+
+@each $name, $direction in $flex-direction {
+  .cds-#{$name} {
+    flex-direction: $direction !important;
+  }
+}
+
+@each $name, $value in $justify-content {
+  .cds-justify-#{$name} {
+    justify-content: $value !important;
+  }
+}
+
+@each $name, $value in $align-items {
+  .cds-items-#{$name} {
+    align-items: $value !important;
+  }
+}
+
+@each $name, $value in $align-content {
+  .cds-content-#{$name} {
+    align-content: $value !important;
+  }
+}
+
+@each $name, $value in $flex-wrap {
+  .cds-flex-#{$name} {
+    flex-wrap: $value !important;
+  }
+}
+
+@each $name, $value in $align-self {
+  .cds-self-#{$name} {
+    align-self: $value !important;
+  }
+}

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

@@ -0,0 +1 @@
+".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

@@ -0,0 +1,300 @@
+.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/index.scss

@@ -0,0 +1,7 @@
+@import 'generatedFiles/generatedStyles';
+@import 'display';
+@import 'layout';
+@import 'spacing';
+@import 'typography';
+@import 'flexbox';
+@import 'lists';

package/src/scss/utility/layout.scss

@@ -0,0 +1,11 @@
+@import "variables";
+
+@each $name, $index in $z-indexes {
+  .#{$name} {
+    z-index: $index !important;
+  }
+}
+
+.cds-fullwidth {
+  width: 100%;
+}

package/src/scss/utility/lists.scss

@@ -0,0 +1,76 @@
+@import '../mixins/layout/spacing';
+@import '../mixins/layout/mini-unit';
+@import '../mixins/layout/layout';
+@import '../mixins/typo.scss';
+
+.cds-ul, .cds-ol {
+  list-style-type: none;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  counter-reset: listitem;
+
+  .cds-li {
+    position: relative;
+    list-style-type: none;
+    border: 0;
+    counter-increment: listitem;
+    margin: 0 0 $cds-spacing-xxs $cds-spacing-xs;
+    padding: 0 0 0 $cds-spacing-xs;
+    color: var(--cds-color-text-primary);
+    @include cds-body-text-s();
+
+    // Задаем расположение для всех элементов списка
+    &:before {
+      display: inline-block;
+      position: absolute;
+      left: -($cds-spacing-xs);
+      margin-right: $cds-spacing-xs;
+      margin-bottom: $cds-spacing-xxs;
+    }
+
+    // Задаем иконку для элементов верхнего списка
+    > &:before {
+      content: '\2013'
+    }
+  }
+
+  &--nested {
+    margin: $cds-spacing-xxs 0;
+
+    // Задаем иконку для элементов вложенного списка
+    & > .cds-li:before {
+      content: '\25AA'
+    }
+
+    // Задаем расположение для элементов вложенного списка
+    .cds-li {
+      margin-left: $cds-spacing-l;
+      margin-bottom: 0;
+    }
+  }
+}
+
+.cds-ol {
+  // Задаем расположение для элементов верхнего списка при ordered
+  > .cds-li {
+    padding-left: $cds-spacing-m;
+  }
+
+  // Задаем иконку для элементов верхнего списка при ordered
+  > .cds-li:before {
+    content: counter(listitem) ".";
+  }
+
+  .cds-ol--nested, .cds-ul--nested {
+    counter-reset: ol-counter;
+
+    > .cds-li {
+      counter-increment: ol-counter;
+
+      &:before {
+        content: counter(ol-counter,lower-alpha) ".";
+      }
+    }
+  }
+}

package/src/scss/utility/spacing.scss

@@ -0,0 +1,89 @@
+@import "variables";
+
+@each $name, $space in $spaces {
+  .cds-pa-#{$name} {
+    padding: $space !important;
+  }
+}
+
+@each $name, $space in $spaces {
+  .cds-pt-#{$name} {
+    padding-top: $space !important;
+  }
+}
+
+@each $name, $space in $spaces {
+  .cds-pb-#{$name} {
+    padding-bottom: $space !important;
+  }
+}
+
+@each $name, $space in $spaces {
+  .cds-pr-#{$name} {
+    padding-right: $space !important;
+  }
+}
+
+@each $name, $space in $spaces {
+  .cds-pl-#{$name} {
+    padding-left: $space !important;
+  }
+}
+
+@each $name, $space in $spaces {
+  .cds-px-#{$name} {
+    padding-right: $space !important;
+    padding-left: $space !important;
+  }
+}
+
+@each $name, $space in $spaces {
+  .cds-py-#{$name} {
+    padding-top: $space !important;
+    padding-bottom: $space !important;
+  }
+}
+
+@each $name, $space in $spaces {
+  .cds-ma-#{$name} {
+    margin: $space !important;
+  }
+}
+
+@each $name, $space in $spaces {
+  .cds-mt-#{$name} {
+    margin-top: $space !important;
+  }
+}
+
+@each $name, $space in $spaces {
+  .cds-mb-#{$name} {
+    margin-bottom: $space !important;
+  }
+}
+
+@each $name, $space in $spaces {
+  .cds-mr-#{$name} {
+    margin-right: $space !important;
+  }
+}
+
+@each $name, $space in $spaces {
+  .cds-ml-#{$name} {
+    margin-left: $space !important;
+  }
+}
+
+@each $name, $space in $spaces {
+  .cds-mx-#{$name} {
+    margin-right: $space !important;
+    margin-left: $space !important;
+  }
+}
+
+@each $name, $space in $spaces {
+  .cds-my-#{$name} {
+    margin-top: $space !important;
+    margin-bottom: $space !important;
+  }
+}

package/src/scss/utility/typography.scss

@@ -0,0 +1,16 @@
+@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;
+  }
+}