sass-embedded

Signed-off-by: Sora Morimoto <[email protected]>
tc39 · Nov 8, 2024 · 5a4aca5 · 5a4aca5
1 parent fda9984
commit 5a4aca5
Show file tree

Hide file tree

Showing 13 changed files with 1,019 additions and 877 deletions.
diff --git a/_sass/_a11y.scss b/_sass/_a11y.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -15,7 +17,7 @@
 }
 
 .logo-box a:focus {
-  outline-color: $color-nav;
+  outline-color: variables.$color-nav;
 }
 
 .submenu {

diff --git a/_sass/_content.scss b/_sass/_content.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
 .main-content {
   padding: 50px 0;
   font-size: 1rem;
@@ -8,29 +10,29 @@
   h4,
   h5,
   h6 {
-    font-weight: $font-weight-semi-bold;
-    color: $color-text;
+    font-weight: variables.$font-weight-semi-bold;
+    color: variables.$color-text;
   }
 
   h3 {
     padding: 10px 15px;
     margin-right: -15px;
     margin-left: -15px;
     color: white;
-    background-color: $color-primary;
+    background-color: variables.$color-primary;
   }
 
   .section-headline {
     margin-top: 0;
     font-size: 2rem;
-    font-weight: $font-weight-semi-bold;
+    font-weight: variables.$font-weight-semi-bold;
   }
 
   p {
-    margin: 0 0 $spacing-paragraph;
+    margin: 0 0 variables.$spacing-paragraph;
   }
 
-  @media (min-width: $bp-tablet) {
+  @media (min-width: variables.$bp-tablet) {
     padding: 130px 0;
 
     .section-headline {
@@ -50,8 +52,8 @@
 }
 
 a {
-  font-weight: $font-weight-semi-bold;
-  color: $color-link;
+  font-weight: variables.$font-weight-semi-bold;
+  color: variables.$color-link;
 }
 
 .text-end {

diff --git a/_sass/_featurelist.scss b/_sass/_featurelist.scss
@@ -1,10 +1,12 @@
+@use "variables";
+
 .featurelist {
   &__item {
     padding: 0 1rem;
     margin-bottom: 1.125rem;
     font-size: 0.9em;
     background-color: white;
-    border-bottom: 1px solid $color-spacer;
+    border-bottom: 1px solid variables.$color-spacer;
 
     &__info {
       max-height: 0;
@@ -44,23 +46,23 @@
         margin-top: 0.5rem;
         font-weight: 550;
         color: white;
-        background-color: $color-dim-gray;
-        border: 2px solid $color-dim-gray;
+        background-color: variables.$color-dim-gray;
+        border: 2px solid variables.$color-dim-gray;
         border-radius: 10px;
       }
     }
     /* stylelint-disable-next-line no-descending-specificity */
     &__translation a {
-      background-color: $tag-translation;
-      border: 2px solid $tag-translation;
+      background-color: variables.$tag-translation;
+      border: 2px solid variables.$tag-translation;
       border-radius: 10px;
 
       &:focus {
-        color: $tag-translation;
+        color: variables.$tag-translation;
       }
 
       &:hover {
-        color: $tag-translation;
+        color: variables.$tag-translation;
       }
     }
 
@@ -71,7 +73,7 @@
       clear: both;
       list-style: none;
 
-      @media (min-width: $bp-tablet) {
+      @media (min-width: variables.$bp-tablet) {
         float: right;
         padding: 0 5px;
         margin-top: 0.5rem;
@@ -90,44 +92,44 @@
     }
     /* stylelint-disable-next-line no-descending-specificity */
     &__tests a {
-      background-color: $tag-tests;
-      border: 2px solid $tag-tests;
+      background-color: variables.$tag-tests;
+      border: 2px solid variables.$tag-tests;
       border-radius: 10px;
 
       &:focus {
-        color: $tag-tests;
+        color: variables.$tag-tests;
       }
 
       &:hover {
-        color: $tag-tests;
+        color: variables.$tag-tests;
       }
     }
     /* stylelint-disable-next-line no-descending-specificity */
     &__spec a {
-      background-color: $tag-spec;
-      border: 2px solid $tag-spec;
+      background-color: variables.$tag-spec;
+      border: 2px solid variables.$tag-spec;
       border-radius: 10px;
 
       &:focus {
-        color: $tag-spec;
+        color: variables.$tag-spec;
       }
 
       &:hover {
-        color: $tag-spec;
+        color: variables.$tag-spec;
       }
     }
     /* stylelint-disable-next-line no-descending-specificity */
     &__presented a {
-      background-color: $tag-presented;
-      border: 2px solid $tag-presented;
+      background-color: variables.$tag-presented;
+      border: 2px solid variables.$tag-presented;
       border-radius: 10px;
 
       &:focus {
-        color: $tag-presented;
+        color: variables.$tag-presented;
       }
 
       &:hover {
-        color: $tag-presented;
+        color: variables.$tag-presented;
       }
     }
 
@@ -197,7 +199,7 @@
       padding: 0;
       list-style: none;
 
-      @media (min-width: $bp-tablet) {
+      @media (min-width: variables.$bp-tablet) {
         padding-inline-start: 2em;
       }
     }

diff --git a/_sass/_grid.scss b/_sass/_grid.scss
@@ -1,15 +1,16 @@
 @use "sass:math";
+@use "variables";
 
 .intro {
-  margin: 0 math.div($grid-gutter, -2) (2 * $grid-gutter);
+  margin: 0 math.div(variables.$grid-gutter, -2) (2 * variables.$grid-gutter);
 
   [class*="g-col-"] {
-    padding: 0 math.div($grid-gutter, 2);
+    padding: 0 math.div(variables.$grid-gutter, 2);
   }
 }
 
 .g-row {
-  @media (min-width: $bp-tablet) {
+  @media (min-width: variables.$bp-tablet) {
     display: flex;
     flex-direction: row;
 

diff --git a/_sass/_layout.scss b/_sass/_layout.scss
@@ -1,4 +1,5 @@
 @use "sass:math";
+@use "variables";
 
 *,
 *::before,
@@ -15,15 +16,15 @@ body {
   margin: 0;
   font-family: "Open Sans", sans-serif;
   font-size: 16px;
-  font-weight: $font-weight-regular;
+  font-weight: variables.$font-weight-regular;
   line-height: 1.5;
-  background: $color-bg;
+  background: variables.$color-bg;
 }
 
 .container {
   width: 100%;
   max-width: 1280px;
-  padding: 0 math.div($grid-gutter, 2);
+  padding: 0 math.div(variables.$grid-gutter, 2);
   margin: 0 auto;
 }
 
@@ -33,7 +34,7 @@ body {
   line-height: 54px;
 }
 
-@media (min-width: $bp-tablet) {
+@media (min-width: variables.$bp-tablet) {
   .container {
     padding: 0 45px;
   }

diff --git a/_sass/_logo-box.scss b/_sass/_logo-box.scss
@@ -1,3 +1,5 @@
+@use "variables";
+
 .logo-box {
   z-index: 3;
   flex-shrink: 0;
@@ -8,7 +10,7 @@
     height: 90px;
   }
 
-  @media (min-width: $bp-tablet) {
+  @media (min-width: variables.$bp-tablet) {
     img {
       width: 120px;
       height: 120px;
@@ -25,7 +27,7 @@
     width: 120px;
   }
 
-  @media (min-width: $bp-tablet) {
+  @media (min-width: variables.$bp-tablet) {
     img {
       width: 120px;
     }

diff --git a/_sass/_page-footer.scss b/_sass/_page-footer.scss
@@ -1,8 +1,9 @@
 @use "sass:color";
+@use "variables";
 
 .synopsis {
   width: 100%;
-  padding: 0 4% $grid-gutter;
+  padding: 0 4% variables.$grid-gutter;
   overflow: auto;
   clear: both;
   font-weight: 400;
@@ -16,42 +17,44 @@
 
 .synopsis a,
 .synopsis h3 {
-  font-weight: $font-weight-regular;
+  font-weight: variables.$font-weight-regular;
 }
 
 .page-footer {
   width: 100%;
   min-height: 100px;
   font-size: 12px;
-  color: $color-dim-gray;
+  color: variables.$color-dim-gray;
 }
 
 .page-footer h3 {
   padding-bottom: 1em;
   margin-top: 1.25rem;
   margin-bottom: 1.25rem;
-  border-bottom: 1px solid color.mix($color-bg, $color-dim-gray, $weight: 80%);
+  border-bottom: 1px solid
+    color.mix(variables.$color-bg, variables.$color-dim-gray, $weight: 80%);
 }
 
-@media (min-width: $bp-tablet) {
+@media (min-width: variables.$bp-tablet) {
   .page-footer h3 {
     margin-top: 0;
   }
 
   .page-footer .synopsis .g-col-3:not(:last-child) {
-    padding-right: $grid-gutter;
-    border-right: solid 1px color.mix($color-bg, $color-dim-gray, $weight: 80%);
+    padding-right: variables.$grid-gutter;
+    border-right: solid 1px
+      color.mix(variables.$color-bg, variables.$color-dim-gray, $weight: 80%);
   }
 
   .page-footer .synopsis .g-col-3:not(:first-child) {
-    padding-left: $grid-gutter;
+    padding-left: variables.$grid-gutter;
   }
 }
 
 .page-footer a {
-  font-weight: $font-weight-regular;
+  font-weight: variables.$font-weight-regular;
   line-height: 24px;
-  color: $color-link;
+  color: variables.$color-link;
   text-decoration: underline;
 
   .icon {
@@ -61,13 +64,13 @@
   }
 
   .icon path {
-    fill: $color-dim-gray;
+    fill: variables.$color-dim-gray;
   }
 
   &:active .icon path,
   &:focus .icon path,
   &:hover .icon path {
-    fill: $color-link;
+    fill: variables.$color-link;
   }
 
   span {
@@ -97,10 +100,11 @@
 }
 
 .page-footer .grid-container {
-  padding: $grid-gutter 0;
+  padding: variables.$grid-gutter 0;
   margin: 0 auto;
   overflow: auto;
-  border-top: solid 1px color.mix($color-bg, $color-dim-gray, $weight: 80%);
+  border-top: solid 1px
+    color.mix(variables.$color-bg, variables.$color-dim-gray, $weight: 80%);
 }
 
 .page-footer .grid-start {
@@ -114,7 +118,7 @@
   text-align: center;
 }
 
-@media (min-width: $bp-tablet) {
+@media (min-width: variables.$bp-tablet) {
   .page-footer .grid-start {
     float: left;
     text-align: left;

diff --git a/_sass/_page-header.scss b/_sass/_page-header.scss
@@ -1,10 +1,12 @@
+@use "variables";
+
 .page-header {
   display: flex;
   flex-direction: row;
   align-items: flex-start;
   background: inherit;
 
-  @media (min-width: $bp-tablet) {
+  @media (min-width: variables.$bp-tablet) {
     $spacing: 30px;
 
     .page-menu {
@@ -17,7 +19,7 @@
     }
   }
 
-  @media (min-width: $bp-desktop) {
+  @media (min-width: variables.$bp-desktop) {
     $spacing: 90px;
 
     .page-menu {