@gravity-ui/blog-constructor 1.0.0-aplha.0

package/styles/mixins.scss

@@ -0,0 +1,59 @@
+@import './variables.scss';
+@import '@gravity-ui/page-constructor/styles/mixins.scss';
+@import '@gravity-ui/uikit/styles/mixins.scss';
+
+@mixin paddings() {
+    &_padding-top {
+        &_xs {
+            padding-top: 0px;
+        }
+
+        &_s {
+            padding-top: $indentXS;
+        }
+
+        &_m {
+            padding-top: $indentM;
+        }
+
+        &_l {
+            padding-top: $indentL;
+        }
+
+        &_xl {
+            padding-top: $indentXL;
+        }
+    }
+
+    &_padding-bottom {
+        &_xs {
+            padding-bottom: 0px;
+        }
+
+        &_s {
+            padding-bottom: $indentXS;
+        }
+
+        &_m {
+            padding-bottom: $indentM;
+        }
+
+        &_l {
+            padding-bottom: $indentL;
+        }
+
+        &_xl {
+            padding-bottom: $indentXL;
+        }
+    }
+}
+
+@mixin monochromeButton() {
+    --yc-button-background-color: var(--pc-monochrome-button);
+    --yc-button-background-color-hover: var(--pc-monochrome-button-hover);
+    color: var(--yc-color-text-light-primary);
+
+    &:hover {
+        color: var(--yc-color-text-light-primary);
+    }
+}

package/styles/root.css

@@ -0,0 +1,21 @@
+:root {
+  --header-height: 64px;
+}
+
+.yc-root {
+  --yc-text-accent-font-weight: 500;
+  --bc-transparent: rgba(255, 255, 255, 0);
+  --bc-image-padding: 4px;
+  --bc-border-radius: var(--pc-border-radius, 24px);
+  --bc-color-sfx-shadow: var(--yc-color-base-simple-hover);
+  --bc-color-line-generic-active-solid: #b3b3b3;
+  --bc-color-base-float-hover: var(--yc-color-base-float);
+  --bc-monochrome-button: #262626;
+  --bc-monochrome-button-hover: #393939;
+  --bc-text-header-color: var(--yc-color-text-primary);
+}
+.yc-root.yc-root_theme_dark {
+  --bc-color-sfx-shadow: var(--yc-color-sfx-shadow);
+  --bc-color-line-generic-active-solid: #6c6c70;
+  --bc-color-base-float-hover: var(--yc-color-base-float-hover);
+}

package/styles/root.scss

@@ -0,0 +1,25 @@
+:root {
+    --header-height: 64px;
+}
+
+.yc-root {
+    --yc-text-accent-font-weight: 500;
+
+    // cross-browser transparent color
+    --bc-transparent: rgba(255, 255, 255, 0);
+    --bc-image-padding: 4px;
+
+    --bc-border-radius: var(--pc-border-radius, 24px);
+    --bc-color-sfx-shadow: var(--yc-color-base-simple-hover);
+    --bc-color-line-generic-active-solid: #b3b3b3;
+    --bc-color-base-float-hover: var(--yc-color-base-float);
+    --bc-monochrome-button: #262626;
+    --bc-monochrome-button-hover: #393939;
+    --bc-text-header-color: var(--yc-color-text-primary);
+
+    &.yc-root_theme_dark {
+        --bc-color-sfx-shadow: var(--yc-color-sfx-shadow);
+        --bc-color-line-generic-active-solid: #6c6c70;
+        --bc-color-base-float-hover: var(--yc-color-base-float-hover);
+    }
+}

package/styles/storybook/common.scss

@@ -0,0 +1,29 @@
+.demo-container {
+    min-height: calc(100vh - 1px);
+    padding: 50px;
+}
+
+.demo-header {
+    margin-bottom: 20px;
+    font-size: var(--yc-text-body-1-font-size);
+    font-weight: bold;
+    text-transform: uppercase;
+    color: var(--yc-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);
+}
+
+.demo-markdown {
+    .markdown-body {
+        padding: 20px;
+        color: var(--yc-color-text-primary);
+
+        a {
+            color: var(--yc-color-text-link);
+        }
+    }
+}

package/styles/storybook/index.scss

@@ -0,0 +1,21 @@
+// stylelint-disable declaration-no-important
+
+@import './common';
+@import './palette';
+@import './typography';
+@import '~@doc-tools/transform/dist/css/yfm.css';
+/**
+ * storybook-host container style overrides
+ * @see {@link https://github.com/philcockfield/storybook-host/issues/43}
+ */
+
+[data-css-18sl43g] {
+    font-family: inherit !important;
+    line-height: inherit !important;
+    background: none !important;
+}
+
+.docs-story {
+    // без этого в docs пропадают объекты с z-index меньше 0
+    z-index: 0 !important;
+}

