@gravity-ui/page-constructor 1.0.0

package/styles/storybook/typography.scss

@@ -0,0 +1,139 @@
+.demo-typography {
+    $block: &;
+
+    &__block + &__block {
+        margin-top: 80px;
+    }
+
+    &__block_type {
+        &_font-sizes {
+            #{$block}__item + #{$block}__item {
+                margin-top: 24px;
+            }
+        }
+
+        &_text-contrasts,
+        &_font-families {
+            font-size: var(--yc-text-body-2-font-size);
+
+            #{$block}__item + #{$block}__item {
+                margin-top: 12px;
+            }
+        }
+    }
+
+    &__value {
+        display: inline;
+    }
+
+    &__caption {
+        display: inline-block;
+        width: 180px;
+        color: var(--yc-color-text-secondary);
+        font-size: var(--yc-text-body-font-size);
+        text-transform: uppercase;
+    }
+
+    &__item {
+        cursor: copy;
+    }
+
+    &__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);
+        }
+
+        &_body-2 .demo-typography__value {
+            font-size: var(--yc-text-body-2-font-size);
+            line-height: var(--yc-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);
+        }
+
+        &_lead .demo-typography__value {
+            font-size: var(--yc-text-subheader-3-font-size);
+            line-height: var(--yc-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);
+        }
+
+        &_title .demo-typography__value {
+            font-size: var(--yc-text-header-2-font-size);
+            line-height: var(--yc-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);
+        }
+
+        &_display2 .demo-typography__value {
+            font-size: var(--yc-text-display-2-font-size);
+            line-height: var(--yc-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);
+        }
+
+        &_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);
+        }
+
+        &_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);
+        }
+
+        &_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);
+        }
+
+        &_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);
+        }
+
+        &_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);
+        }
+
+        &_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-families
+        &_monospace .demo-typography__value {
+            font-family: var(--yc-font-family-monospace);
+        }
+    }
+
+    &__item_deprecated {
+        text-decoration: line-through;
+    }
+}

package/styles/styles.css

