.gitlab-ci.yml

@@ -7,7 +7,16 @@ stages:
  - test
  - build
  - prepare
- - deploy
+ - review
+ - deploy:staging
+ - deploy:canary
+ - deploy:production
+
+cache:
+ key: $CI_BUILD_REF_SLUG
+ paths:
+ - node_modules
+ policy: pull
 
 test:
  image: circleci/node:8-browsers
@@ -15,6 +24,11 @@ test:
  script:
  - npm install # Should be cached...
  - npm run test -- --no-watch --no-progress --browsers=ChromeHeadlessCI
+ cache:
+ key: $CI_BUILD_REF_SLUG
+ paths:
+ - node_modules
+ policy: pull-push
 
 build:review:
  stage: build
@@ -22,6 +36,7 @@ build:review:
  - npm install # TODO: Why is this needed?
  - npm run postinstall
  - npm install -g gulp-cli
+ - npm rebuild node-sass
  - gulp build.sass && gulp build.sass ##weird build needs to be run twice for now
  - sh build/base-locale.sh dist
  artifacts:
@@ -39,6 +54,7 @@ build:production:en:
  - npm install # TODO: Why is this needed?
  - npm run postinstall
  - npm install -g gulp-cli
+ - npm rebuild node-sass
  - gulp build.sass --deploy-url=https://cdn-assets.minds.com/front/dist/en && gulp build.sass --deploy-url=https://cdn-assets.minds.com/front/dist/en ##weird build needs to be run twice for now
  - sh build/base-locale.sh dist https://cdn-assets.minds.com/front/dist
  artifacts:
@@ -56,6 +72,7 @@ build:production:i18n:
  - npm install # TODO: Why is this needed?
  - npm run postinstall
  - npm install -g gulp-cli
+ - npm rebuild node-sass
  - gulp build.sass --deploy-url=https://cdn-assets.minds.com/front/dist/en && gulp build.sass --deploy-url=https://cdn-assets.minds.com/front/dist/en ##weird build needs to be run twice for now
  - sh build/i18n-locales-all.sh dist https://cdn-assets.minds.com/front/dist
  artifacts:
@@ -67,7 +84,7 @@ build:production:i18n:
  - master
  - test/gitlab-ci
 
-prepare:
+prepare:review:
  stage: prepare
  image: minds/ci:latest
  script:
@@ -81,8 +98,23 @@ prepare:
  - master
  - test/gitlab-ci
 
-deploy:review:
- stage: deploy
+prepare:production:
+ stage: prepare
+ image: minds/ci:latest
+ script:
+ - docker login -u gitlab-ci-token -p ${CI_BUILD_TOKEN} ${CI_REGISTRY} 
+ - docker build -t $CI_REGISTRY_IMAGE/front-init:$CI_BUILD_REF -f containers/front-init/Dockerfile dist/.
+ - docker push $CI_REGISTRY_IMAGE/front-init:$CI_BUILD_REF
+ only:
+ refs:
+ - master
+ - test/gitlab-ci
+ dependencies:
+ - build:production:en
+ - build:production:i18n
+
+review:start:
+ stage: review
  image: minds/helm-eks:latest
  script:
  - aws eks update-kubeconfig --name=sandbox
@@ -100,14 +132,14 @@ deploy:review:
  environment:
  name: review/$CI_COMMIT_REF_NAME
  url: https://$CI_BUILD_REF_SLUG.$KUBE_INGRESS_BASE_DOMAIN
- on_stop: deploy:review:stop
+ on_stop: review:stop
  except: 
  refs:
  - master
  - test/gitlab-ci
 
-deploy:review:stop:
- stage: deploy
+review:stop:
+ stage: review
  image: minds/helm-eks:latest
  script:
  - aws eks update-kubeconfig --name=sandbox
@@ -124,13 +156,73 @@ deploy:review:stop:
  - master
  - test/gitlab-ci
 