package/styles/storybook/palette.scss

@@ -0,0 +1,75 @@
+.palette {
+    &__section {
+        margin: auto auto 40px;
+        position: relative;
+        z-index: 1;
+    }
+
+    &__section-message {
+        color: var(--yc-color-text-special);
+        margin-bottom: 10px;
+        margin-top: -10px;
+    }
+
+    &__section-content {
+        margin-left: -20px;
+        padding-left: 20px;
+        padding-bottom: 35px;
+        position: relative;
+        display: inline-flex;
+    }
+
+    &__section-contrast-layer {
+        z-index: -5;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        height: 135px;
+    }
+
+    &__color {
+        &-block {
+            &:not(:last-child) {
+                margin-right: 20px;
+            }
+            width: 118px;
+            height: 158px;
+        }
+
+        &-description {
+            margin-top: 8px;
+            height: 40px;
+            color: var(--yc-color-text-primary);
+            font-size: 13px;
+        }
+        &-caption {
+            opacity: 0.5;
+        }
+
+        &-value {
+            width: 118px;
+            height: 118px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            &_border_yes {
+                border: 1px solid var(--yc-color-line-generic);
+            }
+
+            &_skip_yes {
+                color: var(--yc-color-text-info);
+            }
+        }
+    }
+}
+
+.yc-root_theme_light .palette__section-contrast-layer {
+    background: #000;
+    opacity: 0.02;
+}
+
+.yc-root_theme_dark .palette__section-contrast-layer {
+    background: #323138;
+}

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,196 @@
+@import '~@gravity-ui/uikit/styles/styles.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;
+}

package/styles/styles.scss

@@ -0,0 +1,2 @@
+@import '~@gravity-ui/uikit/styles/styles.css';
+@import './fonts.scss';

package/styles/variables.scss

@@ -0,0 +1,7 @@
+@import '@gravity-ui/page-constructor/styles/variables.scss';
+
+$namespace: 'bc-';
+
+$borderRadius: var(--bc-border-radius);
+
+$headerSliderLargeBreakpoint: 1300px;

package/styles/yfm.css

@@ -0,0 +1,103 @@
+/* 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);
+}
+.yfm_blog h1:first-child,
+.yfm_blog h2:first-child,
+.yfm_blog h3:first-child,
+.yfm_blog h4:first-child {
+  padding: 0;
+  margin-top: 0;
+  padding-top: 0;
+}
+.yfm_blog h2 {
+  font-size: var(--yc-text-display-2-font-size);
+  line-height: var(--yc-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);
+}
+.yfm_blog h4 {
+  font-size: var(--yc-text-header-1-font-size);
+  line-height: var(--yc-text-header-1-line-height);
+}
+.yfm_blog h1,
+.yfm_blog h2,
+.yfm_blog h3,
+.yfm_blog h4,
+.yfm_blog h5,
+.yfm_blog h6 {
+  margin-bottom: 16px;
+  margin-top: 48px;
+  padding-top: 0;
+  font-weight: var(--yc-text-header-font-weight);
+}
+.yfm_blog blockquote,
+.yfm_blog dl,
+.yfm_blog ol,
+.yfm_blog p,
+.yfm_blog pre,
+.yfm_blog table,
+.yfm_blog ul {
+  margin: 0 0 16px;
+}
+.yfm_blog img {
+  margin-bottom: 32px;
+  margin-top: 16px;
+  border-radius: 24px;
+}
+.yfm_blog hr {
+  height: 1px;
+}
+.yfm_blog ol,
+.yfm_blog ul {
+  padding-left: 1.4em;
+}
+.yfm_blog code {
+  color: var(--yc-color-text-misc);
+}
+.yfm_blog pre > code {
+  color: var(--yc-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);
+}
+.yfm_blog thead tr,
+.yfm_blog table tr:nth-child(2n) {
+  background-color: var(--yc-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);
+}
+.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);
+}
+.yfm_blog a {
+  color: var(--yc-color-text-link);
+}
+.yfm_blog a:hover {
+  color: var(--yc-color-text-link-hover);
+}
+.yfm_blog .yfm-tab:hover, .yfm_blog .yfm-tab:active {
+  color: var(--yc-color-text-link-hover);
+}
+.yfm_blog .yfm-tab.active {
+  border-bottom-color: var(--yc-color-text-link);
+}
+.yfm_blog .yfm-clipboard {
+  margin: 32px 0;
+}
+
+.yfm_blog_card p {
+  color: var(--pc-text-header-color);
+}