fix(styles): updated list css variables

diplodoc-platform · Mar 3, 2025 · a754626 · a754626
1 parent 6475f76
commit a754626
Show file tree

Hide file tree

Showing 5 changed files with 32 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -88,6 +88,7 @@ MIT
 - `--yfm-color-border`
 - `--yfm-color-accent`
 - `--yfm-tab-size`
+- `--yfm-text-block-margin-block`
 
 **code**
 
@@ -138,3 +139,9 @@ MIT
 
 - `--yfm-file-icon`
 - `--yfm-file-icon-color`
+
+**list**
+
+- `--yfm-list-item-margin-block`
+- `--yfm-list-text-margin-block`
+- `--yfm-list-text-last-margin-block`
diff --git a/README.ru.md b/README.ru.md
@@ -88,6 +88,7 @@ MIT
 - `--yfm-color-border`
 - `--yfm-color-accent`
 - `--yfm-tab-size`
+- `--yfm-text-block-margin-block`
 
 **code**
 
@@ -138,3 +139,9 @@ MIT
 
 - `--yfm-file-icon`
 - `--yfm-file-icon-color`
+
+**list**
+
+- `--yfm-list-item-margin-block`
+- `--yfm-list-text-margin-block`
+- `--yfm-list-text-last-margin-block`
diff --git a/playground/scripts/configs.mjs b/playground/scripts/configs.mjs
@@ -24,7 +24,13 @@ const configuredSassPlugin = sassPlugin({
 
         const res = await postcss([
             autoprefixer({cascade: false}),
-            postcssPresetEnv({stage: 0}),
+            postcssPresetEnv({
+                stage: 0,
+                features: {
+                    'logical-properties-and-values': false,
+                    'custom-properties': false,
+                },
+            }),
         ]).process(source, config);
 
         return res.css;

diff --git a/scripts/package-build-configs.mjs b/scripts/package-build-configs.mjs
@@ -31,7 +31,13 @@ const plugins = [
         async transform(source) {
             const {css} = await postcss([
                 autoprefixer({cascade: false}),
-                postcssPresetEnv({stage: 0}),
+                postcssPresetEnv({
+                    stage: 0,
+                    features: {
+                        'logical-properties-and-values': false,
+                        'custom-properties': false,
+                    },
+                }),
             ]).process(source, {from: undefined});
 
             return css;

diff --git a/src/scss/_common.scss b/src/scss/_common.scss
@@ -13,11 +13,6 @@
     }
 }
 
-$text-block-margin: 0 0 15px;
-$list-margin: 0.33em 0 0 0;
-$list-text-margin: 15px 0 0 0;
-$list-last-text-margin: 15px 0 0 0;
-
 .yfm {
     @include private-brand();
     @include brand();
@@ -140,7 +135,7 @@ $list-last-text-margin: 15px 0 0 0;
     dl,
     table,
     pre {
-        margin: var(--yfm-text-block-margin, #{$text-block-margin});
+        margin-block: var(--yfm-text-block-margin-block, 0 15px);
     }
 
     ul,
@@ -338,17 +333,17 @@ $list-last-text-margin: 15px 0 0 0;
     }
 
     li + li {
-        margin: var(--yfm-list-margin, #{$list-margin});
+        margin-block: var(--yfm-list-item-margin-block, 0.33em 0);
     }
 
     li p,
     li blockquote {
-        margin: var(--yfm-list-text-margin, #{$list-text-margin});
+        margin-block: var(--yfm-list-text-margin-block, 15px);
     }
 
     li > p:last-child,
     li > blockquote:last-child {
-        margin: var(--yfm-list-last-text-margin, #{$list-last-text-margin});
+        margin-block: var(--yfm-list-text-last-margin-block, 15px);
     }
 
     code {