feat: Desing change

src/lib/kit/components/AccordeonCard/AccordeonCard.scss

@@ -91,7 +91,7 @@
     }
 
     &__interal-actions {
-        margin-right: var(--df-accordeon-card-interal-actions-margin-right, $df-offset-5);
+        margin-right: var(--df-accordeon-card-interal-actions-margin-right, var(--g-spacing-1));
     }
 
     &__toggle-icon_open {

src/lib/kit/components/Card/Card.scss

@@ -59,7 +59,7 @@
         align-items: center;
 
         & > * {
-            margin-left: var(--df-card-header-right-child-margin-left, $df-offset-10);
+            margin-left: var(--df-card-header-right-child-margin-left, var(--g-spacing-2));
         }
     }
 
@@ -75,7 +75,7 @@
     }
 
     &__note {
-        margin-left: var(--df-card-note-margin-left, $df-offset-5);
+        margin-left: var(--df-card-note-margin-left, var(--g-spacing-1));
 
         .gc-help-popover {
             display: flex;

src/lib/kit/components/GroupIndent/GroupIndent.scss

@@ -3,11 +3,11 @@
 .#{$ns}group-indent {
     padding: var(
         --df-group-indent-padding,
-        $df-offset-11 var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5)
+        var(--g-spacing-3) var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5)
     );
     margin: var(
         --df-group-indent-margin,
-        -$df-offset-11 var(--g-spacing-0) var(--g-spacing-0) $df-offset-5
+        $negative-g-spacing-3 var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-1)
     );
     border-left: 1px solid var(--g-color-line-generic-accent);
 
@@ -22,7 +22,7 @@
     & > .#{$ns}simple-vertical-accordeon_view {
         margin-top: var(
             --df-group-indent-simple-vertical-accordeon-view-margin-top,
-            -$df-offset-10
+            $negative-g-spacing-3
         );
     }
 }

src/lib/kit/components/Inputs/ArrayBase/ArrayBase.scss

@@ -25,10 +25,7 @@
     }
 
     &__item-prefix {
-        margin: var(
-            --df-array-base-item-prefix-margin,
-            -$df-offset-7 var(--g-spacing-0) var(--g-spacing-2)
-        );
+        margin: var(--df-array-base-item-prefix-margin, -8px var(--g-spacing-0) var(--g-spacing-2));
     }
 
     &__add-button {

src/lib/kit/components/Inputs/CheckboxGroup/CheckboxGroup.scss

@@ -6,11 +6,11 @@
     height: var(--df-checkbox-height, $df-checkbox-height);
 
     .g-control-label__text {
-        margin-inline-start: var(--df-checkbox-margint-start, 5px);
+        margin-inline-start: var(--df-checkbox-margint-start, var(--g-spacing-1));
     }
 
     & > *:not(:last-child) {
-        margin-right: var(--df-checkbox-group-child-margin-right, $df-offset-6);
+        margin-right: var(--df-checkbox-group-child-margin-right, var(--g-spacing-3));
     }
 
     &_vertical {
@@ -22,7 +22,7 @@
         & > *:not(:last-child) {
             margin: var(
                 --df-checkbox-group-vertical-child-margin,
-                var(--g-spacing-0) var(--g-spacing-0) $df-offset-6
+                var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-2)
             );
         }
     }

src/lib/kit/components/Inputs/FileInput/FileInput.scss

@@ -9,7 +9,7 @@
 
     &__file-name {
         display: block;
-        margin: var(--df-file-input-file-name-margin, auto $df-offset-10);
+        margin: var(--df-file-input-file-name-margin, auto var(--g-spacing-2));
         max-width: var(--df-file-input-file-name-max-width, 160px);
     }
 }

src/lib/kit/components/Inputs/MonacoInput/MonacoHeader.scss

@@ -4,7 +4,7 @@
     height: var(--df-monaco-header-height, 52px);
     display: flex;
     justify-content: space-between;
-    padding: var(--df-monaco-header-padding, $df-offset-15);
+    padding: var(--df-monaco-header-padding, var(--g-spacing-4));
     align-items: center;
     background-color: var(--g-color-base-float-hover);
 }

src/lib/kit/components/Inputs/MonacoInput/MonacoInputDialog.scss

@@ -4,7 +4,7 @@
     .g-dialog-footer {
         padding: var(
             --df-monaco-input-dialog-dialog-footer-padding,
-            $df-offset-6 var(--g-spacing-8) var(--g-spacing-8)
+            var(--g-spacing-2) var(--g-spacing-8) var(--g-spacing-8)
         );
     }
 

src/lib/kit/components/Inputs/NumberWithScale/NumberWithScale.scss

