Merge pull request #11417 from kodadot/main

(beta): 64% of February 2025 Jackfruit 🍈

Author: vikiival

.github/diagram.svg

@@ -2,16 +2,6 @@
   font-family: monospace;
 }
 
-.text__stroked {
-  -webkit-text-stroke-width: 2px;
-  padding: 0 8px 0 0;
-  @include ktheme() {
-    color: theme('k-primary');
-    -webkit-text-fill-color: theme('black');
-    -webkit-text-stroke-color: theme('k-primary');
-  }
-}
-
 .heading {
   display: flex;
   flex-direction: column;
@@ -62,13 +52,9 @@
   blockquote,
   strong,
   pre:not(.hljs) {
-    @include ktheme() {
-      color: theme('text-color');
-    }
+    color: var(--text-color);
   }
   blockquote {
-    @include ktheme() {
-      background-color: theme('background-color');
-    }
+    background-color: var(--background-color);
   }
 }

assets/styles/base/_typography.scss

@@ -2,46 +2,33 @@
   text-transform: uppercase;
   font-weight: 400;
   transition: all 0.3s;
-
-  @include ktheme() {
-    color: theme('text-color');
-    background-color: theme('background-color');
-  }
+  color: rgb(var(--text-color));
+  background-color: var(--background-color);
 }
 
 .button.is-text {
   &:hover {
     border: none;
-    @include ktheme() {
-      background-color: theme('k-hovergrey');
-    }
+    background-color: var(--link-hover);
   }
 
   &:focus {
-    @include ktheme() {
-      background-color: theme('k-hovergrey');
-    }
+    background-color: var(--link-hover);
     border: none;
   }
 }
 
 button.button.is-bordered {
-  @include ktheme() {
-    border-top: 2px solid theme('k-primary') !important;
-  }
+  border-top: 2px solid var(--k-primary) !important;
 }
 
 button.button.is-bordered-light {
   border-color: transparent;
-  @include ktheme() {
-    border-top: 1px solid theme('k-primary') !important;
-  }
+  border-top: 1px solid var(--k-primary) !important;
 }
 
 button.button.navbar-link-background {
-  @include ktheme() {
-    border-top: 2px solid theme('k-accentlight2') !important;
-  }
+  border-top: 2px solid var(--k-accent-light-2) !important;
 }
 
 .share-button {

assets/styles/components/_button.scss

@@ -8,9 +8,8 @@
 .card.bordered {
   @apply rounded shadow-none;
 
-  @include ktheme() {
-    border-top: 1px solid theme('k-primary');
-  }
+  border-top: 1px solid var(--k-primary);
+
   &-content {
     padding-left: 1rem;
     padding-top: 1rem;

assets/styles/components/_card.scss

@@ -1,5 +1,3 @@
-
-
 .arrow {
   $side-y: 32px;
   $side-x: 55px;
@@ -11,15 +9,12 @@
 
   &-left {
     left: -30px;
+    border-right: solid $side-x var(--black);
 
-    @include ktheme() {
-      border-right: solid $side-x theme('black');
-    }
     &::after {
       content: '';
       width: 0;
       height: 0;
-
       position: absolute;
       top: -($side-y - 2);
       right: -($side-x - 1);
@@ -30,9 +25,7 @@
       content: '';
       width: 0;
       height: 0;
-
       position: absolute;
-
       top: -($side-y - 6);
       right: -($side-x + 4);
     }
@@ -46,7 +39,6 @@
       content: '';
       width: 0;
       height: 0;
-
       position: absolute;
       top: -($side-y - 2);
       left: -($side-x - 1);
@@ -57,44 +49,38 @@
       content: '';
       width: 0;
       height: 0;
-
       position: absolute;
       top: -($side-y - 6);
       left: -($side-x - 4);
     }
   }
 
-
   @media screen and (max-width: 640px) {
     display: none;
   }
 
   &.arrow-icon {
-    @include ktheme() {
-      box-shadow: theme('primary-shadow');
-      border: 1px solid theme('border-color');
-      color: theme('text-color');
-      background: theme('background-color');
-      &:hover {
-        background: theme('k-accentHover');
-        .icon {
-          color: theme('black') !important;
-        }
+    box-shadow: var(--primary-shadow);
+    border: 1px solid var(--border-color);
+    color: rgb(var(--text-color));
+    background: var(--background-color);
+    
+    &:hover {
+      background: var(--k-accent-hover);
+      .icon {
+        color: var(--black) !important;
       }
     }
   }
 }
 
-
-
 // We have to duplicate this block to use variables properly unless upgrade to sass 3.x version
 // red: https://stackoverflow.com/questions/12365703/scss-variable-scope
 
 .arrow-small-size {
   $side-y-small: 20px;
   $side-x-small: 32px;
   &.arrow {
-
     width: $side-x-small;
     height: $side-x-small;
 
@@ -106,20 +92,16 @@
 
       border-bottom: solid $side-y-small transparent;
       border-top: solid $side-y-small transparent;
-      @include ktheme() {
-        border-right: solid $side-x-small theme('black');
-      }
+      border-right: solid $side-x-small var(--black);
+
       &::after {
         content: '';
         width: 0;
         height: 0;
-  
         position: absolute;
         border-bottom: solid $side-y-small - 2 transparent;
         border-top: solid $side-y-small - 2 transparent;
-        @include ktheme() {
-          border-right: solid $side-x-small - 2 theme('white');
-        }
+        border-right: solid $side-x-small - 2 var(--white);
         top: -($side-y-small - 2);
         right: -($side-x-small - 1);
         transition-duration: 0.2s;
@@ -129,14 +111,10 @@
         content: '';
         width: 0;
         height: 0;
-  
         position: absolute;
         border-bottom: solid $side-y-small transparent;
         border-top: solid $side-y-small transparent;
-        @include ktheme() {
-          border-right: solid $side-x-small theme('black');
-        }
-  
+        border-right: solid $side-x-small var(--black);
         top: -($side-y-small - 6);
         right: -($side-x-small + 4);
       }
@@ -148,20 +126,16 @@
 
       border-bottom: solid $side-y-small transparent;
       border-top: solid $side-y-small transparent;
-      @include ktheme() {
-        border-left: solid $side-x-small theme('black');
-      }
+      border-left: solid $side-x-small var(--black);
+
       &::after {
         content: '';
         width: 0;
         height: 0;
-  
         position: absolute;
         border-bottom: solid $side-y-small - 2 transparent;
         border-top: solid $side-y-small - 2 transparent;
-        @include ktheme() {
-          border-left: solid $side-x-small - 2 theme('white');
-        }
+        border-left: solid $side-x-small - 2 var(--white);
         top: -($side-y-small - 2);
         left: -($side-x-small - 1);
         transition-duration: 0.2s;
@@ -171,37 +145,29 @@
         content: '';
         width: 0;
         height: 0;
-  
         position: absolute;
         border-bottom: solid $side-y-small transparent;
         border-top: solid $side-y-small transparent;
-        @include ktheme() {
-          border-left: solid $side-x-small theme('black');
-        }
+        border-left: solid $side-x-small var(--black);
         top: -($side-y-small - 6);
         left: -($side-x-small - 4);
       }
     }
 
     &:hover {
       &.arrow-left::after {
-        @include ktheme() {
-          border-right: solid $side-x-small - 2 theme('k-accentlight');
-        }
+        border-right: solid $side-x-small - 2 var(--k-accent-light);
       }
 
       &.arrow-right::after {
-        @include ktheme() {
-          border-left: solid $side-x-small - 2 theme('k-accentlight');
-        }
+        border-left: solid $side-x-small - 2 var(--k-accent-light);
       }
     }
 
     @media screen and (max-width: 640px) {
       display: none;
     }
   }
-  
 }
 
 

assets/styles/components/_carousel-arrows.scss

@@ -8,33 +8,27 @@
     a:hover {
       color: unset !important;
     }
-    @include ktheme() {
-      background: theme('background-color');
-      border: 1px solid theme('card-border-color');
-      &:hover {
-        border-color: theme('border-color');
-        .carousel-media {
-          opacity: theme('card-hover-opacity');
-        }
+    background: var(--background-color);
+    border: 1px solid var(--card-border-color);
+    &:hover {
+      border-color: var(--border-color);
+      .carousel-media {
+        opacity: var(--card-hover-opacity);
       }
     }
   }
 
   .carousel-media {
     display: grid;
     align-items: center;
-    @include ktheme() {
-      border-bottom: 1px solid theme('card-border-color');
-    }
+    border-bottom: 1px solid var(--card-border-color);
+    
     &-collection {
       border-bottom: none !important;
       padding: 16px 16px 0 16px;
 
       a {
-        @include ktheme() {
-          border: 1px solid theme('card-border-color');
-        }
-
+        border: 1px solid var(--card-border-color);
         display: block;
       }
     }
@@ -66,11 +60,9 @@
       outline: none;
     }
 
-    @include ktheme() {
-      background: theme('k-shade');
-      &.active {
-        background: theme('k-grey');
-      }
+    background: rgb(var(--k-shade));
+    &.active {
+      background: var(--k-grey);
     }
   }
 }