@use 'not-actual-styles' as base

omega-takai · Apr 28, 2020 · ec3c1b6 · ec3c1b6
1 parent 6eb4f23
commit ec3c1b6
Show file tree

Hide file tree

Showing 15 changed files with 65 additions and 68 deletions.
diff --git a/src/assets/style/global.scss b/src/assets/style/global.scss
@@ -1,8 +1,6 @@
 // Library =====================================
 @use 'destyle.css/destyle';
 
-@use 'not-actual-styles' as base;
-
 // Style Instance ==============================
 html {
   color: base.colors('font');

diff --git a/src/assets/style/layouts/error.scss b/src/assets/style/layouts/error.scss
@@ -11,9 +11,9 @@
     height: 90vh;
     margin: 0 auto;
     padding: {
-      right: functions.pix-to-rem(16);
+      right: base.pix-to-rem(16);
       bottom: 5vh;
-      left: functions.pix-to-rem(16);
+      left: base.pix-to-rem(16);
     }
   }
 

diff --git a/src/assets/style/not-actual-styles/_variables.scss b/src/assets/style/not-actual-styles/_variables.scss
@@ -60,21 +60,21 @@ $type-family: (
 );
 
 // Like a Modular Scale ========================
-@function pix-to-rem($Number) {
+@function variables-pix-to-rem($Number) {
   $ratio: 1 / $root-font-size; // default 0.1
   $computed: math.round($Number * $ratio * 1000) / 1000;
   @return #{$computed}rem;
 }
 
 $type-scale: (
-  'extra': pix-to-rem(177),
-  'h1': pix-to-rem(110),
-  'h2': pix-to-rem(68),
-  'h3': pix-to-rem(42),
-  'h4': pix-to-rem(26),
-  'subtitle': pix-to-rem(26),
-  'body': pix-to-rem(16),
-  'caption': pix-to-rem(10),
+  'extra': variables-pix-to-rem(177),
+  'h1': variables-pix-to-rem(110),
+  'h2': variables-pix-to-rem(68),
+  'h3': variables-pix-to-rem(42),
+  'h4': variables-pix-to-rem(26),
+  'subtitle': variables-pix-to-rem(26),
+  'body': variables-pix-to-rem(16),
+  'caption': variables-pix-to-rem(10),
 );
 
 $type-weight: (

diff --git a/src/components/Atom/BaseLinkButton/index.scss b/src/components/Atom/BaseLinkButton/index.scss
@@ -2,10 +2,10 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  min-width: functions.pix-to-rem(160);
+  min-width: base.pix-to-rem(160);
   max-width: 90vw;
-  min-height: functions.pix-to-rem(48);
-  padding: functions.pix-to-rem(8) functions.pix-to-rem(16);
+  min-height: base.pix-to-rem(48);
+  padding: base.pix-to-rem(8) base.pix-to-rem(16);
   line-height: 1.2;
 }
 
@@ -18,7 +18,7 @@
   // Extra
   white-space: pre-line;
   border: 1px solid $_color;
-  border-radius: functions.pix-to-rem(4);
+  border-radius: base.pix-to-rem(4);
 
   &:hover {
     color: white;

diff --git a/src/components/Atom/BaseLinkText/index.scss b/src/components/Atom/BaseLinkText/index.scss
@@ -15,7 +15,7 @@
 
   // Extra
   white-space: pre-line;
-  border-radius: functions.pix-to-rem(4);
+  border-radius: base.pix-to-rem(4);
   transition: transform 0.1s cubic-bezier(0.46, 0.03, 0.52, 0.96);
 
   &:hover {
@@ -31,13 +31,13 @@
 
 // Style Instance ===============
 .green {
-  @include link(#{functions.colors('green')});
+  @include link(#{base.colors('green')});
 }
 
 .grey {
-  @include link(#{functions.colors('inverted')});
+  @include link(#{base.colors('inverted')});
 }
 
 .white {
-  @include link(#{functions.colors('white')});
+  @include link(#{base.colors('white')});
 }
diff --git a/src/components/Atom/BaseNuxtLink/index.scss b/src/components/Atom/BaseNuxtLink/index.scss
@@ -15,7 +15,7 @@
 
   // Extra
   white-space: pre-line;
-  border-radius: functions.pix-to-rem(4);
+  border-radius: base.pix-to-rem(4);
   transition: transform 0.1s cubic-bezier(0.46, 0.03, 0.52, 0.96);
 
   &:hover {
@@ -31,13 +31,13 @@
 
 // Style Instance ===============
 .green {
-  @include link(#{functions.colors('green')});
+  @include link(#{base.colors('green')});
 }
 
 .grey {
-  @include link(#{functions.colors('inverted')});
+  @include link(#{base.colors('inverted')});
 }
 
 .white {
-  @include link(#{functions.colors('white')});
+  @include link(#{base.colors('white')});
 }
diff --git a/src/components/Atom/BaseTypography/index.scss b/src/components/Atom/BaseTypography/index.scss
@@ -2,9 +2,8 @@
   display: block;
   max-width: 100vw;
   line-height: 1.15;
-  color: functions.colors('font');
+  color: base.colors('font');
   word-wrap: break-word;
-  overflow-wrap: break-word;
 
   // Extra
   white-space: pre-line;
@@ -13,27 +12,27 @@
 .h1 {
   @include typography;
 
-  font-size: functions.type-scale('h1');
-  font-weight: functions.type-weight('h1');
+  font-size: base.type-scale('h1');
+  font-weight: base.type-weight('h1');
 }
 
 .h2 {
   @include typography;
 
-  font-size: functions.type-scale('h2');
-  font-weight: functions.type-weight('h2');
+  font-size: base.type-scale('h2');
+  font-weight: base.type-weight('h2');
 }
 
 .h3 {
   @include typography;
 
-  font-size: functions.type-scale('h3');
-  font-weight: functions.type-weight('h3');
+  font-size: base.type-scale('h3');
+  font-weight: base.type-weight('h3');
 }
 
 .h4 {
   @include typography;
 
-  font-size: functions.type-scale('h4');
-  font-weight: functions.type-weight('h4');
+  font-size: base.type-scale('h4');
+  font-weight: base.type-weight('h4');
 }
diff --git a/src/components/Atom/TheNuxtLogo/index.scss b/src/components/Atom/TheNuxtLogo/index.scss
@@ -36,7 +36,7 @@
     @include triangle(60, 35);
 
     border-right: 70px solid transparent;
-    border-bottom: 120px solid functions.colors('inverted');
+    border-bottom: 120px solid base.colors('inverted');
     border-left: 70px solid transparent;
     animation: go-right 0.5s linear forwards 3.5s;
   }
@@ -45,7 +45,7 @@
     @include triangle(120, 70);
 
     border-right: 35px solid transparent;
-    border-bottom: 60px solid functions.colors('background');
+    border-bottom: 60px solid base.colors('background');
     border-left: 35px solid transparent;
     animation: go-down 0.5s linear forwards 3s;
   }

diff --git a/src/components/Molecule/LinkButtonWithIcon/index.scss b/src/components/Molecule/LinkButtonWithIcon/index.scss
@@ -1,3 +1,3 @@
 .icon {
-  margin-right: functions.pix-to-rem(8);
+  margin-right: base.pix-to-rem(8);
 }
diff --git a/src/components/Molecule/LinkTextWithIcon/index.scss b/src/components/Molecule/LinkTextWithIcon/index.scss
@@ -1,3 +1,3 @@
 .icon {
-  margin-right: functions.pix-to-rem(4);
+  margin-right: base.pix-to-rem(4);
 }
diff --git a/src/components/Molecule/TheFooter/index.scss b/src/components/Molecule/TheFooter/index.scss
@@ -1,18 +1,18 @@
 .footer {
   padding: 3em 5em 1em;
-  font-size: functions.type-scale('body');
-  font-weight: functions.type-weight('body');
-  color: functions.colors('white');
-  background-color: functions.colors('inverted');
+  font-size: base.type-scale('body');
+  font-weight: base.type-weight('body');
+  color: base.colors('white');
+  background-color: base.colors('inverted');
 }
 
 .copy {
-  padding: functions.type-scale('body') 0;
-  margin-top: functions.type-scale('body');
-  font-size: functions.type-scale('caption');
-  font-weight: functions.type-weight('caption');
+  padding: base.type-scale('body') 0;
+  margin-top: base.type-scale('body');
+  font-size: base.type-scale('caption');
+  font-weight: base.type-weight('caption');
   text-align: center;
-  border-top: 1px solid functions.colors('whiteAlpha');
+  border-top: 1px solid base.colors('whiteAlpha');
 }
 
 .row {
@@ -22,7 +22,7 @@
   min-height: 2em;
 
   &:not(:first-of-type) {
-    margin-top: functions.pix-to-rem(4);
+    margin-top: base.pix-to-rem(4);
   }
 
   > dt {

diff --git a/src/components/Molecule/TheMobileFooter/index.scss b/src/components/Molecule/TheMobileFooter/index.scss
@@ -1,18 +1,18 @@
 .footer {
   padding: 3em 5em 1em;
-  font-size: functions.type-scale('body');
-  font-weight: functions.type-weight('body');
-  color: functions.colors('white');
-  background-color: functions.colors('inverted');
+  font-size: base.type-scale('body');
+  font-weight: base.type-weight('body');
+  color: base.colors('white');
+  background-color: base.colors('inverted');
 }
 
 .copy {
-  padding: functions.type-scale('body') 0;
-  margin-top: functions.type-scale('body');
-  font-size: functions.type-scale('caption');
-  font-weight: functions.type-weight('caption');
+  padding: base.type-scale('body') 0;
+  margin-top: base.type-scale('body');
+  font-size: base.type-scale('caption');
+  font-weight: base.type-weight('caption');
   text-align: center;
-  border-top: 1px solid functions.colors('whiteAlpha');
+  border-top: 1px solid base.colors('whiteAlpha');
 }
 
 .rowMobile {
@@ -23,7 +23,7 @@
   min-height: 2em;
 
   &:not(:first-of-type) {
-    margin-top: functions.pix-to-rem(8);
+    margin-top: base.pix-to-rem(8);
   }
 
   > dt {

diff --git a/src/components/Organism/BindNavigation/index.scss b/src/components/Organism/BindNavigation/index.scss
@@ -7,11 +7,11 @@
       left: 1.2em;
     }
 
-    font-size: functions.type-scale('subtitle');
-    font-weight: functions.type-weight('subtitle');
+    font-size: base.type-scale('subtitle');
+    font-weight: base.type-weight('subtitle');
 
     &.isActive {
-      color: functions.colors('accent');
+      color: base.colors('accent');
     }
 
     .icon {

diff --git a/src/components/Template/BaseLayout/index.scss b/src/components/Template/BaseLayout/index.scss
@@ -11,14 +11,14 @@
     height: 90vh;
     margin: 0 auto;
     padding: {
-      right: functions.pix-to-rem(16);
+      right: base.pix-to-rem(16);
       bottom: 5vh;
-      left: functions.pix-to-rem(16);
+      left: base.pix-to-rem(16);
     }
 
     .nav {
       margin: {
-        top: functions.pix-to-rem(16);
+        top: base.pix-to-rem(16);
       }
     }
   }

diff --git a/src/layouts/default.scss b/src/layouts/default.scss
@@ -1,5 +1,5 @@
 .root {
-  background-color: functions.colors('background');
+  background-color: base.colors('background');
 }
 
 @mixin flash-animation {
@@ -16,7 +16,7 @@
 
 @keyframes flashA {
   0% {
-    background-color: functions.colors('background');
+    background-color: base.colors('background');
   }
 
   100% {
@@ -26,7 +26,7 @@
 
 @keyframes flashB {
   0% {
-    background-color: functions.colors('background');
+    background-color: base.colors('background');
   }
 
   100% {