@gravity-ui/page-constructor 3.16.0 → 4.0.0

package/styles/storybook/common.scss

@@ -5,25 +5,25 @@
 
 .demo-header {
     margin-bottom: 20px;
-    font-size: var(--yc-text-body-1-font-size);
+    font-size: var(--g-text-body-1-font-size);
     font-weight: bold;
     text-transform: uppercase;
-    color: var(--yc-color-text-primary);
+    color: var(--g-color-text-primary);
 }
 
 .demo-description {
     margin-bottom: 25px;
-    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);
 }
 
 .demo-markdown {
     .markdown-body {
         padding: 20px;
-        color: var(--yc-color-text-primary);
+        color: var(--g-color-text-primary);
 
         a {
-            color: var(--yc-color-text-link);
+            color: var(--g-color-text-link);
         }
     }
 }

package/styles/storybook/palette.scss

@@ -6,7 +6,7 @@
     }
 
     &__section-message {
-        color: var(--yc-color-text-special);
+        color: var(--g-color-text-brand);
         margin-bottom: 10px;
         margin-top: -10px;
     }
@@ -40,7 +40,7 @@
         &-description {
             margin-top: 8px;
             height: 40px;
-            color: var(--yc-color-text-primary);
+            color: var(--g-color-text-primary);
             font-size: 13px;
         }
         &-caption {
@@ -55,21 +55,21 @@
             justify-content: center;
 
             &_border_yes {
-                border: 1px solid var(--yc-color-line-generic);
+                border: 1px solid var(--g-color-line-generic);
             }
 
             &_skip_yes {
-                color: var(--yc-color-text-info);
+                color: var(--g-color-text-info);
             }
         }
     }
 }
 
-.yc-root_theme_light .palette__section-contrast-layer {
+.g-root_theme_light .palette__section-contrast-layer {
     background: #000;
     opacity: 0.02;
 }
 
-.yc-root_theme_dark .palette__section-contrast-layer {
+.g-root_theme_dark .palette__section-contrast-layer {
     background: #323138;
 }

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/styles.css

@@ -6,14 +6,14 @@ unpredictable css rules order in build */
 /* use this for style redefinitions to awoid problems with
 unpredictable css rules order in build */
 .yfm_constructor {
-  font-family: var(--yc-font-family-sans);
-  color: var(--yc-color-text-primary);
+  font-family: var(--g-font-family-sans);
+  color: var(--g-color-text-primary);
 }
 .yfm_constructor code,
 .yfm_constructor kbd,
 .yfm_constructor pre {
-  font-family: var(--yc-font-family-monospace);
-  color: var(--yc-color-text-primary);
+  font-family: var(--g-font-family-monospace);
+  color: var(--g-color-text-primary);
 }
 .yfm_constructor.yfm_constructor h1,
 .yfm_constructor.yfm_constructor h2,
@@ -24,11 +24,11 @@ unpredictable css rules order in build */
 .yfm_constructor.yfm_constructor span,
 .yfm_constructor.yfm_constructor p,
 .yfm_constructor.yfm_constructor li {
-  color: var(--yc-color-text-primary);
+  color: var(--g-color-text-primary);
 }
 .yfm_constructor.yfm_constructor_notice li,
 .yfm_constructor.yfm_constructor_notice p {
-  color: var(--yc-color-text-secondary);
+  color: var(--g-color-text-secondary);
 }
 .yfm_constructor.yfm_constructor ul,
 .yfm_constructor.yfm_constructor ol,
@@ -47,7 +47,7 @@ unpredictable css rules order in build */
 }
 
 .yfm_constructor_theme_dark p {
-  color: var(--yc-color-text-light-primary);
+  color: var(--g-color-text-light-primary);
 }
 .yfm_constructor_list_style ul {
   padding-left: 20px;
@@ -63,7 +63,7 @@ unpredictable css rules order in build */
 }
 .yfm_constructor a {
   outline: none;
-  color: var(--yc-color-text-link);
+  color: var(--g-color-text-link);
   text-decoration: none;
   cursor: pointer;
 }
@@ -71,17 +71,17 @@ unpredictable css rules order in build */
   outline: 2px solid #ffdb4d;
 }
 .yfm_constructor a:hover, .yfm_constructor a:active {
-  --pc-text-header-color: var(--yc-color-text-link-hover);
-  color: var(--yc-color-text-link-hover);
+  --pc-text-header-color: var(--g-color-text-link-hover);
+  color: var(--g-color-text-link-hover);
 }
 .yfm_constructor 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_constructor thead,
 .yfm_constructor table tr:nth-child(2n) {
-  background-color: var(--yc-color-base-generic);
+  background-color: var(--g-color-base-generic);
 }
 
 .yfm_constructor_table {
@@ -97,7 +97,7 @@ unpredictable css rules order in build */
   background-color: transparent !important;
 }
 .yfm_constructor_table tbody tr {
-  border-top: 1px solid var(--yc-color-line-generic);
+  border-top: 1px solid var(--g-color-line-generic);
 }
 .yfm_constructor_table td,
 .yfm_constructor_table th {

package/styles/variables.scss

@@ -36,14 +36,6 @@ $animationDuration: 300ms;
 
 //colors
 $videoPlayButtonGrey: #eff2f8;
-$fileExtColors: (
-    'pdf': var(--yc-color-promo-highlight-tomato),
-    'doc': var(--yc-color-promo-highlight-sky),
-    'xls': var(--yc-color-promo-highlight-mint),
-    'ppt': var(--yc-color-promo-highlight-copper),
-    'fig': var(--yc-color-promo-highlight-neon),
-    'zip': var(--yc-color-promo-highlight-asphalt),
-);
 
 //grid
 $newContentWidth: 1232px;

package/styles/yfm.scss

@@ -4,14 +4,14 @@
 
 .yfm_constructor {
     $block: &;
-    font-family: var(--yc-font-family-sans);
-    color: var(--yc-color-text-primary);
+    font-family: var(--g-font-family-sans);
+    color: var(--g-color-text-primary);
 
     code,
     kbd,
     pre {
-        font-family: var(--yc-font-family-monospace);
-        color: var(--yc-color-text-primary);
+        font-family: var(--g-font-family-monospace);
+        color: var(--g-color-text-primary);
     }
 
     @include add-specificity(&) {
@@ -24,13 +24,13 @@
         span,
         p,
         li {
-            color: var(--yc-color-text-primary);
+            color: var(--g-color-text-primary);
         }
 
         &_notice {
             li,
             p {
-                color: var(--yc-color-text-secondary);
+                color: var(--g-color-text-secondary);
             }
         }
 
@@ -57,7 +57,7 @@
 
     &_theme_dark {
         p {
-            color: var(--yc-color-text-light-primary);
+            color: var(--g-color-text-light-primary);
         }
     }
 
@@ -81,14 +81,14 @@
     }
 
     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,
     table tr:nth-child(2n) {
-        background-color: var(--yc-color-base-generic);
+        background-color: var(--g-color-base-generic);
     }
 }
 
@@ -108,7 +108,7 @@
     }
 
     tbody tr {
-        border-top: 1px solid var(--yc-color-line-generic);
+        border-top: 1px solid var(--g-color-line-generic);
     }
 
     td,