@gravity-ui/blog-constructor 4.4.0 → 5.0.0

package/styles/storybook/typography.scss

@@ -14,7 +14,7 @@
 
         &_text-contrasts,
         &_font-families {
-            font-size: var(--yc-text-body-2-font-size);
+            font-size: var(--g-text-body-2-font-size);
 
             #{$block}__item + #{$block}__item {
                 margin-top: 12px;
@@ -29,8 +29,8 @@
     &__caption {
         display: inline-block;
         width: 180px;
-        color: var(--yc-color-text-secondary);
-        font-size: var(--yc-text-body-font-size);
+        color: var(--g-color-text-secondary);
+        font-size: var(--g-text-body-font-size);
         text-transform: uppercase;
     }
 
@@ -41,95 +41,95 @@
     &__item_name {
         // font-sizes
         &_body .demo-typography__value {
-            font-size: var(--yc-text-body-font-size);
-            line-height: var(--yc-text-body-1-line-height);
+            font-size: var(--g-text-body-font-size);
+            line-height: var(--g-text-body-1-line-height);
         }
 
         &_body-2 .demo-typography__value {
-            font-size: var(--yc-text-body-2-font-size);
-            line-height: var(--yc-text-body-2-line-height);
+            font-size: var(--g-text-body-2-font-size);
+            line-height: var(--g-text-body-2-line-height);
         }
 
         &_body-3 .demo-typography__value {
-            font-size: var(--yc-text-body-3-font-size);
-            line-height: var(--yc-text-body-3-line-height);
+            font-size: var(--g-text-body-3-font-size);
+            line-height: var(--g-text-body-3-line-height);
         }
 
         &_lead .demo-typography__value {
-            font-size: var(--yc-text-subheader-3-font-size);
-            line-height: var(--yc-text-subheader-3-line-height);
+            font-size: var(--g-text-subheader-3-font-size);
+            line-height: var(--g-text-subheader-3-line-height);
         }
 
         &_header .demo-typography__value {
-            font-size: var(--yc-text-header-1-font-size);
-            line-height: var(--yc-text-header-1-line-height);
+            font-size: var(--g-text-header-1-font-size);
+            line-height: var(--g-text-header-1-line-height);
         }
 
         &_title .demo-typography__value {
-            font-size: var(--yc-text-header-2-font-size);
-            line-height: var(--yc-text-header-2-line-height);
+            font-size: var(--g-text-header-2-font-size);
+            line-height: var(--g-text-header-2-line-height);
         }
 
         &_display1 .demo-typography__value {
-            font-size: var(--yc-text-display-1-font-size);
-            line-height: var(--yc-text-display-1-line-height);
+            font-size: var(--g-text-display-1-font-size);
+            line-height: var(--g-text-display-1-line-height);
         }
 
         &_display2 .demo-typography__value {
-            font-size: var(--yc-text-display-2-font-size);
-            line-height: var(--yc-text-display-2-line-height);
+            font-size: var(--g-text-display-2-font-size);
+            line-height: var(--g-text-display-2-line-height);
         }
 
         &_display3 .demo-typography__value {
-            font-size: var(--yc-text-display-3-font-size);
-            line-height: var(--yc-text-display-3-line-height);
+            font-size: var(--g-text-display-3-font-size);
+            line-height: var(--g-text-display-3-line-height);
         }
 
         &_code-3 .demo-typography__value {
-            font-size: var(--yc-text-code-3-font-size);
-            line-height: var(--yc-text-code-3-line-height);
-            font-weight: var(--yc-text-code-1-font-size);
-            font-family: var(--yc-text-code-font-family);
+            font-size: var(--g-text-code-3-font-size);
+            line-height: var(--g-text-code-3-line-height);
+            font-weight: var(--g-text-code-1-font-size);
+            font-family: var(--g-text-code-font-family);
         }
 
         &_code-3-inline .demo-typography__value {
-            font-size: var(--yc-text-code-inline-3-font-size);
-            line-height: var(--yc-text-code-inline-3-line-height);
-            font-weight: var(--yc-text-code-font-weight);
-            font-family: var(--yc-text-code-font-family);
+            font-size: var(--g-text-code-inline-3-font-size);
+            line-height: var(--g-text-code-inline-3-line-height);
+            font-weight: var(--g-text-code-font-weight);
+            font-family: var(--g-text-code-font-family);
         }
 
         &_code-2 .demo-typography__value {
-            font-size: var(--yc-text-code-2-font-size);
-            line-height: var(--yc-text-code-2-line-height);
-            font-weight: var(--yc-text-code-font-weight);
-            font-family: var(--yc-text-code-font-family);
+            font-size: var(--g-text-code-2-font-size);
+            line-height: var(--g-text-code-2-line-height);
+            font-weight: var(--g-text-code-font-weight);
+            font-family: var(--g-text-code-font-family);
         }
 
         &_code-2-inline .demo-typography__value {
-            font-size: var(--yc-text-code-inline-2-font-size);
-            line-height: var(--yc-text-code-inline-2-line-height);
-            font-weight: var(--yc-text-code-font-weight);
-            font-family: var(--yc-text-code-font-family);
+            font-size: var(--g-text-code-inline-2-font-size);
+            line-height: var(--g-text-code-inline-2-line-height);
+            font-weight: var(--g-text-code-font-weight);
+            font-family: var(--g-text-code-font-family);
         }
 
         &_code-1 .demo-typography__value {
-            font-size: var(--yc-text-code-1-font-size);
-            line-height: var(--yc-text-code-1-line-height);
-            font-weight: var(--yc-text-code-font-weight);
-            font-family: var(--yc-text-code-font-family);
+            font-size: var(--g-text-code-1-font-size);
+            line-height: var(--g-text-code-1-line-height);
+            font-weight: var(--g-text-code-font-weight);
+            font-family: var(--g-text-code-font-family);
         }
 
         &_code-1-inline .demo-typography__value {
-            font-size: var(--yc-text-code-inline-1-font-size);
-            line-height: var(--yc-text-code-inline-1-line-height);
-            font-weight: var(--yc-text-code-font-weight);
-            font-family: var(--yc-text-code-font-family);
+            font-size: var(--g-text-code-inline-1-font-size);
+            line-height: var(--g-text-code-inline-1-line-height);
+            font-weight: var(--g-text-code-font-weight);
+            font-family: var(--g-text-code-font-family);
         }
 
         // font-families
         &_monospace .demo-typography__value {
-            font-family: var(--yc-font-family-monospace);
+            font-family: var(--g-font-family-monospace);
         }
     }
 

package/styles/yfm.css

@@ -1,9 +1,9 @@
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .yfm_blog {
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
-  color: var(--yc-color-text-primary);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
+  color: var(--g-color-text-primary);
 }
 .yfm_blog h1:first-child,
 .yfm_blog h2:first-child,
@@ -14,16 +14,16 @@ unpredictable css rules order in build */
   padding-top: 0;
 }
 .yfm_blog h2 {
-  font-size: var(--yc-text-display-2-font-size);
-  line-height: var(--yc-text-display-2-line-height);
+  font-size: var(--g-text-display-2-font-size);
+  line-height: var(--g-text-display-2-line-height);
 }
 .yfm_blog h3 {
-  font-size: var(--yc-text-header-2-font-size);
-  line-height: var(--yc-text-header-2-line-height);
+  font-size: var(--g-text-header-2-font-size);
+  line-height: var(--g-text-header-2-line-height);
 }
 .yfm_blog h4 {
-  font-size: var(--yc-text-header-1-font-size);
-  line-height: var(--yc-text-header-1-line-height);
+  font-size: var(--g-text-header-1-font-size);
+  line-height: var(--g-text-header-1-line-height);
 }
 .yfm_blog.yfm_blog h1,
 .yfm_blog.yfm_blog h2,
