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/_custom.scss

@@ -1,78 +1,8 @@
-// --------- Root variables -----------
+/* ------------------------------------------------------------------------- */
+/* ⚠️ Variables can be found in variables.scss instead of defined in root */
+/* ------------------------------------------------------------------------- */
 
-// Might also be edited under abstracts/variables/bootstrap
+/* --------- Breakpoints bootstrap 5 ----------- */
-
-:root {
-    // Colors
-    // Generated from the $ variables in abstracts/variables/bootstrap/_colors.scss
-    // so the two can never drift apart.
-    @each $name, $value in (
-        white: $white,
-        gray-100: $gray-100,
-        gray-200: $gray-200,
-        gray-300: $gray-300,
-        gray-400: $gray-400,
-        gray-500: $gray-500,
-        gray-600: $gray-600,
-        gray-700: $gray-700,
-        gray-800: $gray-800,
-        gray-900: $gray-900,
-        black: $black,
-        blue: $blue,
-        indigo: $indigo,
-        purple: $purple,
-        pink: $pink,
-        red: $red,
-        orange: $orange,
-        yellow: $yellow,
-        green: $green,
-        teal: $teal,
-        cyan: $cyan
-    ) {
-        --#{$name}: #{$value};
-    }
-
-    --primary: #2daae1;
-    --secondary: #3b5b74;
-    --tertiary: #f0f5fa;
-    --quaternary: #1a1c2a;
-    --success: var(--green);
-    --info: var(--cyan);
-    --warning: var(--orange);
-    --danger: var(--red);
-    --light: #f0f5fa;
-    --dark: #3b5b74;
-
-    // Typography
-    --font-family-base: "Poppins", sans-serif;
-    --font-size-base: 0.875rem;
-    --text-color: var(--dark);
-
-    // Buttons
-    --btn-font-weight: 500;
-    --btn-border-radius: 99em;
-    --btn-padding-y: 20px;
-    --btn-padding-x: 10px;
-}
-
-$headers: "h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6";
-$text: "#{$headers}, p, span, a, li";
-
-$color-themes: primary, secondary, success, danger, warning, info, light, dark;
-
-$section-spacer: rem-calc(50px);
-$section-spacer-small: rem-calc(25px);
-
-body {
-    font-family: var(--font-family-base);
-    font-size: var(--font-size-base);
-}
-
-#{$text} {
-    color: var(--text-color);
-}
-
-// --------- Breakpoints -----------
 
 @mixin bs5-media-breakpoint-up($name) {
     $min: map-get($grid-breakpoints, $name);
@@ -106,9 +36,13 @@ body {
     }
 }
 
-// --------- Utilities -----------
+/* --------- Utilities ----------- */
+
+/* Spacers */
+
+$section-spacer: rem-calc(50px);
+$section-spacer-small: rem-calc(25px);
 
-// Spacers
 .section-spacer-both {
     padding-top: $section-spacer-small;
     padding-bottom: $section-spacer-small;
@@ -140,42 +74,7 @@ body {
     }
 }
 
-// Bootstrap variable bridge for components
+/* Hex to rgba function */
-@each $name in $color-themes {
-    .bg-#{$name} {
-        background-color: var(--#{$name}) !important;
-    }
-    .text-#{$name} {
-        color: var(--#{$name}) !important;
-    }
-    .border-#{$name} {
-        border-color: var(--#{$name}) !important;
-    }
-    .badge-#{$name} {
-        background-color: var(--#{$name});
-        color: var(--white);
-    }
-    .alert-#{$name} {
-        border-color: var(--#{$name});
-    }
-}
-
-// Font weight utility classes generator (ex: .fw-100)
-@for $i from 100 through 900 {
-    @if $i % 100 == 0 {
-        .fw-#{$i} {
-            font-weight: #{$i} !important;
-        }
-    }
-}
-
-// gap size utility classes generator (ex: .gap-4)
-@for $i from 1 through 35 {
-    .gap-#{$i} {
-        gap: rem-calc($i * 1px) !important;
-    }
-}
-
 @function hex-to-rgba($hex, $alpha) {
     $r: red($hex);
     $g: green($hex);
@@ -183,39 +82,7 @@ body {
     @return rgba($r, $g, $b, $alpha);
 }
 
-// Other utilities
+/* --------- Components: Buttons ----------- */
-
-// --------- Components: Buttons -----------
-
-@each $name in ($color-themes) {
-    .btn-#{$name} {
-        background-color: var(--#{$name});
-        border-color: var(--#{$name});
-        border-radius: var(--btn-border-radius);
-        font-weight: var(--btn-font-weight);
-        padding: var(--btn-padding-x) var(--btn-padding-y);
-
-        &:hover,
-        &:focus,
-        &:active,
-        &.active {
-            background-color: var(--#{$name});
-            border-color: var(--#{$name});
-        }
-    }
-    .btn-outline-#{$name} {
-        color: var(--#{$name});
-        border-color: var(--#{$name});
-        border-radius: var(--btn-border-radius);
-        &:hover,
-        &:focus,
-        &:active,
-        &.active {
-            background-color: var(--#{$name});
-            border-color: var(--#{$name});
-        }
-    }
-}
 
 .bootstrap-touchspin {
     flex-wrap: nowrap;
@@ -238,7 +105,8 @@ body {
 .btn:focus {
     box-shadow: none !important;
 }
-// --------- Components: Forms -----------
+
+/* --------- Components: Forms ----------- */
 
 .input-group.js-parent-focus {
     .input-group-append .btn {
@@ -251,12 +119,14 @@ body {
     height: $input-height;
 }
 
-// --------- Components: Swiper -----------
+/* --------- Components: Swiper ----------- */
+
 .swiper-slide {
     height: auto;
 }
 
-// --------- Layout: Header -----------
+/* --------- Layout: Header ----------- */
+
 .header-top__row {
     flex-wrap: wrap;
     .header-top__block--search {
@@ -275,7 +145,7 @@ body {
     }
 }
 
-// --------- Layout: Left column -----------
+/* --------- Layout: Left column ----------- */
 #left-column {
     .list-group-item,
     .list-group-item-action-dropdown-link,

falcon/_dev/css/theme/_variables.scss

@@ -0,0 +1,198 @@
+// --------- Custom variables -----------
+
+// --------- Bootstrap variables -----------
+// 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);