chore(project): add showcase theme, variables and mixins

src/App.tsx

@@ -2,7 +2,9 @@ import React from 'react';
 
 import Slider from './containers/Slider'
 
-function App() {
+import './styles/main.scss';
+
+function App () {
   return (
     <div className="App">
       <Slider />

src/components/Test/Test.module.scss

@@ -0,0 +1,4 @@
+.Test {
+  color: var(--primary-color);
+}
+

src/components/Test/Test.tsx

@@ -1,11 +1,13 @@
 import React from 'react';
 
-function Test() {
+import styles from './Test.module.scss';
+
+function Test () {
   return (
-    <div className="Test">
+    <div className={styles.Test}>
       <span>Test</span>
     </div>
   );
 }
 
-export default Test;
+export default Test;

src/styles/_theme.scss

@@ -0,0 +1,167 @@
+@use "variables";
+
+// Colors
+
+$primary-color: variables.$white !default;
+$secondary-color: variables.$blue !default;
+$success-color: variables.$green !default;
+$light-color: variables.$gray-lighter !default;
+$dark-color: #2b2c39 !default;
+
+$facebook-color: #3b5998 !default;
+$twitter-color: #55acee !default;
+
+// Body
+
+$body-bg-color: #141523 !default;
+$body-color: variables.$white !default;
+
+// Typography
+
+$body-font-family: Helvetica, Arial, sans-serif !default;
+$body-alt-font-family: Trebuchet MS, Helvetica, Arial, sans-serif !default;
+
+// Buttons
+
+$btn-primary-bg: $primary-color !default;
+$btn-primary-color: variables.$white !default;
+
+$btn-facebook-bg: #3b5998 !default;
+$btn-twitter-bg: #55acee !default;
+
+$btn-play-icon-color: $primary-color !default;
+$btn-play-border-color: variables.$white !default;
+
+$btn-icon-nested-color: $dark-color !default;
+$btn-icon-active-color: $primary-color !default;
+$btn-icon-nested-active-color: variables.$white !default;
+
+$btn-effect-bg: rgba(variables.$gray-light, 0.1) !default;
+
+// Card
+
+$card-watch-progress-color: $primary-color !default;
+$card-color: variables.$white !default;
+$card-border-hover-color: $primary-color !default;
+
+$card-info-color: #4a4a4a !default;
+
+$card-featured-info-color: variables.$white !default;
+
+$card-toast-primary-bg: $primary-color !default;
+$card-toast-primary-color: variables.$white !default;
+
+$card-toast-success-bg: $success-color !default;
+$card-toast-success-color: variables.$white !default;
+
+$card-menu-bg: variables.$black !default;
+
+$card-in-video-timeline-bg: $secondary-color !default;
+
+// CardSlider
+
+$card-slider-title-color: variables.$white !default;
+$card-slider-error-title-color: #979797 !default;
+$card-slider-button-color: variables.$white !default;
+$card-slider-button-hover-color: $card-slider-button-color !default;
+
+$card-slider-featured-bg: #111 !default;
+$card-slider-featured-button-color: variables.$white !default;
+$card-slider-featured-button-hover-color: $card-slider-featured-button-color !default;
+
+$card-slider-odd-bg-color: transparent !default;
+
+$card-slider-loading-bg: variables.$black !default;
+$card-slider-loading-card-bg: $secondary-color !default;
+
+$card-slider-error-bg: variables.$black !default;
+$card-slider-error-card-bg: $secondary-color !default;
+
+// CardGrid
+
+$card-grid-title-color: $secondary-color !default;
+
+// Cookies
+
+$cookies-title-color: $primary-color !default;
+$cookies-color: $dark-color !default;
+$cookies-bg: variables.$white !default;
+
+// Footer
+
+$footer-color: variables.$white !default;
+
+// Header
+
+$header-bg: transparent !default;
+$header-color: variables.$white !default;
+$header-fixed-shadow: 0 0 15px 0 rgba(variables.$black, 0.5) !default;
+
+$search-bg: $header-bg !default;
+$search-color: inherit !default;
+$search-border: 1px solid $light-color !default;
+
+// Modal
+
+$modal-bg: $light-color !default;
+$modal-color: variables.$black !default;
+
+// Offline
+
+$offline-bg: $primary-color !default;
+$offline-color: variables.$white !default;
+
+// Loading
+
+$loading-color: $primary-color !default;
+
+// Popups
+
+$popup-backdrop-bg: rgba(#000, 0.4) !default;
+$popup-bg: #20212d !default;
+$popup-color: variables.$white !default;
+
+$rail-button-block-bg: transparent !default;
+$rail-button-block-color: variables.$white !default;
+$rail-button-block-border-top: 1px solid variables.$white !default;
+
+// Scroll
+
+$scroll-track-bg: variables.$gray-darker !default;
+$scroll-indicator-bg: #7f899a !default;
+
+// Sidebar
+
+$sidebar-bg: #000 !default;
+$sidebar-color: variables.$white !default;
+
+// Toggle
+
+$toggle-default-color: #585858 !default;
+$toggle-checked-color: #adadad !default;
+$toggle-button-bg: variables.$white !default;
+
+// Toolbar
+
+$toolbar-bg: $dark-color !default;
+$toolbar-color: variables.$white !default;
+$toolbar-hover-color: $primary-color !default;
+$toolbar-nav-border: 1px solid lighten($toolbar-bg, 5%) !default;
+
+$row-inverse-bg: #444 !default;
+$row-inverse-color: variables.$white !default;
+
+// Video
+
+$video-layout-bg: transparent !default;
+
+// VideoDetails
+
+$video-details-bg: transparent !default;
+$video-details-color: variables.$white !default;
+
+$video-details-tag-bg: $dark-color !default;
+$video-details-tag-hover-bg: darken($dark-color, 5%) !default;
+$video-details-tag-color: variables.$white !default;
+$video-details-tag-hover-color: variables.$white !default;
+$video-details-tag-shadow: 0 1px 0 variables.$black !default;

src/styles/_variables.scss

@@ -0,0 +1,87 @@
+//
+// Colors
+// --------------------------------
+
+$white: #fff !default;
+$black: #000 !default;
+
+$gray-lighter: #eee !default;
+$gray-light: #d7dbe6 !default;
+$gray: #999 !default;
+$gray-dark: #363636 !default;
+$gray-darker: #292929 !default;
+$gray-alternate: #edeff3 !default;
+
+$red: #f42957 !default;
+$blue: #2b3b57 !default;
+$green: #393 !default;
+
+//
+// Base
+// --------------------------------
+
+$body-font-size: 16px !default;
+$base-spacing: 12px !default;
+$base-spacing-mobile: 8px !default;
+$base-spacing-heading: 20px !default;
+
+$container-width-mobile: 100% !default;
+$container-width-tablet: 685px !default;
+$container-width-desktop: 800px !default;
+
+//
+// Responsive
+// --------------------------------
+
+$mobile-max-width: 767px !default;
+$tablet-max-width: 1023px !default;
+
+$tablet-min-width: $mobile-max-width + 1 !default;
+$desktop-min-width: $tablet-max-width + 1 !default;
+
+//
+// Header
+// --------------------------------
+
+$header-height: 56px !default;
+$header-nav-width: 120px !default;
+$header-padding: 10px 56px !default;
+
+$header-height-mobile: 56px !default;
+$header-nav-width-mobile: 50px !default;
+
+$search-height: 70px !default;
+
+//
+// Toolbar
+// --------------------------------
+
+$toolbar-height: 50px !default;
+$toolbar-padding: 10px !default;
+$toolbar-nav-width: 60px !default;
+
+//
+// Toggle
+// --------------------------------
+
+$toggle-height: 23px !default;
+$toggle-width: 45px !default;
+$toggle-button-size: 25px !default;
+
+//
+// VideoLayout
+// --------------------------------
+
+$video-layout-width: 1024px !default;
+$video-layout-right-rail-width: 1280px !default;
+
+//
+// Z-index
+// --------------------------------
+
+$view-z-index: 5 !default;
+$loading-z-index: 10 !default;
+$header-z-index: 15 !default;
+$toolbar-z-index: 12 !default;
+$sidebar-z-index: 20 !default;
+$popups-z-index: 25 !default;

src/styles/main.scss

@@ -0,0 +1,11 @@
+@use "theme";
+
+:root {
+  --primary-color: #{theme.$primary-color};
+
+  --body-background-color: #{theme.$body-bg-color};
+}
+
+body {
+  background-color: var(--body-background-color);
+}

src/styles/mixins/_responsive.scss

@@ -0,0 +1,35 @@
+@mixin mobile-only {
+    @media screen and (max-width: $mobile-max-width) {
+        @content;
+    }
+}
+
+@mixin mobile-only-landscape {
+    @media screen and (max-width: $mobile-max-width) and (orientation: landscape) {
+        @content;
+    }
+}
+
+@mixin mobile-and-tablet {
+    @media screen and (max-width: $tablet-max-width) {
+        @content;
+    }
+}
+
+@mixin tablet-only {
+    @media screen and (min-width: $tablet-min-width) and (max-width: $tablet-max-width) {
+        @content;
+    }
+}
+
+@mixin tablet-and-larger {
+    @media screen and (min-width: $tablet-min-width) {
+        @content;
+    }
+}
+
+@mixin desktop-only {
+    @media screen and (min-width: $desktop-min-width) {
+        @content;
+    }
+}

src/styles/mixins/_utils.scss

@@ -0,0 +1,29 @@
+@mixin cover($width: 100%, $height: 100%) {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: $width;
+    height: $height;
+}
+
+@mixin center-self($top: 50%, $left: 50%) {
+
+    position: absolute;
+    top: $top;
+    left: $left;
+    transform: translate(-50%, -50%);
+}
+
+@mixin text-size-adjust($value: none) {
+    -webkit-text-size-adjust: $value;
+    -moz-text-size-adjust: $value;
+    -ms-text-size-adjust: $value;
+}
+
+@function rem($size-in-pixels) {
+    @return #{$size-in-pixels / $body-font-size}rem;
+}
+
+@function theme-name($name) {
+    @return 'jw-theme-#{$name}';
+}