refactor(extra-features): Refactor css

Two files: Variables.scss with bootstrap overrides and custom.scss

falcon/_dev/css/abstracts/variables/_index.scss

@@ -1,2 +1,3 @@
 @import "custom/index";
 @import "bootstrap/index";
+@import "../../../css/theme/_variables";

falcon/_dev/css/theme.scss

@@ -1,3 +1,2 @@
 @import "abstracts/index";
 @import "theme/index";
-@import "theme/custom/custom";

falcon/_dev/css/theme/_custom.scss

@@ -0,0 +1,158 @@
+/* ------------------------------------------------------------------------- */
+/* ⚠️ Variables can be found in variables.scss instead of defined in root */
+/* ------------------------------------------------------------------------- */
+
+/* --------- Breakpoints bootstrap 5 ----------- */
+
+@mixin bs5-media-breakpoint-up($name) {
+    $min: map-get($grid-breakpoints, $name);
+    @if $min and $min > 0 {
+        @media (min-width: $min) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin bs5-media-breakpoint-down($name) {
+    $max: map-get($grid-breakpoints, $name);
+    @if $max {
+        @media (max-width: calc(#{$max} - 0.02px)) {
+            @content;
+        }
+    } @else {
+        @content;
+    }
+}
+
+@mixin bs5-media-breakpoint-between($lower, $upper) {
+    $min: map-get($grid-breakpoints, $lower);
+    $max: map-get($grid-breakpoints, $upper);
+    @if $min and $max {
+        @media (min-width: $min) and (max-width: calc(#{$max} - 0.02px)) {
+            @content;
+        }
+    }
+}
+
+/* --------- Utilities ----------- */
+
+/* Spacers */
+
+$section-spacer: rem-calc(50px);
+$section-spacer-small: rem-calc(25px);
+
+.section-spacer-both {
+    padding-top: $section-spacer-small;
+    padding-bottom: $section-spacer-small;
+    @include bs5-media-breakpoint-up(lg) {
+        padding-top: $section-spacer;
+        padding-bottom: $section-spacer;
+    }
+    &--small {
+        padding-top: $section-spacer-small;
+        padding-bottom: $section-spacer-small;
+        @include bs5-media-breakpoint-up(lg) {
+            padding-top: $section-spacer-small;
+            padding-bottom: $section-spacer-small;
+        }
+    }
+}
+.section-spacer {
+    @extend .section-spacer-both;
+    padding-bottom: unset;
+    &--small {
+        padding-bottom: unset;
+    }
+}
+.section-spacer-bottom {
+    @extend .section-spacer-both;
+    padding-top: unset;
+    &--small {
+        padding-top: unset;
+    }
+}
+
+/* Hex to rgba function */
+@function hex-to-rgba($hex, $alpha) {
+    $r: red($hex);
+    $g: green($hex);
+    $b: blue($hex);
+    @return rgba($r, $g, $b, $alpha);
+}
+
+/* --------- Components: Buttons ----------- */
+
+.bootstrap-touchspin {
+    flex-wrap: nowrap;
+
+    .input-touchspin {
+        height: rem-calc(50px);
+        min-width: rem-calc(75px);
+        border-left: 0px;
+    }
+
+    .input-group-btn-vertical {
+        display: flex;
+        flex-direction: column;
+        button {
+            border-radius: 0px;
+        }
+    }
+}
+
+.btn:focus {
+    box-shadow: none !important;
+}
+
+/* --------- Components: Forms ----------- */
+
+.input-group.js-parent-focus {
+    .input-group-append .btn {
+        border-top-right-radius: $border-radius !important;
+        border-bottom-right-radius: $border-radius !important;
+    }
+}
+
+.input-group.js-parent-focus {
+    height: $input-height;
+}
+
+/* --------- Components: Swiper ----------- */
+
+.swiper-slide {
+    height: auto;
+}
+
+/* --------- Layout: Header ----------- */
+
+.header-top__row {
+    flex-wrap: wrap;
+    .header-top__block--search {
+        @include media-breakpoint-down(sm) {
+            order: 1;
+        }
+        .js-search-form {
+            max-width: unset;
+            width: 100%;
+            margin: 0;
+        }
+    }
+
+    .header-top__badge {
+        right: -0.9em;
+    }
+}
+
+/* --------- Layout: Left column ----------- */
+#left-column {
+    .list-group-item,
+    .list-group-item-action-dropdown-link,
+    label {
+        font-family: $font-family-base;
+        font-size: $font-size-base;
+        color: $secondary;
+        font-weight: 400;
+    }
+}

falcon/_dev/css/theme/_index.scss

@@ -5,4 +5,4 @@
 @import "layout/index";
 @import "components/index";
 
-@import "custom/custom";
+@import "custom";

falcon/_dev/css/theme/_variables.scss

@@ -0,0 +1,200 @@
+/* --------- Custom variables ----------- */
+
+/* --------- Bootstrap variables ----------- */
+
+/* This file gets imported into the project under abstracts/variables/_index.scss */
+/* Find bootstrap variables: https://rstudio.github.io/bslib/articles/bs4-variables/ */
+
+/* Color system */
+
+$white: #fff;
+$gray-100: #f8f9fa;
+$gray-200: #e9ecef;
+$gray-300: #dee2e6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #6c757d;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+$black: #000;
+
+$blue: #007bff;
+$indigo: #6610f2;
+$purple: #6f42c1;
+$pink: #e83e8c;
+$red: #dc3545;
+$orange: #fd7e14;
+$yellow: #ffc107;
+$green: #28a745;
+$teal: #20c997;
+$cyan: #17a2b8;
+
+$primary: $red;
+$secondary: $gray-600;
+$success: $green;
+$info: $cyan;
+$warning: #ff9a52;
+$danger: $red;
+$light: $gray-100;
+$dark: $gray-800;
+
+/* Typography */
+
+$font-family-sans-serif: "Plus Jakarta Sans", sans-serif;
+$font-family-base: $font-family-sans-serif;
+$headings-font-family: $font-family-sans-serif;
+$font-weight-base: 400;
+
+$font-size-base: rem-calc(14px);
+$font-size-lg: $font-size-base * 1.125;
+$font-size-sm: $font-size-base * 0.875;
+$font-size-xs: $font-size-base * 0.6875;
+
+$font-weight-lighter: 200;
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-bold: 700;
+$font-weight-bolder: 800;
+
+$h1-font-size: $font-size-base * 2;
+$h2-font-size: $font-size-base * 1.75;
+$h3-font-size: $font-size-base * 1.5;
+$h4-font-size: $font-size-base * 1.25;
+$h5-font-size: $font-size-base * 1.125;
+$h6-font-size: $font-size-base;
+
+$display1-size: $font-size-base * 2.5;
+$display2-size: $font-size-base * 2.25;
+$display3-size: $font-size-base * 2;
+$display4-size: $font-size-base * 1.75;
+
+$display1-weight: 400;
+$display2-weight: 400;
+$display3-weight: 400;
+$display4-weight: 400;
+
+$text-muted: $gray-600;
+
+$paragraph-margin-bottom: rem-calc(20px);
+
+$headings-margin-bottom: rem-calc(20px);
+$headings-font-weight: 700;
+$headings-line-height: 1.2;
+$headings-color: $gray-900;
+
+/* Spacer */
+
+$spacer: 10px;
+
+/* stylelint-disable-next-line scss/dollar-variable-default */
+$spacers: (
+    0: 0,
+    1: $spacer * 0.5,
+    2: $spacer,
+    3: $spacer * 2,
+    4: $spacer * 3,
+    5: $spacer * 4,
+    6: $spacer * 5,
+);
+
+/* Components */
+
+$border-width: 1px;
+$border-color: $gray-300;
+$border-radius: 0.4rem;
+$border-radius-lg: 0.4rem;
+$border-radius-sm: 0.4rem;
+
+$card-border-color: $border-color;
+$table-border-color: $border-color;
+$input-border-color: $border-color;
+
+$input-focus-border-color: $border-color;
+$form-check-input-border: $border-color;
+
+/* Commons */
+
+$body-bg: $white;
+$body-color: $gray-900;
+
+/* Custom control */
+
+$custom-checkbox-indicator-border-radius: 4px;
+
+$custom-checkbox-indicator-icon-checked-dark-color: $black;
+$custom-checkbox-indicator-icon-checked-dark: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'><path fill='#{$custom-checkbox-indicator-icon-checked-dark-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26l2.974 2.99L8 2.193z'/></svg>");
+
+/* Custom radio color */
+
+$custom-color-control-indicator-size: rem-calc(24px);
+$custom-color-control-indicator-size-checked-border-color: $gray-900;
+$custom-color-control-indicator-icon-size: rem-calc(18px);
+
+/* Buttons */
+
+$btn-font-weight: 500;
+
+/* Options */
+
+$enable-responsive-font-sizes: true;
+
+/* Grid */
+
+/* Made this more like the breakpoints used in Bootstrap 5 */
+$grid-breakpoints: (
+    xs: 0,
+    sm: 576px,
+    md: 768px,
+    lg: 992px,
+    xl: 1200px,
+    xxl: 1400px,
+);
+
+$container-max-widths: (
+    sm: 540px,
+    md: 720px,
+    lg: 960px,
+    xl: 1140px,
+    xxl: 1320px,
+);
+
+$grid-columns: 12;
+$grid-gutter-width: rem-calc(20px);
+$grid-row-columns: 6;
+
+/* Card */
+
+$card-border-radius: $border-radius;
+$card-border-width: rem-calc(1px);
+$card-inner-border-radius: subtract($card-border-radius, $card-border-width);
+
+/* RFS */
+
+$rfs-breakpoint: 992;
+$rfs-breakpoint-unit: px;
+$rfs-base-font-size: 12;
+$rfs-factor: 5;
+
+/* Forms */
+
+$input-btn-padding-y: rem-calc(8px);
+$input-btn-padding-x: rem-calc(16px);
+
+$input-btn-padding-y-sm: rem-calc(4px);
+$input-btn-padding-x-sm: rem-calc(8px);
+
+$input-btn-padding-y-lg: rem-calc(14px);
+$input-btn-padding-x-lg: rem-calc(20px);
+
+$input-height: rem-calc(50px);
+
+/* Badge */
+
+$badge-padding-y: 0.3em;
+$badge-padding-x: 0.55em;
+
+/* Progress */
+
+$progress-bg: $gray-200;
+$progress-height: rem-calc(8px);

falcon/_dev/css/theme/custom/_custom.scss

@@ -1,32 +0,0 @@
-/* 
-This is the main custom SCSS file for the Falcon theme. 
-
-I am loosely following the 7 in 1 structure for better organization of the styles. Learn more here:
-https://medium.com/@diyorbekjuraev77/be-a-master-at-creating-the-7-1-sass-pattern-776fdfb5a3b1
-
-⚠️NOTE: All bootstrap overrides have been configured under themes/falcon/_dev/css/abstracts/variables/bootstrap
-Look up all available Bootstrap variables here: https://rstudio.github.io/bslib/articles/bs5-variables/index.html
-
-*/
-
-//Abstracts: Things used throughout the site such as utility classes and generic overrides.
-//@import "abstracts/base";
-@import "abstracts/functions";
-@import "abstracts/mixins";
-@import "abstracts/utilities";
-
-// Components: parts of the theme itself that are not associated with a module.
-@import "components/buttons";
-@import "components/forms";
-
-//Layouts: Parts of a page, such as the header, footer, etc.
-//@import "layout/footer";
-@import "layout/header";
-@import "layout/left-column";
-@import "layout/swiper";
-
-// Pages
-//@import "pages/checkout";
-//@import "pages/home";
-//@import "pages/listing";
-//@import "pages/product";

falcon/_dev/css/theme/custom/abstracts/_functions.scss

@@ -1,41 +0,0 @@
-@use "sass:math";
-
-// Font size utility classes generator
-// Generates utility classes like .fs-14, .fs-16, etc.
-@for $i from 8 through 72 {
-    .fs-#{$i} {
-        font-size: rem-calc($i * 1px) !important;
-    }
-}
-
-// Font weight utility classes generator
-// Generates utility classes like .fw-100, .fw-200, etc.
-@for $i from 100 through 900 {
-    @if $i % 100 == 0 {
-        .fw-#{$i} {
-            font-weight: #{$i} !important;
-        }
-    }
-}
-
-// gap size utility classes generator
-// Generates utility classes like .gap-4, .gap-col-4, .gap-row-4
-@for $i from 1 through 35 {
-    .gap-#{$i} {
-        gap: rem-calc($i * 1px) !important;
-    }
-    .gap-col-#{$i} {
-        column-gap: rem-calc($i * 1px) !important;
-    }
-    .gap-row-#{$i} {
-        row-gap: rem-calc($i * 1px) !important;
-    }
-}
-
-// hex to rgba function
-@function hex-to-rgba($hex, $alpha) {
-    $r: red($hex);
-    $g: green($hex);
-    $b: blue($hex);
-    @return rgba($r, $g, $b, $alpha);
-}

