@use 'not-actual-styles' as base

omega-takai · omega-takai · commit ec3c1b6f1cbd · 2020-04-28T23:21:33.000+09:00
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% {

Original file line number	Diff line number	Diff line change
`@@ -11,9 +11,9 @@`
`11`	`11`	`height: 90vh;`
`12`	`12`	`margin: 0 auto;`
`13`	`13`	`padding: {`
`14`		`- right: functions.pix-to-rem(16);`
	`14`	`+ right: base.pix-to-rem(16);`
`15`	`15`	`bottom: 5vh;`
`16`		`- left: functions.pix-to-rem(16);`
	`16`	`+ left: base.pix-to-rem(16);`
`17`	`17`	`}`
`18`	`18`	`}`
`19`	`19`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`.icon {`
`2`		`- margin-right: functions.pix-to-rem(8);`
	`2`	`+ margin-right: base.pix-to-rem(8);`
`3`	`3`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,3 +1,3 @@`
`1`	`1`	`.icon {`
`2`		`- margin-right: functions.pix-to-rem(4);`
	`2`	`+ margin-right: base.pix-to-rem(4);`
`3`	`3`	`}`
Original file line number	Diff line number	Diff line change
`@@ -7,11 +7,11 @@`
`7`	`7`	`left: 1.2em;`
`8`	`8`	`}`
`9`	`9`
`10`		`- font-size: functions.type-scale('subtitle');`
`11`		`- font-weight: functions.type-weight('subtitle');`
	`10`	`+ font-size: base.type-scale('subtitle');`
	`11`	`+ font-weight: base.type-weight('subtitle');`
`12`	`12`
`13`	`13`	`&.isActive {`
`14`		`- color: functions.colors('accent');`
	`14`	`+ color: base.colors('accent');`
`15`	`15`	`}`
`16`	`16`
`17`	`17`	`.icon {`
Original file line number	Diff line number	Diff line change
`@@ -11,14 +11,14 @@`
`11`	`11`	`height: 90vh;`
`12`	`12`	`margin: 0 auto;`
`13`	`13`	`padding: {`
`14`		`- right: functions.pix-to-rem(16);`
	`14`	`+ right: base.pix-to-rem(16);`
`15`	`15`	`bottom: 5vh;`
`16`		`- left: functions.pix-to-rem(16);`
	`16`	`+ left: base.pix-to-rem(16);`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`.nav {`
`20`	`20`	`margin: {`
`21`		`- top: functions.pix-to-rem(16);`
	`21`	`+ top: base.pix-to-rem(16);`
`22`	`22`	`}`
`23`	`23`	`}`
`24`	`24`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,5 +1,5 @@`
`1`	`1`	`.root {`
`2`		`- background-color: functions.colors('background');`
	`2`	`+ background-color: base.colors('background');`
`3`	`3`	`}`
`4`	`4`
`5`	`5`	`@mixin flash-animation {`
`@@ -16,7 +16,7 @@`
`16`	`16`
`17`	`17`	`@keyframes flashA {`
`18`	`18`	`0% {`
`19`		`- background-color: functions.colors('background');`
	`19`	`+ background-color: base.colors('background');`
`20`	`20`	`}`
`21`	`21`
`22`	`22`	`100% {`
`@@ -26,7 +26,7 @@`
`26`	`26`
`27`	`27`	`@keyframes flashB {`
`28`	`28`	`0% {`
`29`		`- background-color: functions.colors('background');`
	`29`	`+ background-color: base.colors('background');`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`100% {`