@doyourjob/gravity-ui-page-constructor-addons 2.1.8

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(--g-text-body-2-font-size);
+
+            #{$block}__item + #{$block}__item {
+                margin-top: 12px;
+            }
+        }
+    }
+
+    &__value {
+        display: inline;
+    }
+
+    &__caption {
+        display: inline-block;
+        width: 180px;
+        color: var(--g-color-text-secondary);
+        font-size: var(--g-text-body-font-size);
+        text-transform: uppercase;
+    }
+
+    &__item {
+        cursor: copy;
+    }
+
+    &__item_name {
+        // font-sizes
+        &_body .demo-typography__value {
+            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(--g-text-body-2-font-size);
+            line-height: var(--g-text-body-2-line-height);
+        }
+
+        &_body-3 .demo-typography__value {
+            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(--g-text-subheader-3-font-size);
+            line-height: var(--g-text-subheader-3-line-height);
+        }
+
+        &_header .demo-typography__value {
+            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(--g-text-header-2-font-size);
+            line-height: var(--g-text-header-2-line-height);
+        }
+
+        &_display1 .demo-typography__value {
+            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(--g-text-display-2-font-size);
+            line-height: var(--g-text-display-2-line-height);
+        }
+
+        &_display3 .demo-typography__value {
+            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(--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(--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(--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(--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(--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(--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(--g-font-family-monospace);
+        }
+    }
+
+    &__item_deprecated {
+        text-decoration: line-through;
+    }
+}

package/styles/styles.css

@@ -0,0 +1 @@
+@import '~@doyourjob/gravity-ui-page-constructor/styles/styles.css';

package/styles/styles.scss

@@ -0,0 +1 @@
+@import '~@doyourjob/gravity-ui-page-constructor/styles/styles.css';

package/styles/variables.scss

@@ -0,0 +1,3 @@
+@import 'node_modules/@doyourjob/gravity-ui-page-constructor/styles/variables.scss';
+
+$ns: 'pc-addons-';