@meduza/ui-kit-2 0.1.64 → 0.1.66

package/src/ToolbarButton/ToolbarButton.module.css

@@ -34,30 +34,36 @@
   opacity: 0.6;
 }
 
+.isDark,
 .dark {
   color: #fff;
 }
 
+.isDark:hover,
 .dark:hover {
   opacity: 0.6;
 }
 
+.isDark svg,
 .dark svg {
   color: #262626;
 
   fill: #fff;
 }
 
+.isDark.bookmark svg,
 .dark.bookmark svg {
   color: #fff;
 
   fill: transparent;
 }
 
+.isDark.bookmark.isActive svg,
 .dark.bookmark.isActive svg {
   fill: currentColor;
 }
 
+.isDark::before,
 .dark::before {
   border-left-color: rgba(255, 255, 255, 0.2);
 }
@@ -66,10 +72,12 @@
   visibility: hidden;
 }
 
+.isDark [data-theme='dark'],
 .dark [data-theme='dark'] {
   visibility: visible;
 }
 
+.isDark [data-theme='light'],
 .dark [data-theme='light'] {
   visibility: hidden;
 }

package/src/ToolbarButton/ToolbarButton.stories.tsx

@@ -12,11 +12,15 @@ export default {
   }
 }
 
-const Example: React.FC = () => {
+const Example: React.FC<{ theme?: string }> = ({ theme }) => {
   return (
     <>
       <div className={styles.root}>
-        <ToolbarButton type="fb" onClick={(): void => alert('Hello Button')}>
+        <ToolbarButton
+          type="fb"
+          theme={theme}
+          onClick={(): void => alert('Hello Button')}
+        >
           42
         </ToolbarButton>
       </div>
@@ -30,7 +34,7 @@ export const Default: React.FC = () => (
       <Example />
     </PreviewWrapper>
     <PreviewWrapper theme="dark">
-      <Example />
+      <Example theme="isDark" />
     </PreviewWrapper>
   </>
 )

package/src/_storybook/PreviewWrapper/PreviewWrapper.module.css

@@ -66,6 +66,8 @@
 
 /* set font-size as website */
 html {
+  font-size: 16px;
+
   @media (min-width: 1000px) {
     font-size: calc(100vw / 66.75);
   }
@@ -101,7 +103,7 @@ html {
 }
 
 .wrapper.dark {
-  color: #fff;
+  color: #b8b8b8;
   background-color: #1a1a1a;
 }
 
@@ -116,7 +118,6 @@ html {
   font-weight: bold;
 }
 
-
 h1,
 h2,
 h3,
@@ -129,4 +130,6 @@ h6 {
   font-weight: normal;
 }
 
-* { box-sizing: border-box; }
+* {
+  box-sizing: border-box;
+}

package/src/vars-games.css

@@ -0,0 +1,63 @@
+/* Colors */
+$gold: #b88b59;
+$platinum: #f5f5f5;
+$bronze: #9e784c;
+$highlighter: #fff3bc;
+$yellow: #fff9cd;
+$smoke: #ebebeb;
+$silver: #c0c0c0;
+$ash: #b3b3b3;
+$nikel: #757575;
+$jet: #1a1a1a;
+$sand: #a18c68;
+
+$fbColor: #304591;
+$vkColor: #527397;
+$twColor: #31adf4;
+$okColor: #eb722e;
+$tgColor: #2ba5e0;
+
+/* Fonts */
+$primaryFont: 'PF Regal', 'PF Regal Text Pro', 'Georgia', serif;
+$secondaryFont: 'Proxima Nova', 'Arial', 'Helvetica Neue', sans-serif;
+
+/* Gap */
+$gapLarge: 18px;
+$gapMedium: 15px;
+$gapSmall: 12px;
+
+/* Media */
+$mobile: only screen and
+  (
+    min-width: 32em
+  ); /*  512 */
+$contentWidth: only screen and
+  (
+    min-width: 40.625em
+  ); /*  650 */
+$portraitTablet: $contentWidth;
+$landscapeTablet: $contentWidth;
+$desktop: $contentWidth;
+$wideDesktop: $contentWidth;
+
+$mobileMax: only screen and
+  (
+    max-width: 32.1875em
+  ); /*  511 */
+$landscapeTabletMax: only screen and
+  (
+    max-width: 40,
+    5625em
+  ); /* 649 */
+
+/* Zindex */
+$zIndex-1: 100;
+$zIndex-2: 200;
+$zIndex-3: 300;
+$zIndex-4: 400;
+$zIndex-5: 500;
+$zIndex-6: 600;
+$zIndex-7: 700;
+$zIndex-8: 800;
+$zIndex-9: 900;
+$zIndex-10: 1000;