@@ -0,0 +1,301 @@
+@charset "UTF-8";
+@import '~@gravity-ui/uikit/styles/styles.css';
+@import '~@doc-tools/transform/dist/css/yfm.css';
+@font-face {
+  font-family: "YS Display";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/display-thin.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/display-thin.woff") format("woff");
+  font-weight: 100;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Display";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/display-light.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/display-light.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Display";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/display-regular.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/display-regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Display";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/display-medium.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/display-medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Display";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/display-bold.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/display-bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Display";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/display-heavy.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/display-heavy.woff") format("woff");
+  font-weight: 900;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Text";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/text-light.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/text-light.woff") format("woff");
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Text";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/text-light-italic.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/text-light-italic.woff") format("woff");
+  font-weight: 300;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Text";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/text-regular.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/text-regular.woff") format("woff");
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Text";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/text-regular-italic.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/text-regular-italic.woff") format("woff");
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Text";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/text-medium.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/text-medium.woff") format("woff");
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Text";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/text-medium-italic.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/text-medium-italic.woff") format("woff");
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Text";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/text-bold.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/text-bold.woff") format("woff");
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: "YS Text";
+  src: url("https://yastatic.net/s3/home/fonts/ys/1/text-bold-italic.woff2") format("woff2"), url("https://yastatic.net/s3/home/fonts/ys/1/text-bold-italic.woff") format("woff");
+  font-weight: 700;
+  font-style: italic;
+  font-display: swap;
+}
+.YSDisplay-Thin {
+  font-family: "YS Display", sans-serif;
+  font-weight: 100;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.YSDisplay-Light {
+  font-family: "YS Display", sans-serif;
+  font-weight: 300;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.YSDisplay-Regular {
+  font-family: "YS Display", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.YSDisplay-Medium {
+  font-family: "YS Display", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.YSDisplay-Bold {
+  font-family: "YS Display", sans-serif;
+  font-weight: 700;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.YSDisplay-Heavy {
+  font-family: "YS Display", sans-serif;
+  font-weight: 900;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.YSText-Light {
+  font-family: "YS Text", sans-serif;
+  font-weight: 300;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.YSText-LightItalic {
+  font-family: "YS Text", sans-serif;
+  font-weight: 300;
+  font-style: italic;
+  font-stretch: normal;
+}
+
+.YSText-Regular {
+  font-family: "YS Text", sans-serif;
+  font-weight: 400;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.YSText-RegularItalic {
+  font-family: "YS Text", sans-serif;
+  font-weight: 400;
+  font-style: italic;
+  font-stretch: normal;
+}
+
+.YSText-Medium {
+  font-family: "YS Text", sans-serif;
+  font-weight: 500;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.YSText-MediumItalic {
+  font-family: "YS Text", sans-serif;
+  font-weight: 500;
+  font-style: italic;
+  font-stretch: normal;
+}
+
+.YSText-Bold {
+  font-family: "YS Text", sans-serif;
+  font-weight: 700;
+  font-style: normal;
+  font-stretch: normal;
+}
+
+.YSText-BoldItalic {
+  font-family: "YS Text", sans-serif;
+  font-weight: 700;
+  font-style: italic;
+  font-stretch: normal;
+}
+
+/* use this for style redefinitions to awoid problems with
+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);
+}
+.yfm_constructor code,
+.yfm_constructor kbd,
+.yfm_constructor pre {
+  font-family: var(--yc-font-family-monospace);
+}
+.yfm_constructor.yfm_constructor h1,
+.yfm_constructor.yfm_constructor h2,
+.yfm_constructor.yfm_constructor h3,
+.yfm_constructor.yfm_constructor h4,
+.yfm_constructor.yfm_constructor h5,
+.yfm_constructor.yfm_constructor h6,
+.yfm_constructor.yfm_constructor span,
+.yfm_constructor.yfm_constructor p,
+.yfm_constructor.yfm_constructor li {
+  color: var(--yc-color-text-primary);
+}
+.yfm_constructor.yfm_constructor_notice li,
+.yfm_constructor.yfm_constructor_notice p {
+  color: var(--yc-color-text-secondary);
+}
+.yfm_constructor.yfm_constructor p,
+.yfm_constructor.yfm_constructor li {
+  margin: 0 0 12px;
+}
+.yfm_constructor.yfm_constructor p strong {
+  font-weight: 500;
+}
+
+.yfm_constructor_theme_dark p {
+  color: var(--yc-color-text-light-primary);
+}
+.yfm_constructor_footnote_text p, .yfm_constructor_footnote_page p {
+  opacity: 0.5;
+}
+.yfm_constructor_footnote_text p {
+  font-size: var(--yc-text-body-2-font-size);
+  line-height: var(--yc-text-body-2-line-height);
+}
+.yfm_constructor_footnote_page p {
+  font-size: var(--yc-text-body-1-font-size);
+  line-height: var(--yc-text-body-1-line-height);
+  display: inline;
+}
+.yfm_constructor_list_style ul {
+  padding-left: 20px;
+}
+.yfm_constructor_list_style_dash ul {
+  list-style-type: none;
+  position: relative;
+}
+.yfm_constructor_list_style_dash ul li:before {
+  content: "—";
+  position: absolute;
+  margin-left: -20px;
+}
+.yfm_constructor a {
+  outline: none;
+  color: var(--yc-color-text-link);
+  text-decoration: none;
+  cursor: pointer;
+}
+.utilityfocus .yfm_constructor a:focus {
+  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);
+}
+
+.yfm_constructor_table table {
+  border: 0;
+  table-layout: fixed;
+}
+.yfm_constructor_table thead,
+.yfm_constructor_table tr {
+  background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
+}
+.yfm_constructor_table tbody tr {
+  border-top: 1px solid var(--yc-color-line-generic);
+}
+.yfm_constructor_table td,
+.yfm_constructor_table th {
+  min-width: 120px;
+  width: 120px;
+  box-sizing: content-box;
+  white-space: inherit !important; /* stylelint-disable-line declaration-no-important */
+}
+.yfm_constructor_table td:first-child,
+.yfm_constructor_table th:first-child {
+  min-width: 172px;
+  width: 172px;
+}
+.yfm_constructor_table th {
+  text-align: left !important; /* stylelint-disable-line declaration-no-important */
+}

package/styles/styles.scss

@@ -0,0 +1,5 @@
+@import '~@gravity-ui/uikit/styles/styles.css';
+@import './fonts.scss';
+@import './mixins.scss';
+@import './variables.scss';
+@import './yfm.scss';

package/styles/variables.scss

@@ -0,0 +1,61 @@
+//common
+
+$ns: 'pc-';
+$borderRadius: var(--pc-border-radius);
+$imagePadding: var(--pc-image-padding);
+
+//indents
+$indentXXXS: 8px;
+$indentXXS: 12px;
+$indentXS: 16px;
+$indentS: 20px;
+$indentSM: 24px;
+$indentM: 32px;
+$indentL: 48px;
+$indentXL: 64px;
+$indentXXL: 96px;
+$indentXXXL: 128px;
+$indent4XL: 160px;
+$normalOffset: 20px;
+$contentMargin: $indentM;
+
+$contentLiftIndent: $indentXL;
+$contentLiftIndentMobile: $indentM;
+
+//slider
+$sliderArrowSize: 42px;
+$headerSliderLargeBreakpoint: 1410px;
+
+//animation
+$ease-out-quadratic: cubic-bezier(0.25, 0.46, 0.45, 0.94);
+$ease-out-cubic: cubic-bezier(0.22, 0.61, 0.36, 1);
+$transition: 0.8s $ease-out-quadratic;
+$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;
+$gridBreakpoints: (
+    'sm': 577px,
+    'md': 769px,
+    'lg': 1081px,
+    'xl': 1185px,
+    'xxl': 1248px,
+);
+
+$gridGutter: 8px;
+$gridContainerPadding: 40px;
+$gridGutterMobile: 8px;
+$contentWidth: calc(#{$newContentWidth} + #{$gridGutter} * 2 + #{$gridContainerPadding} * 2);
+
+$gridContainerMargin: 16px;

package/styles/yfm.scss

@@ -0,0 +1,119 @@
+@import '~@doc-tools/transform/dist/css/yfm.css';
+@import './mixins.scss';
+@import './variables.scss';
+
+.yfm_constructor {
+    $block: &;
+    font-family: var(--yc-font-family-sans);
+
+    code,
+    kbd,
+    pre {
+        font-family: var(--yc-font-family-monospace);
+    }
+
+    @include add-specificity(&) {
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        span,
+        p,
+        li {
+            color: var(--yc-color-text-primary);
+        }
+
+        &_notice {
+            li,
+            p {
+                color: var(--yc-color-text-secondary);
+            }
+        }
+
+        p,
+        li {
+            margin: 0 0 $indentXXS;
+        }
+
+        p strong {
+            font-weight: 500;
+        }
+    }
+
+    &_theme_dark {
+        p {
+            color: var(--yc-color-text-light-primary);
+        }
+    }
+
+    &_footnote_text p,
+    &_footnote_page p {
+        opacity: 0.5;
+    }
+
+    &_footnote_text p {
+        @include text-size(body-2);
+    }
+
+    &_footnote_page p {
+        @include text-size(body-1);
+        display: inline;
+    }
+
+    &_list_style ul {
+        padding-left: $indentS;
+    }
+
+    &_list_style_dash ul {
+        list-style-type: none;
+        position: relative;
+
+        li:before {
+            content: '\2014';
+            position: absolute;
+            margin-left: -$indentS;
+        }
+    }
+
+    a {
+        @include link();
+    }
+}
+
+.yfm_constructor_table {
+    $firstColumnWidth: 172px;
+    $columnWidth: 120px;
+
+    table {
+        border: 0;
+        table-layout: fixed;
+    }
+
+    thead,
+    tr {
+        background-color: transparent !important; /* stylelint-disable-line declaration-no-important */
+    }
+
+    tbody tr {
+        border-top: 1px solid var(--yc-color-line-generic);
+    }
+
+    td,
+    th {
+        min-width: $columnWidth;
+        width: $columnWidth;
+        box-sizing: content-box;
+        white-space: inherit !important; /* stylelint-disable-line declaration-no-important */
+
+        &:first-child {
+            min-width: $firstColumnWidth;
+            width: $firstColumnWidth;
+        }
+    }
+
+    th {
+        text-align: left !important; /* stylelint-disable-line declaration-no-important */
+    }
+}