+staging:fpm:
+ stage: deploy:staging
+ image: minds/ci:latest
+ script:
+ - IMAGE_LABEL="staging"
+ ## Sync assets with CDN
+ - aws s3 sync dist $S3_REPOSITORY_URL
+ - $(aws ecr get-login --no-include-email --region us-east-1)
+ ## Update docker front-init container
+ - docker login -u gitlab-ci-token -p ${CI_BUILD_TOKEN} ${CI_REGISTRY} 
+ - docker pull $CI_REGISTRY_IMAGE/front-init:$CI_BUILD_REF
+ - docker tag $CI_REGISTRY_IMAGE/front-init:$CI_BUILD_REF $ECR_REPOSITORY_URL:$IMAGE_LABEL
+ - docker push $ECR_REPOSITORY_URL:$IMAGE_LABEL
+ ## Deploy the new container in rolling restart
+ - aws ecs update-service --service=$ECS_APP_STAGING_SERVICE --force-new-deployment --region us-east-1 --cluster=$ECS_CLUSTER
+ only:
+ refs:
+ - master
+ - test/gitlab-ci
+ dependencies:
+ - build:production:en
+ - build:production:i18n
+ environment:
+ name: staging
+ url: https://www.minds.com/?canary=1 # requires canary cookie
+
+deploy:canary:
+ stage: deploy:canary
+ image: minds/ci:latest
+ script:
+ - IMAGE_LABEL="canary"
+ ## Sync assets with CDN
+ - aws s3 sync dist $S3_REPOSITORY_URL
+ - $(aws ecr get-login --no-include-email --region us-east-1)
+ ## Update docker front-init container
+ - docker login -u gitlab-ci-token -p ${CI_BUILD_TOKEN} ${CI_REGISTRY} 
+ - docker pull $CI_REGISTRY_IMAGE/front-init:$CI_BUILD_REF
+ - docker tag $CI_REGISTRY_IMAGE/front-init:$CI_BUILD_REF $ECR_REPOSITORY_URL:$IMAGE_LABEL
+ - docker push $ECR_REPOSITORY_URL:$IMAGE_LABEL
+ ## Deploy the new container in rolling restart
+ - aws ecs update-service --service=$ECS_APP_CANARY_SERVICE --force-new-deployment --region us-east-1 --cluster=$ECS_CLUSTER
+ only:
+ refs:
+ - master
+ - test/gitlab-ci
+ dependencies:
+ - build:production:en
+ - build:production:i18n
+ environment:
+ name: canary
+ url: https://www.minds.com/?canary=1 # requires canary cookie
+ when: manual
+ allow_failure: false # prevents auto deploy to full production
 
 deploy:production:
- stage: deploy
+ stage: deploy:production
  image: minds/ci:latest
  script:
- - aws s3 sync dist $REPOSITORY_URL
- - aws ecs update-service --service=$SERVICE --force-new-deployment --region us-east-1 --cluster=$CLUSTER
+ - IMAGE_LABEL="production"
+ - $(aws ecr get-login --no-include-email --region us-east-1)
+ ## Update docker front-init container
+ - docker login -u gitlab-ci-token -p ${CI_BUILD_TOKEN} ${CI_REGISTRY} 
+ - docker pull $CI_REGISTRY_IMAGE/front-init:$CI_BUILD_REF
+ - docker tag $CI_REGISTRY_IMAGE/front-init:$CI_BUILD_REF $ECR_REPOSITORY_URL:$IMAGE_LABEL
+ - docker push $ECR_REPOSITORY_URL:$IMAGE_LABEL
+ ## Deploy the new container in rolling restart
+ - aws ecs update-service --service=$ECS_APP_PRODUCTION_SERVICE --force-new-deployment --region us-east-1 --cluster=$ECS_CLUSTER
  only:
  refs:
  - master
@@ -140,3 +232,6 @@ deploy:production:
  - build:production:i18n
  environment:
  name: production
+ url: https://www.minds.com
+ when: delayed
+ start_in: 2 hours # reduce? can always be deployed manually earlier too

src/app/common/components/android-app-download-button/button.component.scss

 .m-androidApp__download {
  box-sizing: border-box;
- border: 2px solid rgba(255,255,255,0.6);
  border-radius: 8px;
- background: #111;
+ @include m-theme(){
+ border: 1px solid rgba(themed($m-white-always), 0.7);
+ background: themed($m-black-always);
+ }
 
  display: block;
  position: relative;
  text-decoration: none;
 
  height: 48px;
- padding: 0 8px;
+ padding: 2px 8px 0 8px;
  margin: auto;
 
  cursor: pointer;
@@ -32,13 +34,13 @@
  -webkit-font-smoothing: antialiased;
 
  @include m-theme(){
- color: themed($m-white);
+ color: themed($m-white-always);
  }
  }
 
  i.material-icons {
  @include m-theme(){
- color: themed($m-white);
+ color: themed($m-white-always);
  }
  }
 }

