@gravity-ui/page-constructor 1.0.0

package/styles/mixins.scss

@@ -0,0 +1,444 @@
+@import 'node_modules/@gravity-ui/uikit/styles/mixins.scss';
+@import './variables.scss';
+
+//common
+
+@mixin text-size($name) {
+    font-size: var(--yc-text-#{$name}-font-size);
+    line-height: var(--yc-text-#{$name}-line-height);
+}
+
+@mixin link() {
+    @include islands-focus();
+
+    color: var(--yc-color-text-link);
+    text-decoration: none;
+    cursor: pointer;
+
+    &:hover,
+    &:active {
+        --pc-text-header-color: var(--yc-color-text-link-hover);
+        color: var(--yc-color-text-link-hover);
+    }
+}
+
+@mixin anchor($offset: 0px) {
+    display: block;
+    position: relative;
+    top: calc(-1 * var(--header-height) - #{$offset});
+    visibility: hidden;
+}
+
+@mixin mobile-scrollable($offset: $normalOffset) {
+    margin-left: -$offset;
+    padding-left: $offset;
+    padding-right: $offset;
+    width: calc(100% + #{$offset} * 2);
+    overflow-x: auto;
+
+    &::after {
+        content: '';
+        height: 1px;
+        padding-right: $offset;
+    }
+}
+
+@mixin add-file-ext-colors() {
+    @each $name, $value in $fileExtColors {
+        &_ext_#{$name} {
+            --pc-file-label-color: #{$value};
+        }
+    }
+}
+
+@mixin reset-button-style() {
+    display: inline-block;
+    margin: 0;
+    padding: 0;
+    font: inherit;
+    border: none;
+    outline: none;
+    color: inherit;
+    background: none;
+    cursor: pointer;
+}
+
+@mixin reset-link-style() {
+    color: inherit;
+    text-decoration: none;
+}
+
+@mixin reset-list-style() {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+}
+
+@mixin islands-focus() {
+    outline: none;
+
+    .utilityfocus &:focus {
+        outline: 2px solid #ffdb4d;
+    }
+}
+
+@mixin shadow-hover($pseudo: before) {
+    position: relative;
+
+    &::#{$pseudo} {
+        content: '';
+        position: absolute;
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: -1;
+
+        border-radius: inherit;
+        box-shadow: var(--shadow-offset-x, 0) var(--shadow-offset-y, 0) var(--shadow-blur, 10px)
+            var(--shadow-spread, 0) var(--shadow-color, --pc-color-sfx-shadow);
+        opacity: var(--shadow-opacity, 0.4);
+        transition: opacity ease-in var(--shadow-transition-time, 0.15s);
+    }
+}
+
+@mixin up-hover($color: var(--pc-color-sfx-shadow)) {
+    @include shadow-hover(before);
+
+    --shadow-offset-y: 5px;
+    --shadow-blur: 12px;
+    --shadow-color: #{$color};
+    --shadow-opacity: 0;
+
+    &:hover {
+        --shadow-opacity: 1;
+    }
+
+    .mobile &::before {
+        box-shadow: none;
+    }
+}
+
+@mixin header-link() {
+    @include link;
+
+    --pc-text-header-color: var(--yc-color-text-link);
+
+    &:hover,
+    &:active {
+        --pc-text-header-color: var(--yc-color-text-link-hover);
+    }
+}
+
+@mixin icon($size: 32px) {
+    width: $size;
+    height: $size;
+    background-size: cover;
+}
+
+@mixin top-content-offset($offset) {
+    top: calc(var(--header-height) + #{$offset});
+}
+
+@mixin label($size: m) {
+    @include text-size(body-1);
+
+    $label-height: 20px;
+
+    display: inline-block;
+    padding: 0 8px;
+    border-radius: 2px;
+    height: $label-height;
+    line-height: $label-height;
+
+    @if $size == s {
+        @include text-size(caption-2);
+
+        $label-height: 16px;
+
+        padding: 0 4px;
+        height: $label-height;
+        line-height: $label-height;
+    }
+}
+
+//constructor
+
+@mixin block {
+    margin-top: $indentL;
+    padding: 0 0 $indentL;
+
+    &:first-child {
+        margin-top: var(--pc-first-block-indent, #{$indentXXL});
+    }
+}
+
+@mixin add-theme() {
+    &_theme_dark {
+        color: var(--yc-color-text-light-primary);
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6,
+        .yfm {
+            color: var(--yc-color-text-light-primary);
+        }
+    }
+}
+
+@mixin justify() {
+    &_justify_center {
+        text-align: center;
+    }
+
+    &_justify_end {
+        text-align: right;
+    }
+}
+
+@mixin background() {
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+}
+
+@mixin shadow() {
+    @extend %shadow-hover;
+}
+
+%shadow {
+    box-shadow: 0px 4px 24px var(--pc-color-sfx-shadow), 0px 2px 8px var(--pc-color-sfx-shadow);
+}
+
+%shadow-hover {
+    @extend %shadow;
+
+    &:hover {
+        box-shadow: 0px 4px 24px var(--yc-color-sfx-shadow), 0px 2px 8px var(--yc-color-sfx-shadow);
+        cursor: pointer;
+    }
+}
+
+@mixin card-hover() {
+    transition: transform 0.3s ease-out;
+    &:hover {
+        transform: translateY(-8px);
+    }
+}
+
+@mixin image-shadow() {
+    box-shadow: 0 2px 8px var(--pc-color-sfx-shadow), 0 4px 24px var(--pc-color-sfx-shadow);
+    overflow-x: hidden;
+    border-radius: $borderRadius;
+}
+
+@mixin card($hover: false) {
+    min-height: 248px;
+    height: 100%;
+    overflow-x: hidden;
+    border-radius: $borderRadius;
+    background-color: var(--yc-color-base-float);
+
+    transition: box-shadow 0.3s $ease-out-cubic;
+
+    &_border_line {
+        border: 1px solid var(--yc-color-line-generic);
+    }
+
+    &_border_line,
+    &_border_none {
+        cursor: default;
+    }
+
+    &_border_shadow {
+        @extend %shadow;
+        @if $hover {
+            @include card-hover();
+            &:hover {
+                background-color: var(--pc-color-base-float-hover);
+            }
+        }
+    }
+}
+
+@mixin card-image {
+    margin: $imagePadding;
+    border-radius: calc(#{$borderRadius} - #{$imagePadding});
+}
+
+@mixin reset-link-hover {
+    &:hover,
+    &:active {
+        --pc-text-header-color: inherit;
+        color: inherit;
+    }
+}
+
+@mixin animate-wrap {
+    @media (min-width: map-get($gridBreakpoints, 'md')) {
+        &.#{$ns}AnimateBlock,
+        .#{$ns}AnimateBlock & {
+            @content;
+        }
+    }
+}
+
+@mixin animate($class: null, $delay: 0s) {
+    @include animate-wrap {
+        & #{$class} {
+            position: relative;
+            top: 100px;
+            opacity: 0;
+        }
+
+        &.animate #{$class} {
+            top: 0;
+            opacity: 1;
+            transition: top $transition, opacity $transition;
+            transition-delay: $delay;
+        }
+    }
+}
+
+@mixin animate-fade($class: null, $delay: 0s) {
+    @include animate-wrap {
+        & #{$class} {
+            opacity: 0;
+        }
+
+        &.animate #{$class} {
+            opacity: 1;
+            transition: opacity $transition;
+            transition-delay: $delay;
+        }
+    }
+}
+
+@mixin animate-slides($item-class, $delay: 0s) {
+    @include animate-wrap {
+        & #{$item-class} {
+            position: relative;
+            top: 100px;
+            opacity: 0;
+        }
+
+        &.animate {
+            #{$item-class} {
+                top: 0;
+                opacity: 1;
+                transition: top $transition, opacity $transition;
+            }
+
+            @for $i from 0 through 9 {
+                #{$item-class}:nth-child(#{$i}) {
+                    transition-delay: $i * 0.1s + $delay;
+                }
+            }
+        }
+    }
+}
+
+@mixin desktop-only() {
+    @media (max-width: map-get($gridBreakpoints, 'md') - 1) {
+        display: none;
+    }
+}
+
+@mixin desktop-tablet-only() {
+    @media (max-width: map-get($gridBreakpoints, 'sm') - 1) {
+        display: none;
+    }
+}
+
+@mixin mobile-tablet-only() {
+    @media (min-width: map-get($gridBreakpoints, 'md')) {
+        display: none;
+    }
+}
+
+@mixin mobile-only() {
+    @media (min-width: map-get($gridBreakpoints, 'sm')) {
+        display: none;
+    }
+}
+
+//typografy
+%heading-margin-reset {
+    margin: 0;
+}
+
+@mixin heading($name) {
+    @include text-size($name);
+    color: var(--pc-text-header-color);
+    @extend %heading-margin-reset;
+    @include text-accent();
+}
+
+@mixin heading1 {
+    @include heading(display-4);
+
+    @media (max-width: map-get($gridBreakpoints, 'sm')) {
+        @include text-size(display-2);
+    }
+}
+
+@mixin heading2 {
+    @include heading(display-2);
+
+    @media (max-width: map-get($gridBreakpoints, 'sm') - 1) {
+        @include text-size(display-1);
+    }
+}
+
+@mixin heading3 {
+    @include heading(header-2);
+}
+
+@mixin heading4 {
+    @include heading(header-1);
+}
+
+@mixin heading5 {
+    @include heading(body-3);
+}
+
+@mixin heading6 {
+    @include heading(body-3);
+}
+
+@mixin paragraph {
+    margin: 0 0 20px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+}
+
+/* use this for style redefinitions to awoid problems with
+unpredictable css rules order in build */
+
+@mixin add-specificity($class) {
+    @at-root {
+        #{$class}#{$class} {
+            @content;
+        }
+    }
+}
+
+@mixin slider-shadow-fix($class) {
+    @media (min-width: map-get($gridBreakpoints, 'sm')) {
+        @at-root {
+            //fix for hidden slider cards box-shadow overflow
+            .slick-slide:not(.slick-active) #{$class} {
+                box-shadow: none;
+            }
+        }
+    }
+}
+
+@mixin font-feature-settings {
+    font-feature-settings: 'liga', 'kern', 'pnum' on, 'lnum' on, 'ss03' on;
+}

package/styles/root.scss

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

package/styles/storybook/common.scss

@@ -0,0 +1,35 @@
+.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);
+        }
+    }
+}
+
+.pc-page-constructor {
+    --pc-first-block-mobile-indent: 32px;
+    --pc-first-block-indent: 64px;
+    margin-bottom: 120px;
+}

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 {
+    // to display in docs elements with z-index less than 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;
+}