@meduza/ui-kit-2 0.1.64 → 0.1.66

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.64",
+  "version": "0.1.66",
   "license": "MIT",
   "description": "UIKit for Meduza",
   "repository": "https://github.com/meduza-corp/ui-kit-2.git",

package/src/EmbedBlock/EmbedBlock.module.css

@@ -3,7 +3,7 @@
 .root {
   position: relative;
 
-  margin: 15px 0;
+  margin: calc(15rem / 16) 0;
 
   @media $mobile {
     margin: 25px 0 20px;

package/src/ListBlock/ListBlock.module.css

@@ -1,14 +1,14 @@
 @import '../vars.css';
 
 .root {
-  margin: 15px 0;
+  margin: calc(15rem / 16) 0;
   padding: 0;
 
   list-style: none;
 
   font-family: $primaryFont;
-  font-size: 18px;
-  line-height: 24px;
+  font-size: calc(18rem / 16);
+  line-height: calc(24rem / 16);
 
   @media $mobile {
     font-size: 20px;
@@ -129,8 +129,8 @@
 
 .isInImportantLead {
   font-family: $secondaryFont;
-  font-size: 16px;
-  line-height: 20px;
+  font-size: 1rem;
+  line-height: calc(20rem / 16);
 
   @media $portraitTablet {
     font-size: 17px;

package/src/MediaCaption/MediaCaption.module.css

@@ -17,14 +17,15 @@
 
 .caption {
   max-width: 520px;
-  padding-top: 4px;
+  padding-top: calc(4px / 16);
 
   color: $jet;
 
-  font-size: 14px;
-  line-height: 18px;
+  font-size: calc(14rem / 16);
+  line-height: calc(18rem / 16);
 
   @media $mobile {
+    padding-top: 4px;
     font-size: 16px;
     line-height: 22px;
   }
@@ -36,8 +37,8 @@
 
   color: #666;
 
-  font-size: 12px;
-  line-height: 16px;
+  font-size: calc(12rem / 16);
+  line-height: 1rem;
 
   @media $mobile {
     padding-top: 3px;
@@ -45,7 +46,11 @@
 }
 
 .credit:first-child {
-  padding-top: 3px;
+  padding-top: calc(3rem / 16);
+
+  @media $mobile {
+    padding-top: 3px;
+  }
 }
 
 .dark .caption {
@@ -58,7 +63,7 @@
 
 .video .caption,
 .picture .caption {
-  padding-top: 10px;
+  padding-top: calc(10rem / 16);
 
   @media $mobile {
     padding-top: 12px;
@@ -67,7 +72,7 @@
 
 .video .credit:first-child,
 .picture .credit:first-child {
-  padding-top: 9px;
+  padding-top: calc(9rem / 16);
 
   @media $mobile {
     padding-top: 11px;
@@ -82,4 +87,3 @@
 .desktop .caption {
   max-width: 650px;
 }
-

package/src/Meta/Meta.module.css

@@ -59,7 +59,8 @@
   fill: currentColor;
 }
 
-.dark {
+.dark,
+.isDark {
   color: rgba(0, 0, 0, 0.4);
 }
 
@@ -94,7 +95,6 @@
   }
 }
 
-
 /* VISIBILITY */
 
 .mobile {

package/src/QuoteBlock/QuoteBlock.module.css

@@ -3,12 +3,12 @@
 .root {
   position: relative;
 
-  margin-bottom: 14px;
-  padding-left: 18px;
+  margin-bottom: calc(14rem / 16);
+  padding-left: calc(18rem / 16);
 
   font-family: $primaryFont;
-  font-size: 18px;
-  line-height: 24px;
+  font-size: calc(18rem / 16);
+  line-height: calc(24rem / 16);
 
   @media $mobile {
     margin: 0 0 20px;
@@ -20,8 +20,8 @@
 }
 
 .root + .root {
-  margin-top: -14px;
-  padding-top: 14px;
+  margin-top: calc(-14rem / 16);
+  padding-top: calc(14rem / 16);
 
   @media $mobile {
     margin-top: -20px;

package/src/SimpleBlock/FootnoteLink.css

@@ -10,8 +10,9 @@ span[data-body] {
   white-space: pre-wrap;
 
   border-radius: 4px;
-  background: #F8F8F8;
-  box-shadow: inset 1px 0 $ash, inset 0 1px $ash, inset -1px 0 $ash, inset 0 -1px $ash;
+  background: #f8f8f8;
+  box-shadow: inset 1px 0 $ash, inset 0 1px $ash, inset -1px 0 $ash,
+    inset 0 -1px $ash;
 
   @media $portraitTablet {
     padding-bottom: 1px;
@@ -19,18 +20,9 @@ span[data-body] {
 }
 
 span[data-body]:hover {
-  background: #F3F3F3;
-  box-shadow: inset 1px 0 #999, inset 0 1px #999, inset -1px 0 #999, inset 0 -1px #999;
-}
-
-.dark span[data-body] {
-  background-color: #5B5B5B;
-  box-shadow: inset 1px 0 #8B8B8B, inset 0 1px #8B8B8B, inset -1px 0 #8B8B8B, inset 0 -1px #8B8B8B;
-}
-
-.dark span[data-body]:hover {
-  background-color: #5B5B5B;
-  box-shadow: inset 1px 0 #747474, inset 0 1px #747474, inset -1px 0 #747474, inset 0 -1px #747474;
+  background: #f3f3f3;
+  box-shadow: inset 1px 0 #999, inset 0 1px #999, inset -1px 0 #999,
+    inset 0 -1px #999;
 }
 
 span[data-highlight='true'],

package/src/SimpleBlock/SimpleBlock.module.css

@@ -5,8 +5,8 @@
   margin: 0 0 14px;
 
   font-family: $primaryFont;
-  font-size: 18px;
-  line-height: 24px;
+  font-size: calc(18rem / 16);
+  line-height: calc(24rem / 16);
 
   @media $mobile {
     margin: 0 0 20px;
@@ -58,12 +58,12 @@
 
 .h2 {
   max-width: 520px;
-  margin: 0 0 15px;
+  margin: 0 0 calc(15rem / 16);
 
   font-family: $primaryFont;
-  font-size: 25px;
+  font-size: calc(25rem / 16);
   font-weight: bold;
-  line-height: 28px;
+  line-height: calc(28rem / 16);
 
   @media $mobile {
     margin: 0 0 45px;
@@ -74,7 +74,7 @@
 }
 
 .h2 + figure {
-  margin-top: 15px;
+  margin-top: calc(15rem / 16);
 
   @media $mobile {
     margin-top: -20px;
@@ -82,13 +82,13 @@
 }
 
 .h3 {
-  margin-top: 29px;
-  margin-bottom: 10px;
+  margin-top: calc(29rem / 16);
+  margin-bottom: calc(10rem / 16);
 
   font-family: $secondaryFont;
-  font-size: 20px;
+  font-size: calc(20rem / 16);
   font-weight: bold;
-  line-height: 24px;
+  line-height: calc(24rem / 16);
 
   @media $mobile {
     margin-top: 45px;
@@ -100,13 +100,13 @@
 }
 
 .h4 {
-  margin-top: 26px;
-  margin-bottom: 11px;
+  margin-top: calc(26rem / 16);
+  margin-bottom: calc(11rem / 16);
 
   font-family: $secondaryFont;
-  font-size: 17px;
+  font-size: calc(17rem / 16);
   font-weight: bold;
-  line-height: 21px;
+  line-height: calc(21rem / 16);
 
   @media $mobile {
     margin-top: 45px;
@@ -123,7 +123,7 @@
 }
 
 .h3 + .h4 {
-  margin-top: 15px;
+  margin-top: calc(15rem / 16);
 
   @media $mobile {
     margin-top: 15px;
@@ -134,21 +134,24 @@
 .p + ol,
 .game.lead + ul,
 .game.lead + ol {
-  margin-top: -9px;
+  margin-top: calc(-9rem / 16);
+  @media $mobile {
+    margin-top: -9px;
+  }
 }
 
 .blockquote {
-  margin: 16px 0;
-  padding: 12px 12px 13px;
+  margin: 1rem 0;
+  padding: calc(12rem / 16) calc(12rem / 16) calc(13rem / 16);
 
   border: 1px solid rgba(0, 0, 0, 0.08);
   border-radius: 8px;
   background: #fff8c4;
 
   font-family: $secondaryFont;
-  font-size: 16px;
+  font-size: 1rem;
   font-weight: normal;
-  line-height: 22px;
+  line-height: calc(22rem / 16);
 
   @media $mobile {
     margin: 25px 0;
@@ -178,12 +181,12 @@
 .lead {
   position: relative;
 
-  margin-top: 30px;
+  margin-top: calc(30rem / 16);
   margin-bottom: 0;
 
   font-family: $secondaryFont;
-  font-size: 16px;
-  line-height: 22px;
+  font-size: 1rem;
+  line-height: calc(22rem / 16);
 
   @media $mobile {
     margin-top: 25px;
@@ -202,7 +205,7 @@
 
   width: 100%;
   max-width: 650px;
-  margin: 30px auto;
+  margin: calc(30rem / 16) auto;
 
   border-bottom: 1px solid #e5e5e5;
 
@@ -238,14 +241,15 @@ a mark {
 .context_p {
   position: relative;
 
-  margin: 0 0 15px;
-  padding: 0 0 0 23px;
+  margin: 0 0 calc(15rem / 16);
+  padding: 0 0 0 calc(23rem / 16);
 
   font-family: $primaryFont;
-  font-size: 18px;
-  line-height: 22px;
+  font-size: calc(18rem / 16);
+  line-height: calc(22rem / 16);
 
   @media $portraitTablet {
+    margin: 0 0 15px;
     padding: 0 0 0 38px;
 
     font-size: 20px;
@@ -265,7 +269,7 @@ a mark {
 
   color: $gold;
 
-  font-size: 18px;
+  font-size: calc(18rem / 16);
   line-height: inherit;
 
   @media $portraitTablet {
@@ -297,7 +301,7 @@ a mark {
 }
 
 .game.lead {
-  margin-bottom: 18px;
+  margin-bottom: calc(18rem / 16);
 
   @media $portraitTablet {
     margin-top: 27px;
@@ -309,7 +313,7 @@ a mark {
 }
 
 .slide.lead {
-  margin-bottom: 15px;
+  margin-bottom: calc(15rem / 16);
 
   @media $portraitTablet {
     margin-top: 20px;
@@ -326,8 +330,8 @@ a mark {
 
 .isInImportantLead {
   font-family: $secondaryFont;
-  font-size: 16px;
-  line-height: 22px;
+  font-size: 1rem;
+  line-height: calc(22rem / 16);
 
   @media $portraitTablet {
     font-size: 18px;
@@ -342,12 +346,12 @@ a mark {
 }
 
 .isInAnswer.p {
-  margin-top: 6px;
-  margin-bottom: 6px;
+  margin-top: calc(6rem / 16);
+  margin-bottom: calc(6rem / 16);
 
   font-family: $secondaryFont;
-  font-size: 16px;
-  line-height: 22px;
+  font-size: 1rem;
+  line-height: calc(22rem / 16);
 
   @media $portraitTablet {
     margin-top: 12px;
@@ -359,8 +363,8 @@ a mark {
 }
 
 .isInAnswer.blockquote {
-  margin-top: 12px;
-  margin-bottom: 12px;
+  margin-top: calc(12rem / 16);
+  margin-bottom: calc(12rem / 16);
 
   @media $portraitTablet {
     margin-top: 10px;
@@ -369,7 +373,7 @@ a mark {
 }
 
 .isInAnswer:first-child {
-  margin-top: 6px;
+  margin-top: calc(6rem / 16);
 }
 
 .isInAnswer:last-child {
@@ -391,3 +395,28 @@ a mark {
     display: block;
   }
 }
+
+/* Footnote dakr theme */
+.isDark span[data-body] {
+  background-color: #5b5b5b;
+  box-shadow: inset 1px 0 #8b8b8b, inset 0 1px #8b8b8b, inset -1px 0 #8b8b8b,
+    inset 0 -1px #8b8b8b;
+}
+
+.isDark span[data-body]:hover {
+  background-color: #5b5b5b;
+  box-shadow: inset 1px 0 #747474, inset 0 1px #747474, inset -1px 0 #747474,
+    inset 0 -1px #747474;
+}
+
+/* Theme */
+
+.blockquote.isDark {
+  color: inherit;
+  background-color: #34322a;
+}
+
+.blockquote.isDark a {
+  color: inherit;
+  box-shadow: inset 0 -1px #b88b59;
+}

package/src/SimpleBlock/SimpleBlock.stories.tsx

@@ -14,7 +14,7 @@ export default {
   }
 }
 
-const Example: React.FC = () => {
+const Example: React.FC<{ theme?: string }> = ({ theme }) => {
   return (
     <>
       <div className={styles.root}>
@@ -22,7 +22,7 @@ const Example: React.FC = () => {
           <SimpleBlock
             block={item}
             key={item.id}
-            styleContext={['no_mods', 'center', 'rich']}
+            styleContext={['no_mods', 'center', 'rich', theme]}
           />
         ))}
       </div>
@@ -36,7 +36,7 @@ export const Default: React.FC = () => (
       <Example />
     </PreviewWrapper>
     <PreviewWrapper theme="dark">
-      <Example />
+      <Example theme="isDark" />
     </PreviewWrapper>
   </>
 )

package/src/SimpleTitle/index.tsx

@@ -22,8 +22,8 @@ export const SimpleTitle: React.FC<SimpleTitleProps> = ({
   }
 
   return (
-    <div data-testid="simple-title" className={makeClassName(classNames)}>
+    <h1 data-testid="simple-title" className={makeClassName(classNames)}>
       {first}
-    </div>
+    </h1>
   )
 }

package/src/SourceBlock/SourceBlock.module.css

@@ -108,3 +108,18 @@
     display: block;
   }
 }
+
+/* Dark theme */
+.isDark,
+.isDark:hover {
+  background-color: #262626;
+  color: inherit;
+}
+
+.isDark .origin {
+  color: #b8b8b8;
+}
+
+.isDark footer {
+  border-top-color: #3d3d3d;
+}

package/src/SourceBlock/SourceBlock.stories.tsx

@@ -14,10 +14,10 @@ export default {
   }
 }
 
-const Example: React.FC = () => {
+const Example: React.FC<{ theme?: string }> = ({ theme }) => {
   return (
     <div className={styles.root}>
-      <SourceBlock block={mock} />
+      <SourceBlock styleContext={[theme]} block={mock} />
     </div>
   )
 }
@@ -28,7 +28,7 @@ export const Default: React.FC = () => (
       <Example />
     </PreviewWrapper>
     <PreviewWrapper theme="dark">
-      <Example />
+      <Example theme="isDark" />
     </PreviewWrapper>
   </>
 )

package/src/SvgSymbol/SvgSymbol.stories.module.css

@@ -2,21 +2,24 @@
   font-family: 'PF Regal';
   font-style: normal;
 
-  src: url('https://meduza.io/static/fonts/PFRegal/PFRegalTextPro-RegularB.woff') format('woff');
+  src: url('https://meduza.io/static/fonts/PFRegal/PFRegalTextPro-RegularB.woff')
+    format('woff');
 }
 
 @font-face {
   font-family: 'PF Regal';
   font-style: italic;
 
-  src: url('https://meduza.io/static/fonts/PFRegal/PFRegalTextPro-RegularBItalic.woff') format('woff');
+  src: url('https://meduza.io/static/fonts/PFRegal/PFRegalTextPro-RegularBItalic.woff')
+    format('woff');
 }
 
 @font-face {
   font-weight: bold;
   font-family: 'PF Regal';
 
-  src: url('https://meduza.io/static/fonts/PFRegal/PFRegalTextPro-Bold.woff') format('woff');
+  src: url('https://meduza.io/static/fonts/PFRegal/PFRegalTextPro-Bold.woff')
+    format('woff');
 }
 
 @font-face {
@@ -24,7 +27,8 @@
   font-family: 'PF Regal';
   font-style: italic;
 
-  src: url('https://meduza.io/static/fonts/PFRegal/PFRegalTextPro-BoldItalic.woff') format('woff');
+  src: url('https://meduza.io/static/fonts/PFRegal/PFRegalTextPro-BoldItalic.woff')
+    format('woff');
 }
 
 @font-face {
@@ -32,8 +36,10 @@
   font-family: 'Proxima Nova';
   font-style: normal;
 
-  src: url('https://meduza.io/static/fonts/ProximaNovaNew/ProximaNova-Regular.woff2') format('woff2'),
-    url('https://meduza.io/static/fonts/ProximaNovaNew/ProximaNova-Regular.woff') format('woff');
+  src: url('https://meduza.io/static/fonts/ProximaNovaNew/ProximaNova-Regular.woff2')
+      format('woff2'),
+    url('https://meduza.io/static/fonts/ProximaNovaNew/ProximaNova-Regular.woff')
+      format('woff');
 }
 
 @font-face {
@@ -41,8 +47,10 @@
   font-family: 'Proxima Nova';
   font-style: normal;
 
-  src: url('https://meduza.io/static/fonts/ProximaNovaNew/ProximaNova-Semibold.woff2') format('woff2'),
-    url('https://meduza.io/static/fonts/ProximaNovaNew/ProximaNova-Semibold.woff') format('woff');
+  src: url('https://meduza.io/static/fonts/ProximaNovaNew/ProximaNova-Semibold.woff2')
+      format('woff2'),
+    url('https://meduza.io/static/fonts/ProximaNovaNew/ProximaNova-Semibold.woff')
+      format('woff');
 }
 
 @font-face {
@@ -50,11 +58,15 @@
   font-family: 'Proxima Nova';
   font-style: normal;
 
-  src: url('https://meduza.io/static/fonts/ProximaNovaNew/ProximaNova-Bold.woff2') format('woff2'),
-    url('https://meduza.io/static/fonts/ProximaNovaNew/ProximaNova-Bold.woff') format('woff');
+  src: url('https://meduza.io/static/fonts/ProximaNovaNew/ProximaNova-Bold.woff2')
+      format('woff2'),
+    url('https://meduza.io/static/fonts/ProximaNovaNew/ProximaNova-Bold.woff')
+      format('woff');
 }
 
-* { box-sizing: border-box; }
+* {
+  box-sizing: border-box;
+}
 
 .row {
   display: flex;
@@ -67,7 +79,6 @@
   padding: 15px;
 }
 
-
 .root h2 {
   margin-bottom: 0;
   padding: 0 12px;
@@ -125,3 +136,8 @@
 
   fill: rgba(255, 255, 255, 0.7);
 }
+
+[data-theme='dark'] .icon {
+  background-color: #262626;
+  border-color: #1b1b1b;
+}

package/src/SvgSymbol/SvgSymbol.stories.tsx

@@ -41,9 +41,9 @@ const other: Icons[] = [
   'receipt'
 ]
 
-const Example: React.FC = () => {
+const Example: React.FC<{ theme?: string }> = ({ theme }) => {
   return (
-    <div className={styles.root}>
+    <div className={styles.root} data-theme={theme}>
       <h2>Кнопки соц. сетей и реакций</h2>
       <div className={styles.row}>
         {social.map((icon) => (
@@ -89,7 +89,7 @@ export const Default: React.FC = () => (
       <Example />
     </PreviewWrapper>
     <PreviewWrapper theme="dark">
-      <Example />
+      <Example theme="dark" />
     </PreviewWrapper>
   </>
 )

package/src/Toolbar/Toolbar.module.css

@@ -125,10 +125,11 @@
   }
 }
 
+.isDark .item::before,
 .dark .item::before {
   border-left-color: rgba(255, 255, 255, 0.2);
 }
 
-[data-context="prodano"] .root {
+[data-context='prodano'] .root {
   display: none;
 }

package/src/Toolbar/Toolbar.stories.tsx

@@ -41,7 +41,7 @@ const buttons: { type: ToolbarButtonTypes; label?: string }[] = [
   }
 ]
 
-const Example: React.FC = () => {
+const Example: React.FC<{ theme?: string }> = ({ theme }) => {
   const [bookmark, setBookmark] = useState(false)
   const handleButton = (type: string): void => {
     alert(type)
@@ -54,10 +54,11 @@ const Example: React.FC = () => {
   return (
     <>
       <div className={styles.root}>
-        <Toolbar>
+        <Toolbar styleContext={[theme]}>
           {buttons.map((button, index) => (
             <ToolbarButton
               type={button.type}
+              theme={theme}
               onClick={(): void =>
                 button.type === 'bookmark'
                   ? handleBookmark()
@@ -81,7 +82,7 @@ export const Default: React.FC = () => (
       <Example />
     </PreviewWrapper>
     <PreviewWrapper theme="dark">
-      <Example />
+      <Example theme="isDark" />
     </PreviewWrapper>
   </>
 )