@@ -34,7 +34,7 @@ unpredictable css rules order in build */
   margin-bottom: 16px;
   margin-top: 32px;
   padding-top: 0;
-  font-weight: var(--yc-text-header-font-weight);
+  font-weight: var(--g-text-header-font-weight);
 }
 
 .yfm_blog blockquote,
@@ -59,41 +59,41 @@ unpredictable css rules order in build */
   padding-left: 1.4em;
 }
 .yfm_blog code {
-  color: var(--yc-color-text-misc);
+  color: var(--g-color-text-misc);
 }
 .yfm_blog pre > code {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .yfm_blog table {
-  color: var(--yc-color-text-primary);
-  border: 1px solid var(--yc-color-line-generic);
-  background: var(--yc-color-base-background);
+  color: var(--g-color-text-primary);
+  border: 1px solid var(--g-color-line-generic);
+  background: var(--g-color-base-background);
 }
 .yfm_blog thead tr,
 .yfm_blog table tr:nth-child(2n) {
-  background-color: var(--yc-color-base-generic);
+  background-color: var(--g-color-base-generic);
 }
 .yfm_blog_media {
-  font-size: var(--yc-text-body-3-font-size);
-  line-height: var(--yc-text-body-3-line-height);
-  color: var(--yc-color-text-secondary);
+  font-size: var(--g-text-body-3-font-size);
+  line-height: var(--g-text-body-3-line-height);
+  color: var(--g-color-text-secondary);
 }
 .yfm_blog_breadcrumbs {
-  font-size: var(--yc-text-body-2-font-size);
-  line-height: var(--yc-text-body-2-line-height);
-  color: var(--yc-text-color-base);
+  font-size: var(--g-text-body-2-font-size);
+  line-height: var(--g-text-body-2-line-height);
+  color: var(--g-text-color-base);
 }
 .yfm_blog a {
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
 }
 .yfm_blog a:hover {
-  color: var(--yc-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
 }
 .yfm_blog .yfm-tab:hover, .yfm_blog .yfm-tab:active {
-  color: var(--yc-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
 }
 .yfm_blog .yfm-tab.active {
-  border-bottom-color: var(--yc-color-text-link);
+  border-bottom-color: var(--g-color-text-link);
 }
 .yfm_blog .yfm-clipboard {
   margin: 32px 0;

package/styles/yfm.scss

@@ -5,7 +5,7 @@
     $root: &;
 
     @include text-size(body-3);
-    color: var(--yc-color-text-primary);
+    color: var(--g-color-text-primary);
 
     h1:first-child,
     h2:first-child,
@@ -38,7 +38,7 @@
             margin-bottom: $indentXS;
             margin-top: $indentM;
             padding-top: 0;
-            font-weight: var(--yc-text-header-font-weight);
+            font-weight: var(--g-text-header-font-weight);
         }
     }
 
@@ -68,50 +68,50 @@
     }
 
     code {
-        color: var(--yc-color-text-misc);
+        color: var(--g-color-text-misc);
     }
 
     pre > code {
-        color: var(--yc-color-text-primary);
+        color: var(--g-color-text-primary);
     }
 
     table {
-        color: var(--yc-color-text-primary);
-        border: 1px solid var(--yc-color-line-generic);
-        background: var(--yc-color-base-background);
+        color: var(--g-color-text-primary);
+        border: 1px solid var(--g-color-line-generic);
+        background: var(--g-color-base-background);
     }
 
     thead tr,
     table tr:nth-child(2n) {
-        background-color: var(--yc-color-base-generic);
+        background-color: var(--g-color-base-generic);
     }
 
     &_media {
         @include text-size(body-3);
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
     }
 
     &_breadcrumbs {
         @include text-size(body-2);
-        color: var(--yc-text-color-base);
+        color: var(--g-text-color-base);
     }
 
     a {
-        color: var(--yc-color-text-link);
+        color: var(--g-color-text-link);
 
         &:hover {
-            color: var(--yc-color-text-link-hover);
+            color: var(--g-color-text-link-hover);
         }
     }
 
     .yfm-tab {
         &:hover,
         &:active {
-            color: var(--yc-color-text-link-hover);
+            color: var(--g-color-text-link-hover);
         }
 
         &.active {
-            border-bottom-color: var(--yc-color-text-link);
+            border-bottom-color: var(--g-color-text-link);
         }
     }