src/app/modules/auth/register.component.scss

@@ -104,7 +104,6 @@
  padding:0;
  }
  .mdl-card__title{
- //color: #FFF !important;
  display:none;
  }
  .m-login-box input{

src/app/modules/channels/list.component.scss

@@ -3,7 +3,6 @@
  flex-direction: row;
  flex-wrap: row;
  flex-flow: row wrap;
- //background: #FFF;
  max-width: 1280px;
  margin: auto;
 

src/app/modules/channels/sorted/module.component.scss

@@ -42,9 +42,11 @@ m-channels--sorted-module {
  width: 100%;
  height: 100%;
  display: inline-block;
- background-color: #333;
  background-position: center center;
  background-size: cover;
+ @include m-theme(){
+ background-color: themed($m-grey-900);
+ }
  }
 
  > i.material-icons {
@@ -53,7 +55,9 @@ m-channels--sorted-module {
 
  &.m-mature-module-thumbnail {
  transform-style: preserve-3d;
- background-color: rgba(0, 0, 0, 0.65);
+ @include m-theme(){
+ background-color: rgba(themed($m-black), 0.65);
+ }
 
  > .m-channels--sorted-module__TileImage {
  filter: blur(5px) grayscale(100%);
@@ -68,7 +72,9 @@ m-channels--sorted-module {
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3em;
- color: #fff;
+ @include m-theme(){
+ color: themed($m-white);
+ }
  }
  }
  }

src/app/modules/forms/register/register.scss

@@ -22,7 +22,6 @@ minds-form-register{
 
  //this is exactly the same as modal.scss
  .m-fb-register-button{
- color: #3b5998;
  width: 170px;
  border: 0;
  cursor:pointer;
@@ -31,15 +30,18 @@ minds-form-register{
  padding: 0;
  margin: 0;
  margin-left: 8px;
- border: 1px solid #3b5998;
  @include m-theme(){
  background-color: themed($m-white);
+ color: themed($m-facebook);
+ border: 1px solid themed($m-facebook);
  }
 
  .m-social-icons-icon-inline{
- fill: #3b5998;
  vertical-align: middle;
  display: inline-block;
+ @include m-theme(){
+ fill: themed($m-facebook);
+ }
  }
 
  .m-signup-button-text{

src/app/modules/groups/list.component.scss

@@ -3,7 +3,6 @@
  flex-direction: row;
  flex-wrap: row;
  flex-flow: row wrap;
- //background: #FFF;
  max-width: 1280px;
  margin: auto;
 

src/app/modules/homepage/homepage.component.scss

@@ -92,8 +92,6 @@
  font-weight: 800;
  letter-spacing: 1.25px;
  line-height: 1;
- //color: rgba(255,255,255,0.85);
- //color: rgba(0,0,0,0.85);
 
  @media screen and (max-width: 720px){
  font-size: 42px;
@@ -102,7 +100,6 @@
 
  h3 {
  font-size: 26px;
- //color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  letter-spacing: 0.25px;
  line-height: 1.25;
@@ -131,7 +128,6 @@
  padding:0;
  }
  .mdl-card__title{
- //color: #FFF !important;
  display:none;
  }
  .m-login-box input{
@@ -142,7 +138,6 @@
  text-rendering: optimizeLegibility;
  font-family: 'Roboto', Helvetica, sans-serif;
  letter-spacing: 1px;
- //box-shadow: 0 0 6px rgba(255,255,255,0.22);
  @include m-theme(){
  background:rgba(themed($m-white),0.9);
  color:themed($m-grey-800);

src/app/modules/legacy/components/cards/activity/activity.component.scss

@@ -3,7 +3,7 @@
 }
 .m-pin-button {
  overflow: visible;
- 
+
  .m-tooltip--bubble {
  width:100px;
  }
@@ -93,11 +93,9 @@ minds-activity {
  line-height: 9px;
  border-radius: 3px;
  vertical-align: middle;
- //text-align: center;
  display: flex;
  justify-content: space-around;
  max-width: 300px;
- //box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.07), 0 4px 2px -2px rgba(0, 0, 0, 0.1), 0 1px 5px 0 rgba(0, 0, 0, 0.07);
 
  @include m-theme(){
  background-color: themed($m-white);

src/app/modules/legacy/components/social-icons/social-icons.scss

@@ -27,10 +27,14 @@
  }
  }
  .m-social-icons-icon--facebook .m-social-icons-icon-inline{
- background-color: #3067a3 !important;
+ @include m-theme(){
+ background-color: themed($m-facebook) !important;
+ }
  }
  .m-social-icons-icon--twitter .m-social-icons-icon-inline{
- background-color: #03b3ee !important;
+ @include m-theme(){
+ background-color: themed($m-twitter) !important;
+ }
  }
  .m-social-icons-icon--email .m-social-icons-icon-inline{
  @include m-theme(){
@@ -38,10 +42,14 @@
  }
  }
  .m-social-icons-icon--linkedin .m-social-icons-icon-inline{
- background-color: #0071a1 !important;
+ @include m-theme(){
+ background-color: themed($m-linkedin) !important;
+ }
  }
  .m-social-icons-icon--gplus .m-social-icons-icon-inline{
- background-color: #e15440 !important;
+ @include m-theme(){
+ background-color: themed($m-red) !important;
+ }
  }
  .m-social-icons-icon--embed .m-social-icons-icon-inline{
  @include m-theme(){

src/app/modules/marketing/marketing.component.scss

@@ -27,7 +27,7 @@
 
  .m-marketing--header-inner, .m-marketingHeader__inner,
  .m-marketing--hero-inner, .m-marketingHero__inner,
- .m-marketing--hero--inner { 
+ .m-marketing--hero--inner {
  display: flex;
  flex-direction: row;
  align-items: center;
@@ -95,7 +95,6 @@
 
  h3 {
  font-size: 26px;
- //color: rgba(255, 255, 255, 0.8);
  font-weight: 400;
  letter-spacing: 0.25px;
  line-height: 1.25;
@@ -407,7 +406,7 @@
  }
 
  .m-marketing--section--subsection-image {
- img { 
+ img {
  max-width: 100%;
  }
  }

src/app/modules/media/videos/list.component.scss

@@ -3,7 +3,6 @@
  flex-direction: row;
  flex-wrap: row;
  flex-flow: row wrap;
- //background: #FFF;
  max-width: 1280px;
  margin: auto;
 

src/app/modules/messenger/conversation/conversation.component.scss

@@ -46,7 +46,6 @@
  &.odd{
  text-align:left;
  .m-messenger--conversation-message-bubble{
- //color:#FFF !important;
  @include m-theme(){
  background-color: themed($m-blue-grey-100) !important;
  }

src/app/modules/modals/modal.scss

@@ -20,7 +20,6 @@ m-modal-signup, m-modal-signup-on-action{
  .mdl-card__title{
  flex-wrap: wrap;
  margin-bottom: 0;
- //padding-bottom: 0;
 
  img{
  width: 168px;

src/app/modules/modals/share/share.html

-<h3 i18n="@@M_SHARE__HEADER">Share what's on your Mind</h3>
+<h3 i18n="@@M_SHARE__HEADER">Share this post</h3>
 <div class="m-share__copyableLinkContainer">
  <div class="m-share__copyableLink m-border" [class.focused]="shareUrlFocused"
  (click)="applyFocus(shareUrlEl)"

src/app/modules/monetization/affiliate/link.component.scss

@@ -24,10 +24,14 @@
  padding:24px 0 0;
 
  .m-affiliate--link-buttons-twitter{
- background:#4099FF !important;
+ @include m-theme(){
+ background: themed($m-twitter) !important;
+ }
  }
  .m-affiliate--link-buttons-fb{
- background:#335795 !important;
+ @include m-theme(){
+ background: themed($m-facebook) !important;
+ }
  }
  .m-affiliate--link-buttons-email{
  @include m-theme(){

src/app/modules/newsfeed/feeds/tiles.component.scss

@@ -11,7 +11,9 @@ m-newsfeed__tiles {
  margin: auto;
 
  &.m-newsfeed__tiles--has-elements {
- background: #ffffff;
+ @include m-theme(){
+ background: themed($m-white);
+ }
  padding: 8px;
  }
 
@@ -24,7 +26,9 @@ m-newsfeed__tiles {
  margin: 4px;
  overflow: hidden;
  transform-style: preserve-3d;
- background-color: rgba(0, 0, 0, 0.65);
+ @include m-theme(){
+ background-color: rgba(themed($m-black), 0.65);
+ }
 
  &.m-newsfeed-tiles__Tile--is-mature > img {
  filter: blur(5px) grayscale(100%);
@@ -45,9 +49,11 @@ m-newsfeed__tiles {
  position: absolute;
  bottom: 4px;
  right: 4px;
- color: #fff;
- text-shadow: 1px 1px rgba(0, 0, 0, .35);
  pointer-events: none;
+ @include m-theme(){
+ color: themed($m-white);
+ text-shadow: 1px 1px rgba(themed($m-black), .35);
+ }
  }
 
  i.material-icons.mature-icon {
@@ -57,7 +63,9 @@ m-newsfeed__tiles {
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 3em;
- color: #fff;
+ @include m-theme(){
+ color: themed($m-white);
+ }
  }
  }
 }

src/app/modules/report/creator/creator.component.scss

@@ -19,12 +19,15 @@
  }
  border-radius: 24px;
  font-weight: 600;
- /* background: #fafafa; */
 
  &.m-reportCreatorSubjects__subject--active {
- border-color: #4690D6;
+ @include m-theme(){
+ border-color: themed($m-blue);
+ }
  span {
- color: #4690D6;
+ @include m-theme(){
+ color: themed($m-blue);
+ }
  }
  }
 
@@ -38,13 +41,17 @@
  text-rendering: optimizeLegibility;
  font-size: 16px;
  font-weight: 500;
- color: #555;
  cursor: pointer;
+ @include m-theme(){
+ color: themed($m-grey-700);
+ }
  }
 
  i {
- color: #888;
  display: none;
+ @include m-theme(){
+ color: themed($m-grey-400);
+ }
  }
 
  //&:last-child{

src/app/modules/report/juryduty/session/content.component.scss

 .m-juryDutySession__content {
- background: #FFF;
  padding: 16px;
+ @include m-theme(){
+ background: themed($m-white);
+ }
 
  h3 {
  margin: 0;

src/app/modules/report/juryduty/session/list.component.scss

@@ -4,13 +4,16 @@
  padding: 0;
 }
 .m-juryDutySessionList__item {
- margin-bottom: 16px; 
+ margin-bottom: 16px;
 }
 
 .m-juryDutySessionList__number {
  font-size: 56px;
  font-weight: 800;
- color: #444;
  padding: 32px;
  display: block;
+ @include m-theme(){
+ color: themed($m-grey-800);
+ }
+
 }

src/app/modules/report/juryduty/session/session.component.scss

 .m-juryDutySession__hero {
- background: #132552;
  padding: 42px 0;
  text-align: center;
+ @include m-theme(){
+ background: themed($m-blue-grey-800);
+ }
 
  i {
  font-size: 112px;
- color: #FFF;
+ @include m-theme(){
+ color: themed($m-white);
+ }
  }
 }
 
@@ -20,6 +24,8 @@
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
- color: #666;
+ @include m-theme(){
+ color: themed($m-grey-600);
+ }
  }
 }
\ No newline at end of file

src/app/modules/report/marketing/marketing.component.scss

 .m-reports__marketing {
 
- 
+
 
  .m-marketing__hero {
- background-color: #132552 !important;
  padding-bottom: 72px;
+ @include m-theme(){
+ background-color: themed($m-blue-grey-800) !important;
+ }
 
  .m-marketingHero__inner {
  padding-top: 0;
@@ -12,18 +14,22 @@
  }
 
  .m-btn {
- color: #FFF;
- border-color: #FFF;
  margin-top: 32px;
+ @include m-theme(){
+ color: themed($m-white);
+ border-color: themed($m-white);
+ }
  }
  }
 
  .m-marketingHero__actions {
  i {
- color: #FFF;
  font-size: 170px;
  text-align: center;
  width: 100%;
+ @include m-theme(){
+ color: themed($m-white);
+ }
  }
  }
 }
@@ -39,7 +45,9 @@
  letter-spacing: 2px;
  text-transform: uppercase;
  font-weight: 600;
- color: #666;
+ @include m-theme(){
+ color: themed($m-grey-600);
+ }
  }
 
  .m-layout__row {
@@ -56,8 +64,10 @@
  b {
  font-size: 72px;
  line-height: 1;
- color: #444;
  display: block;
+ @include m-theme(){
+ color: themed($m-grey-800);
+ }
  }
 
  span {
@@ -65,9 +75,11 @@
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-weight: 500;
- color: #555;
  margin-top: 16px;
  display: block;
+ @include m-theme(){
+ color: themed($m-grey-700);
+ }
  }
 
 }
@@ -76,15 +88,19 @@
  list-style: decimal;
  font-size: 24px;
  font-weight: 800;
- color: #aaa;
+ @include m-theme(){
+ color: themed($m-grey-200);
+ }
 
  li {
  padding: 16px;
 
  p {
  font-size: 24px;
- color: #555;
  font-weight: 500;
+ @include m-theme(){
+ color: themed($m-grey-700);
+ }
  }
  }
 
@@ -97,12 +113,14 @@
 
  li {
  width: 50%;
- color: #888;
  font-weight: 400;
  font-size: 16px;
  line-height: 24px;
  cursor: default;
  padding: 0;
+ @include m-theme(){
+ color: themed($m-grey-400);
+ }
 
  @media screen and (max-width: 890px) {
  width: 100%;

src/app/modules/search/search.component.scss

@@ -194,8 +194,6 @@ m-search--bar-suggestions{
 m-search {
  display: block;
  min-height: 100vh;
- //background-color: themed($m-white);
- //background: rgba(252,252,252,1);
  padding-top: 42px;
 
  .m-toolbar {

src/app/modules/third-party-networks/third-party-networks.scss

@@ -15,12 +15,12 @@
  text-decoration:none;
  }
 
- background-color: #3067a3 !important;
  padding:8px;
  font-weight:bold;
  cursor:pointer;
  @include m-theme(){
  color: themed($m-white);
+ background-color: themed($m-facebook) !important;
  }
 }
 

src/app/modules/wallet/balances/balance.component.scss

@@ -141,14 +141,18 @@ m-wallet--balance-money, m-wallet--balance-reward, m-wallet--balance-tokens {
  .m-btn--slim {
  height: 30px;
  margin: 0 0 0 28px;
- color: #888; 
+ @include m-theme(){
+ color: themed($m-grey-400);
+ }
  }
 
  p {
  text-align: left;
  margin: 0;
  padding: 0 8px;
- color: #666;
+ @include m-theme(){
+ color: themed($m-grey-600);
+ }
  }
 
 }

src/app/modules/wallet/tokens/referrals/links/links.component.scss

@@ -137,12 +137,6 @@
  }
  }
 
- .m-referralsLinks__shareButton {
- @include m-theme(){
- background-color: themed($m-blue);
- }
- }
-
  .m-referralsLinks__shareButton--twitter {
  @include m-theme() {
  background-color: themed($m-twitter);

src/stylesheets/components/components.scss

@@ -660,10 +660,10 @@ m-translate {
 
 svg.m-facebook-icon{
  cursor:pointer;
- background-color: #3067a3 !important;
  margin:auto;
  @include m-theme(){
  fill: themed($m-white);
+ background-color: themed($m-facebook) !important;
  }
 }
 

src/stylesheets/core/animations.scss

+@import 'themes';
+
 .m-pulsating--small {
- box-shadow: 0 0 0 red;
  animation: pulse--small 1.5s infinite;
+ @include m-theme(){
+ box-shadow: 0 0 0 themed($m-red);
+ }
 }
 
 .m-pulsating--big {
- box-shadow: 0 0 0 red;
  animation: pulse--big 2s infinite;
+ @include m-theme(){
+ box-shadow: 0 0 0 themed($m-red);
+ }
 }
 
 @keyframes pulse--small {
  20% {
- box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.6);
+ @include m-theme(){
+ box-shadow: 0 0 0 0 rgba(themed($m-red), 0.6);
+ }
  }
  99% {
- box-shadow: 0 0 0 7px rgba(244, 67, 54, 0);
+ @include m-theme(){
+ box-shadow: 0 0 0 7px rgba(themed($m-red), 0);
+ }
  }
  100% {
- box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
+ @include m-theme(){
+ box-shadow: 0 0 0 0 rgba(themed($m-red), 0);
+ }
  }
 }
 
 @keyframes pulse--big {
  0% {
- box-shadow: 0 0 0 0 rgba(244, 67, 54, 0.4);
+ @include m-theme(){
+ box-shadow: 0 0 0 0 rgba(themed($m-red), 0.4);
+ }
  }
  70% {
- box-shadow: 0 0 0 15px rgba(244, 67, 54, 0);
+ @include m-theme(){
+ box-shadow: 0 0 0 15px rgba(themed($m-red), 0);
+ }
  }
  100% {
- box-shadow: 0 0 0 0 rgba(244, 67, 54, 0);
+ @include m-theme(){
+ box-shadow: 0 0 0 0 rgba(themed($m-red), 0);
+ }
  }
 }

src/stylesheets/themes.scss

@@ -65,7 +65,14 @@ $red-light: #e57373;
 $black: #000;
 $white: #fff;
 
+$facebook: #3b5998;
+$messenger: #0084ff;
+$twitter: #03b3ee;
+$whatsapp: #25d366;
+$linkedin: #0071a1;
+
 // Theme maps
+// e.g. m-grey-100 in light mode will become m-grey-900 in dark mode
 $themes: (
  light: (
  m-grey-950: $grey-950,
@@ -105,19 +112,25 @@ $themes: (
  m-amber-light: $amber-light,
  m-red-dark: $red-dark,
  m-red: $red,
- m-red-light: $red-light, 
+ m-red-light: $red-light,
 
  m-black: $black,
  m-black-always: $black,
  m-white: $white,
- m-white-always: $white, 
+ m-white-always: $white,
  m-body-bg: #f8f8f8,
 
  m-warn-bg: $amber-light,
  m-warn-fg: $black,
+
+ m-facebook: $facebook,
+ m-messenger: $messenger,
+ m-twitter: $twitter,
+ m-whatsapp: $whatsapp,
+ m-linkedin: $linkedin,
  ),
  dark: (
- 
+
  m-grey-950: lighten($grey-50, $percent),
  m-grey-900: lighten($grey-100, $percent),
  m-grey-800: lighten($grey-200, $percent),
@@ -143,16 +156,16 @@ $themes: (
  m-blue-grey-200: lighten($blue-grey-800, $percent),
  m-blue-grey-100: lighten($blue-grey-900, $percent),
  m-blue-grey-50: lighten($blue-grey-950, $percent),
- 
+
  m-black: $white,
  m-black-always: $black,
  m-white: lighten($grey-990, $percent),
- m-white-always: $white, 
- m-body-bg: lighten(#080808, $percent), 
+ m-white-always: $white,
+ m-body-bg: lighten(#080808, $percent),
 
- m-blue-dark: lighten($blue-dark, $percent),
+ m-blue-dark: lighten($blue-bright, 15%),
  m-blue: $blue-bright,
- m-blue-light: lighten($blue-bright, 10%),
+ m-blue-light: $blue-dark,
  m-green-dark: lighten($green-dark, $percent),
  m-green: lighten($green, $percent),
  m-green-light: lighten($green-light, $percent),
@@ -165,6 +178,12 @@ $themes: (
 
  m-warn-bg: $grey-900,
  m-warn-fg: $white,
+
+ m-facebook: $facebook,
+ m-messenger: $messenger,
+ m-twitter: $twitter,
+ m-whatsapp: $whatsapp,
+ m-linkedin: $linkedin,
  ),
 );
 
@@ -218,3 +237,9 @@ $m-red-light: 'm-red-light';
 
 $m-warn-bg: 'm-warn-bg';
 $m-warn-fg: 'm-warn-fg';
+
+$m-facebook: 'm-facebook';
+$m-messenger: 'm-messenger';
+$m-twitter: 'm-twitter';
+$m-whatsapp: 'm-whatsapp';
+$m-linkedin: 'm-linkedin';