feat: add stylelint-core-vars (#461)

* feat: add stylelint-core-vars * chore: fix deps
core-ds · Jan 20, 2021 · c2f515e · c2f515e
1 parent 293ae3d
commit c2f515e
Show file tree

Hide file tree

Showing 8 changed files with 28 additions and 20 deletions.
diff --git a/package.json b/package.json
@@ -77,6 +77,7 @@
     },
     "devDependencies": {
         "@alfalab/rollup-plugin-postcss": "^3.2.0",
+        "@alfalab/stylelint-core-vars": "^0.0.4",
         "@babel/plugin-proposal-class-properties": "^7.12.1",
         "@babel/preset-typescript": "^7.9.0",
         "@commitlint/config-conventional": "^8.3.4",
@@ -191,8 +192,12 @@
     "stylelint": {
         "extends": "arui-presets-lint/stylelint",
         "rules": {
-            "arui-cssvars/use-variables": false
-        }
+            "arui-cssvars/use-variables": false,
+            "stylelint-core-vars/use-vars": true
+        },
+        "plugins": [
+            "@alfalab/stylelint-core-vars"
+        ]
     },
     "lint-staged": {
         "{packages,bin}/**/*.{js,jsx,ts,tsx}": [

diff --git a/packages/badge/src/index.module.css b/packages/badge/src/index.module.css
@@ -21,8 +21,8 @@
 .s {
     height: 16px;
     min-width: 16px;
-    padding-left: 4px;
-    padding-right: 4px;
+    padding-left: var(--gap-2xs);
+    padding-right: var(--gap-2xs);
 }
 
 .m {

diff --git a/packages/bank-card/src/index.module.css b/packages/bank-card/src/index.module.css
@@ -32,8 +32,8 @@
     left: 0;
     display: flex;
     align-items: center;
-    padding-left: 20px;
-    padding-right: 20px;
+    padding-left: var(--gap-l);
+    padding-right: var(--gap-l);
     border-radius: 12px;
     box-sizing: border-box;
 }
@@ -114,7 +114,7 @@
     user-select: none;
     cursor: pointer;
     outline: none;
-    margin-bottom: 4px;
+    margin-bottom: var(--gap-2xs);
     align-self: flex-end;
 
     /* В макете иконка прилегает к правому краю поля, а по дизайн-системе там должен быть отступ */

diff --git a/packages/calendar/src/components/days-table/index.module.css b/packages/calendar/src/components/days-table/index.module.css
@@ -17,7 +17,7 @@
             background: linear-gradient(
                 270deg,
                 var(--calendar-range-background) 0%,
-                rgba(255, 255, 255, 0) 100%
+                var(--color-light-specialbg-nulled) 100%
             );
 
             &:after {
@@ -28,7 +28,7 @@
         &:last-child .transitRight {
             background: linear-gradient(
                 270deg,
-                rgba(255, 255, 255, 0) 0%,
+                var(--color-light-specialbg-nulled) 0%,
                 var(--calendar-range-background) 100%
             );
 
@@ -138,7 +138,7 @@
             background: linear-gradient(
                 270deg,
                 var(--calendar-range-background) 0%,
-                rgba(255, 255, 255, 0) 100%
+                var(--color-light-specialbg-nulled) 100%
             );
         }
     }
@@ -148,7 +148,7 @@
             left: 100%;
             background: linear-gradient(
                 270deg,
-                rgba(255, 255, 255, 0) 0%,
+                var(--color-light-specialbg-nulled) 0%,
                 var(--calendar-range-background) 100%
             );
         }

diff --git a/packages/calendar/src/components/header/index.module.css b/packages/calendar/src/components/header/index.module.css
@@ -9,7 +9,7 @@
 }
 
 .withShadow {
-    box-shadow: 0 0 8px rgba(11, 31, 53, 0.04), 0 4px 8px rgba(11, 31, 53, 0.08);
+    box-shadow: var(--shadow-s);
 }
 
 .inner {

diff --git a/packages/skeleton/src/stories.module.css b/packages/skeleton/src/stories.module.css
@@ -1,5 +1,5 @@
 .example-1 {
-    margin-top: 16px;
+    margin-top: var(--gap-m);
 }
 
 .example-1:first-child {

diff --git a/packages/tag/src/index.module.css b/packages/tag/src/index.module.css
@@ -98,7 +98,7 @@
 .xs {
     min-width: 60px;
     min-height: 32px;
-    padding: 4px 16px;
+    padding: var(--gap-2xs) var(--gap-m);
     border-radius: 32px;
     font-size: 14px;
     line-height: 18px;
@@ -114,7 +114,7 @@
 .s {
     min-width: 80px;
     min-height: 48px;
-    padding: 4px 16px;
+    padding: var(--gap-2xs) var(--gap-m);
     border-radius: 48px;
     font-size: 16px;
     line-height: 20px;
@@ -128,13 +128,11 @@
 }
 
 .m {
+    @mixin action_component;
     min-width: 96px;
     min-height: 56px;
-    padding: 4px 24px;
+    padding: var(--gap-2xs) var(--gap-xl);
     border-radius: 56px;
-    font-size: 16px;
-    line-height: 20px;
-    font-weight: 500;
 
     @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
         /* Хак для ие, в котором не работает центрирование по высоте с использованием флексов, если указан min-height
@@ -146,7 +144,7 @@
 .l {
     min-width: 120px;
     min-height: 68px;
-    padding: 4px 32px;
+    padding: var(--gap-2xs) var(--gap-2xl);
     border-radius: 68px;
     font-size: 18px;
     line-height: 22px;

diff --git a/yarn.lock b/yarn.lock
@@ -116,6 +116,11 @@
     safe-identifier "^0.4.1"
     style-inject "^0.3.0"
 
+"@alfalab/stylelint-core-vars@^0.0.4":
+  version "0.0.4"
+  resolved "https://registry.yarnpkg.com/@alfalab/stylelint-core-vars/-/stylelint-core-vars-0.0.4.tgz#f9ba0ea20b8a2d77646d3a65b34631659d6073ea"
+  integrity sha512-KMaN6A4QGwLDeD5aVTPl6zozDUPgB5WeumcWib4zdzv7zfnFtOnUFfpyLguFXCi9geg4/gC2hf4MCNH8uNe8Dg==
+
 "@alfalab/utils@^0.4.1":
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/@alfalab/utils/-/utils-0.4.1.tgz#b914e45591b98dcaf59c553d48cb1c92f640aa62"