falcon/_dev/css/theme/custom/abstracts/_mixins.scss

@@ -1,73 +0,0 @@
-// Bootstrap 5-style responsive mixins (more intuitive than Bootstrap 4)
-// Learn the difference here https://getbootstrap.com/docs/5.0/migration/#sass
-
-@mixin bs5-media-breakpoint-up($name) {
-    $min: map-get($grid-breakpoints, $name);
-    @if $min and $min > 0 {
-        @media (min-width: $min) {
-            @content;
-        }
-    } @else {
-        @content;
-    }
-}
-
-@mixin bs5-media-breakpoint-down($name) {
-    $max: map-get($grid-breakpoints, $name);
-    @if $max {
-        @media (max-width: calc(#{$max} - 0.02px)) {
-            @content;
-        }
-    } @else {
-        @content;
-    }
-}
-
-@mixin bs5-media-breakpoint-between($lower, $upper) {
-    $min: map-get($grid-breakpoints, $lower);
-    $max: map-get($grid-breakpoints, $upper);
-    @if $min and $max {
-        @media (min-width: $min) and (max-width: calc(#{$max} - 0.02px)) {
-            @content;
-        }
-    }
-}
-
-@mixin bs5-media-breakpoint-only($name) {
-    $breakpoint-names: map-keys($grid-breakpoints);
-    $index: index($breakpoint-names, $name);
-    $next-name: nth($breakpoint-names, $index + 1);
-
-    @include bs5-media-breakpoint-between($name, $next-name) {
-        @content;
-    }
-}
-
-// Mixin to add an after pseudo-element with a mask image to customize button colors
-/* Example: 
-
-.btn-arrow-right{
-    &::after {
-        @include btn-after("../img/arrow-right.svg");
-    }
-}
-    
-*/
-
-@mixin btn-after($url, $color: currentColor) {
-    content: "";
-    display: inline-block;
-    width: 1em;
-    height: 1em;
-    margin-left: 0.5em;
-    vertical-align: middle;
-    background-color: currentColor;
-    mask-image: url(#{$url});
-    mask-size: contain;
-    mask-repeat: no-repeat;
-    mask-position: center;
-    -webkit-mask-image: url(#{$url});
-    -webkit-mask-size: contain;
-    -webkit-mask-repeat: no-repeat;
-    -webkit-mask-position: center;
-}

falcon/_dev/css/theme/custom/abstracts/_utilities.scss

@@ -1,43 +0,0 @@
-// Header selector for interpolation
-// Example usage: #{$headers} { ... }
-$headers: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";
-
-// All text selector for interpolation
-$text: "#{$headers}, p, span, a, li";
-
-// Section Spacers. Just set the two variables below and it is fully responsive!
-// $section-spacer-small applies on breakpoints lg and below, OR always if specified in the class with  --small (ex. section-spacer--small).
-
-$section-spacer: rem-calc(50px);
-$section-spacer-small: rem-calc(25px);
-
-.section-spacer-both {
-    margin-top: $section-spacer-small;
-    margin-bottom: $section-spacer-small;
-    @include bs5-media-breakpoint-up(lg) {
-        margin-top: $section-spacer;
-        margin-bottom: $section-spacer;
-    }
-    &--small {
-        margin-top: $section-spacer-small;
-        margin-bottom: $section-spacer-small;
-        @include bs5-media-breakpoint-up(lg) {
-            margin-top: $section-spacer-small;
-            margin-bottom: $section-spacer-small;
-        }
-    }
-}
-.section-spacer {
-    @extend .section-spacer-both;
-    margin-bottom: unset;
-    &--small {
-        margin-bottom: unset;
-    }
-}
-.section-spacer-bottom {
-    @extend .section-spacer-both;
-    margin-top: unset;
-    &--small {
-        margin-top: unset;
-    }
-}

falcon/_dev/css/theme/custom/components/_buttons.scss

@@ -1,57 +0,0 @@
-// To customize text colors per button, use this map and below function
-
-$btn-color: (
-    "primary": $white,
-    "secondary": $white,
-    "light": $primary,
-    "dark": $white,
-);
-
-@each $name, $color in $btn-color {
-    .btn-#{$name},
-    .btn-lg-#{$name},
-    .btn-sm-#{$name} {
-        color: $color !important;
-    }
-}
-
-// Configure btn-outline text color on hover per button. (Same thing as above but for btn-outline and only on hover)
-$btn-outline-hover: (
-    "primary": $white,
-    "secondary": $white,
-);
-
-@each $name, $bg in $btn-outline-hover {
-    $text-color: if(
-        map-has-key($btn-color, $name),
-        map-get($btn-color, $name),
-        $white
-    );
-
-    .btn-outline-#{$name}:hover,
-    .btn-outline-#{$name}:focus,
-    .btn-outline-#{$name}:active,
-    .btn-outline-#{$name}.active,
-    .show > .btn-outline-#{$name}.dropdown-toggle {
-        color: $text-color !important;
-    }
-}
-
-// Bootstrap touchspin
-.bootstrap-touchspin {
-    flex-wrap: nowrap;
-
-    .input-touchspin {
-        height: rem-calc(50px);
-        min-width: rem-calc(75px);
-        border-left: 0px;
-    }
-
-    .input-group-btn-vertical {
-        display: flex;
-        flex-direction: column;
-        button {
-            border-radius: 0px;
-        }
-    }
-}

falcon/_dev/css/theme/custom/components/_forms.scss

@@ -1,10 +0,0 @@
-.input-group.js-parent-focus {
-    .input-group-append .btn {
-        border-top-right-radius: $border-radius !important;
-        border-bottom-right-radius: $border-radius !important;
-    }
-}
-
-.input-group.js-parent-focus {
-    height: $input-height;
-}

falcon/_dev/css/theme/custom/layout/_header.scss

@@ -1,17 +0,0 @@
-.header-top__row {
-    flex-wrap: wrap;
-    .header-top__block--search {
-        @include media-breakpoint-down(sm) {
-            order: 1;
-        }
-        .js-search-form {
-            max-width: unset;
-            width: 100%;
-            margin: 0;
-        }
-    }
-
-    .header-top__badge {
-        right: -0.9em;
-    }
-}

falcon/_dev/css/theme/custom/layout/_left-column.scss

@@ -1,10 +0,0 @@
-#left-column {
-    .list-group-item,
-    .list-group-item-action-dropdown-link,
-    label {
-        font-family: $font-family-base;
-        font-size: $font-size-base;
-        color: $secondary;
-        font-weight: 400;
-    }
-}

falcon/_dev/css/theme/custom/layout/_swiper.scss

@@ -1,3 +0,0 @@
-.swiper-slide {
-    height: auto;
-}