@@ -7,6 +7,6 @@
 
     &__select {
         max-width: var(--df-number-with-scale-select-max-width, 102px);
-        margin-left: var(--df-number-with-scale-select-margin-left, $df-offset-5);
+        margin-left: var(--df-number-with-scale-select-margin-left, var(--g-spacing-1));
     }
 }

src/lib/kit/components/Inputs/OneOf/OneOf.scss

@@ -17,11 +17,11 @@
             & > .#{$ns}use-search {
                 padding: var(
                     --df-oneof-base-padding,
-                    $df-offset-11 var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5)
+                    var(--g-spacing-3) var(--g-spacing-0) var(--g-spacing-0) var(--g-spacing-5)
                 );
                 margin: var(
                     --df-oneof-base-margin,
-                    var(--g-spacing-1) var(--g-spacing-0) var(--g-spacing-5) $df-offset-5
+                    var(--g-spacing-1) var(--g-spacing-0) var(--g-spacing-5) var(--g-spacing-1)
                 );
                 border-left: 1px solid var(--g-color-line-generic-accent);
 
@@ -36,7 +36,7 @@
                 & > .#{$ns}simple-vertical-accordeon_view {
                     margin-top: var(
                         --df-oneof-base-simple-vertical-accordeon-margin-top,
-                        -$df-offset-10
+                        $negative-g-spacing-3
                     );
                 }
             }

src/lib/kit/components/Inputs/TableArrayInput/TableArrayInput.scss

@@ -2,7 +2,7 @@
 
 .#{$ns}table-array {
     &__table {
-        margin-bottom: var(--df-table-array-table-margin-bottom, $df-offset-10);
+        margin-bottom: var(--df-table-array-table-margin-bottom, var(--g-spacing-2));
 
         .g-table__cell {
             border-bottom: 0px transparent;
@@ -33,7 +33,7 @@
 
         &_arr,
         &_obj {
-            padding-left: var(--df-table-array-cell-obj-padding-left, $df-offset-3);
+            padding-left: var(--df-table-array-cell-obj-padding-left, var(--g-spacing-half));
 
             .yc-text-input,
             .g-text-input,
@@ -59,6 +59,6 @@
     }
 
     &__idx {
-        padding-top: var(--df-table-array-idx-padding-top, $df-offset-6);
+        padding-top: var(--df-table-array-idx-padding-top, 6px);
     }
 }

src/lib/kit/components/Layouts/Column/Column.scss

@@ -29,7 +29,7 @@
 
     &__title {
         word-break: break-word;
-        margin-right: var(--df-column-title-margin-right, $df-offset-3);
+        margin-right: var(--df-column-title-margin-right, var(--g-spacing-half));
 
         &_required {
             &::after {
@@ -44,7 +44,7 @@
 
         &-inner {
             position: absolute;
-            margin-top: var(--df-column-note-inner-margin-top, $df-offset-1);
+            margin-top: var(--df-column-note-inner-margin-top, var(--g-spacing-0));
 
             .g-help-popover {
                 display: flex;

src/lib/kit/components/Layouts/Row/Row.scss

@@ -33,7 +33,7 @@
 
     &__title {
         word-break: break-word;
-        margin-right: var(--df-row-title-margin-right, $df-offset-3);
+        margin-right: var(--df-row-title-margin-right, var(--g-spacing-half));
 
         &_required {
             &::after {
@@ -49,7 +49,7 @@
 
         &-inner {
             position: absolute;
-            margin-top: var(--df-row-note-inner-margin-top, $df-offset-1);
+            margin-top: var(--df-row-note-inner-margin-top, var(--g-spacing-0));
 
             .g-help-popover {
                 display: flex;
@@ -65,7 +65,7 @@
         display: flex;
         flex-direction: column;
         flex-grow: 1;
-        margin-left: var(--df-row-right-margin-left, $df-offset-15);
+        margin-left: var(--df-row-right-margin-left, var(--g-spacing-4));
 
         &-inner {
             display: flex;
@@ -74,7 +74,7 @@
     }
 
     &__description {
-        margin-top: var(--df-row-description-margin-top, $df-offset-10);
+        margin-top: var(--df-row-description-margin-top, var(--g-spacing-2));
         color: var(--g-color-text-secondary);
         word-break: break-word;
     }

src/lib/kit/components/Layouts/Section/Section.scss

@@ -36,7 +36,7 @@ $block: '.#{$ns}section';
     }
 
     &__note {
-        margin-left: var(--df-section-note-margin-left, $df-offset-5);
+        margin-left: var(--df-section-note-margin-left, var(--g-spacing-1));
 
         .g-help-popover {
             display: flex;