j1-template 2023.2.7 → 2023.3.0

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/color_system.asciidoc

@@ -0,0 +1,353 @@
+[source, sass]
+----
+// gray-color variables
+//
+$white:                                 #fff !default;
+$gray-100:                              #f8f9fa !default;
+$gray-200:                              #e9ecef !default;
+$gray-300:                              #dee2e6 !default;
+$gray-400:                              #ced4da !default;
+$gray-500:                              #adb5bd !default;
+$gray-600:                              #6c757d !default;
+$gray-700:                              #495057 !default;
+$gray-800:                              #343a40 !default;
+$gray-900:                              #212529 !default;
+$black:                                 #000 !default;
+
+// gray-colors map
+//
+$grays: (
+  "100":                                $gray-100,
+  "200":                                $gray-200,
+  "300":                                $gray-300,
+  "400":                                $gray-400,
+  "500":                                $gray-500,
+  "600":                                $gray-600,
+  "700":                                $gray-700,
+  "800":                                $gray-800,
+  "900":                                $gray-900
+) !default;
+
+// color variables
+//
+$blue:                                  #0d6efd !default;
+$indigo:                                #6610f2 !default;
+$purple:                                #6f42c1 !default;
+$pink:                                  #d63384 !default;
+$red:                                   #dc3545 !default;
+$orange:                                #fd7e14 !default;
+$yellow:                                #ffc107 !default;
+$green:                                 #198754 !default;
+$teal:                                  #20c997 !default;
+$cyan:                                  #0dcaf0 !default;
+
+// colors map
+//
+$colors: (
+  "blue":                               $blue,
+  "indigo":                             $indigo,
+  "purple":                             $purple,
+  "pink":                               $pink,
+  "red":                                $red,
+  "orange":                             $orange,
+  "yellow":                             $yellow,
+  "green":                              $green,
+  "teal":                               $teal,
+  "cyan":                               $cyan,
+  "black":                              $black,
+  "white":                              $white,
+  "gray":                               $gray-600,
+  "gray-dark":                          $gray-800
+) !default;
+
+// The contrast ratio to reach against white, to determine if color changes
+// from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
+// See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
+$min-contrast-ratio:                    4.5 !default;
+
+// Customize the light and dark text colors for use in our color
+// contrast function.
+$color-contrast-dark:                   $black !default;
+$color-contrast-light:                  $white !default;
+
+$blue-100:                              tint-color($blue, 80%) !default;
+$blue-200:                              tint-color($blue, 60%) !default;
+$blue-300:                              tint-color($blue, 40%) !default;
+$blue-400:                              tint-color($blue, 20%) !default;
+$blue-500:                              $blue !default;
+$blue-600:                              shade-color($blue, 20%) !default;
+$blue-700:                              shade-color($blue, 40%) !default;
+$blue-800:                              shade-color($blue, 60%) !default;
+$blue-900:                              shade-color($blue, 80%) !default;
+
+$indigo-100:                            tint-color($indigo, 80%) !default;
+$indigo-200:                            tint-color($indigo, 60%) !default;
+$indigo-300:                            tint-color($indigo, 40%) !default;
+$indigo-400:                            tint-color($indigo, 20%) !default;
+$indigo-500:                            $indigo !default;
+$indigo-600:                            shade-color($indigo, 20%) !default;
+$indigo-700:                            shade-color($indigo, 40%) !default;
+$indigo-800:                            shade-color($indigo, 60%) !default;
+$indigo-900:                            shade-color($indigo, 80%) !default;
+
+$purple-100:                            tint-color($purple, 80%) !default;
+$purple-200:                            tint-color($purple, 60%) !default;
+$purple-300:                            tint-color($purple, 40%) !default;
+$purple-400:                            tint-color($purple, 20%) !default;
+$purple-500:                            $purple !default;
+$purple-600:                            shade-color($purple, 20%) !default;
+$purple-700:                            shade-color($purple, 40%) !default;
+$purple-800:                            shade-color($purple, 60%) !default;
+$purple-900:                            shade-color($purple, 80%) !default;
+
+$pink-100:                              tint-color($pink, 80%) !default;
+$pink-200:                              tint-color($pink, 60%) !default;
+$pink-300:                              tint-color($pink, 40%) !default;
+$pink-400:                              tint-color($pink, 20%) !default;
+$pink-500:                              $pink !default;
+$pink-600:                              shade-color($pink, 20%) !default;
+$pink-700:                              shade-color($pink, 40%) !default;
+$pink-800:                              shade-color($pink, 60%) !default;
+$pink-900:                              shade-color($pink, 80%) !default;
+
+$red-100:                               tint-color($red, 80%) !default;
+$red-200:                               tint-color($red, 60%) !default;
+$red-300:                               tint-color($red, 40%) !default;
+$red-400:                               tint-color($red, 20%) !default;
+$red-500:                               $red !default;
+$red-600:                               shade-color($red, 20%) !default;
+$red-700:                               shade-color($red, 40%) !default;
+$red-800:                               shade-color($red, 60%) !default;
+$red-900:                               shade-color($red, 80%) !default;
+
+$orange-100:                            tint-color($orange, 80%) !default;
+$orange-200:                            tint-color($orange, 60%) !default;
+$orange-300:                            tint-color($orange, 40%) !default;
+$orange-400:                            tint-color($orange, 20%) !default;
+$orange-500:                            $orange !default;
+$orange-600:                            shade-color($orange, 20%) !default;
+$orange-700:                            shade-color($orange, 40%) !default;
+$orange-800:                            shade-color($orange, 60%) !default;
+$orange-900:                            shade-color($orange, 80%) !default;
+
+$yellow-100:                            tint-color($yellow, 80%) !default;
+$yellow-200:                            tint-color($yellow, 60%) !default;
+$yellow-300:                            tint-color($yellow, 40%) !default;
+$yellow-400:                            tint-color($yellow, 20%) !default;
+$yellow-500:                            $yellow !default;
+$yellow-600:                            shade-color($yellow, 20%) !default;
+$yellow-700:                            shade-color($yellow, 40%) !default;
+$yellow-800:                            shade-color($yellow, 60%) !default;
+$yellow-900:                            shade-color($yellow, 80%) !default;
+
+$green-100:                             tint-color($green, 80%) !default;
+$green-200:                             tint-color($green, 60%) !default;
+$green-300:                             tint-color($green, 40%) !default;
+$green-400:                             tint-color($green, 20%) !default;
+$green-500:                             $green !default;
+$green-600:                             shade-color($green, 20%) !default;
+$green-700:                             shade-color($green, 40%) !default;
+$green-800:                             shade-color($green, 60%) !default;
+$green-900:                             shade-color($green, 80%) !default;
+
+$teal-100:                              tint-color($teal, 80%) !default;
+$teal-200:                              tint-color($teal, 60%) !default;
+$teal-300:                              tint-color($teal, 40%) !default;
+$teal-400:                              tint-color($teal, 20%) !default;
+$teal-500:                              $teal !default;
+$teal-600:                              shade-color($teal, 20%) !default;
+$teal-700:                              shade-color($teal, 40%) !default;
+$teal-800:                              shade-color($teal, 60%) !default;
+$teal-900:                              shade-color($teal, 80%) !default;
+
+$cyan-100:                              tint-color($cyan, 80%) !default;
+$cyan-200:                              tint-color($cyan, 60%) !default;
+$cyan-300:                              tint-color($cyan, 40%) !default;
+$cyan-400:                              tint-color($cyan, 20%) !default;
+$cyan-500:                              $cyan !default;
+$cyan-600:                              shade-color($cyan, 20%) !default;
+$cyan-700:                              shade-color($cyan, 40%) !default;
+$cyan-800:                              shade-color($cyan, 60%) !default;
+$cyan-900:                              shade-color($cyan, 80%) !default;
+
+$blues: (
+  "blue-100":                           $blue-100,
+  "blue-200":                           $blue-200,
+  "blue-300":                           $blue-300,
+  "blue-400":                           $blue-400,
+  "blue-500":                           $blue-500,
+  "blue-600":                           $blue-600,
+  "blue-700":                           $blue-700,
+  "blue-800":                           $blue-800,
+  "blue-900":                           $blue-900
+) !default;
+
+$indigos: (
+  "indigo-100":                         $indigo-100,
+  "indigo-200":                         $indigo-200,
+  "indigo-300":                         $indigo-300,
+  "indigo-400":                         $indigo-400,
+  "indigo-500":                         $indigo-500,
+  "indigo-600":                         $indigo-600,
+  "indigo-700":                         $indigo-700,
+  "indigo-800":                         $indigo-800,
+  "indigo-900":                         $indigo-900
+) !default;
+
+$purples: (
+  "purple-100":                         $purple-100,
+  "purple-200":                         $purple-200,
+  "purple-300":                         $purple-300,
+  "purple-400":                         $purple-400,
+  "purple-500":                         $purple-500,
+  "purple-600":                         $purple-600,
+  "purple-700":                         $purple-700,
+  "purple-800":                         $purple-800,
+  "purple-900":                         $purple-900
+) !default;
+
+$pinks: (
+  "pink-100":                           $pink-100,
+  "pink-200":                           $pink-200,
+  "pink-300":                           $pink-300,
+  "pink-400":                           $pink-400,
+  "pink-500":                           $pink-500,
+  "pink-600":                           $pink-600,
+  "pink-700":                           $pink-700,
+  "pink-800":                           $pink-800,
+  "pink-900":                           $pink-900
+) !default;
+
+$reds: (
+  "red-100":                            $red-100,
+  "red-200":                            $red-200,
+  "red-300":                            $red-300,
+  "red-400":                            $red-400,
+  "red-500":                            $red-500,
+  "red-600":                            $red-600,
+  "red-700":                            $red-700,
+  "red-800":                            $red-800,
+  "red-900":                            $red-900
+) !default;
+
+$oranges: (
+  "orange-100":                         $orange-100,
+  "orange-200":                         $orange-200,
+  "orange-300":                         $orange-300,
+  "orange-400":                         $orange-400,
+  "orange-500":                         $orange-500,
+  "orange-600":                         $orange-600,
+  "orange-700":                         $orange-700,
+  "orange-800":                         $orange-800,
+  "orange-900":                         $orange-900
+) !default;
+
+$yellows: (
+  "yellow-100":                         $yellow-100,
+  "yellow-200":                         $yellow-200,
+  "yellow-300":                         $yellow-300,
+  "yellow-400":                         $yellow-400,
+  "yellow-500":                         $yellow-500,
+  "yellow-600":                         $yellow-600,
+  "yellow-700":                         $yellow-700,
+  "yellow-800":                         $yellow-800,
+  "yellow-900":                         $yellow-900
+) !default;
+
+$greens: (
+  "green-100":                          $green-100,
+  "green-200":                          $green-200,
+  "green-300":                          $green-300,
+  "green-400":                          $green-400,
+  "green-500":                          $green-500,
+  "green-600":                          $green-600,
+  "green-700":                          $green-700,
+  "green-800":                          $green-800,
+  "green-900":                          $green-900
+) !default;
+
+$teals: (
+  "teal-100":                           $teal-100,
+  "teal-200":                           $teal-200,
+  "teal-300":                           $teal-300,
+  "teal-400":                           $teal-400,
+  "teal-500":                           $teal-500,
+  "teal-600":                           $teal-600,
+  "teal-700":                           $teal-700,
+  "teal-800":                           $teal-800,
+  "teal-900":                           $teal-900
+) !default;
+
+$cyans: (
+  "cyan-100":                           $cyan-100,
+  "cyan-200":                           $cyan-200,
+  "cyan-300":                           $cyan-300,
+  "cyan-400":                           $cyan-400,
+  "cyan-500":                           $cyan-500,
+  "cyan-600":                           $cyan-600,
+  "cyan-700":                           $cyan-700,
+  "cyan-800":                           $cyan-800,
+  "cyan-900":                           $cyan-900
+) !default;
+
+
+// theme-color variables
+//
+$primary:                               $blue !default;
+$secondary:                             $gray-600 !default;
+$success:                               $green !default;
+$info:                                  $cyan !default;
+$warning:                               $yellow !default;
+$danger:                                $red !default;
+$light:                                 $gray-100 !default;
+$dark:                                  $gray-900 !default;
+
+
+// theme-colors map
+//
+$theme-colors: (
+  "primary":                            $primary,
+  "secondary":                          $secondary,
+  "success":                            $success,
+  "info":                               $info,
+  "warning":                            $warning,
+  "danger":                             $danger,
+  "light":                              $light,
+  "dark":                               $dark
+) !default;
+
+
+// theme text variables
+//
+$primary-text-emphasis:                 shade-color($primary, 60%) !default;
+$secondary-text-emphasis:               shade-color($secondary, 60%) !default;
+$success-text-emphasis:                 shade-color($success, 60%) !default;
+$info-text-emphasis:                    shade-color($info, 60%) !default;
+$warning-text-emphasis:                 shade-color($warning, 60%) !default;
+$danger-text-emphasis:                  shade-color($danger, 60%) !default;
+$light-text-emphasis:                   $gray-700 !default;
+$dark-text-emphasis:                    $gray-700 !default;
+
+// theme-bg-subtle variables
+//
+$primary-bg-subtle:                     tint-color($primary, 80%) !default;
+$secondary-bg-subtle:                   tint-color($secondary, 80%) !default;
+$success-bg-subtle:                     tint-color($success, 80%) !default;
+$info-bg-subtle:                        tint-color($info, 80%) !default;
+$warning-bg-subtle:                     tint-color($warning, 80%) !default;
+$danger-bg-subtle:                      tint-color($danger, 80%) !default;
+$light-bg-subtle:                       mix($gray-100, $white) !default;
+$dark-bg-subtle:                        $gray-400 !default;
+
+
+// theme-border-subtle variables
+//
+$primary-border-subtle:                 tint-color($primary, 60%) !default;
+$secondary-border-subtle:               tint-color($secondary, 60%) !default;
+$success-border-subtle:                 tint-color($success, 60%) !default;
+$info-border-subtle:                    tint-color($info, 60%) !default;
+$warning-border-subtle:                 tint-color($warning, 60%) !default;
+$danger-border-subtle:                  tint-color($danger, 60%) !default;
+$light-border-subtle:                   $gray-200 !default;
+$dark-border-subtle:                    $gray-500 !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/components.asciidoc

@@ -0,0 +1,69 @@
+[source, sass]
+----
+// border-variables
+//
+$border-width:                          1px !default;
+$border-widths: (
+  1:                                    1px,
+  2:                                    2px,
+  3:                                    3px,
+  4:                                    4px,
+  5:                                    5px
+) !default;
+$border-style:                          solid !default;
+$border-color:                          $gray-300 !default;
+$border-color-translucent:              rgba($black, .175) !default;
+
+// border-radius variables
+//
+$border-radius:                         .375rem !default;
+$border-radius-sm:                      .25rem !default;
+$border-radius-lg:                      .5rem !default;
+$border-radius-xl:                      1rem !default;
+$border-radius-xxl:                     2rem !default;
+$border-radius-pill:                    50rem !default;
+
+// Deprecated in v5.3.0
+$border-radius-2xl:                     $border-radius-xxl !default;
+
+
+// box-shadow variables
+//
+$box-shadow:                            0 .5rem 1rem rgba($black, .15) !default;
+$box-shadow-sm:                         0 .125rem .25rem rgba($black, .075) !default;
+$box-shadow-lg:                         0 1rem 3rem rgba($black, .175) !default;
+$box-shadow-inset:                      inset 0 1px 2px rgba($black, .075) !default;
+
+$component-active-color:                $white !default;
+$component-active-bg:                   $primary !default;
+
+// focus-ring variables
+//
+$focus-ring-width:                      .25rem !default;
+$focus-ring-opacity:                    .25 !default;
+$focus-ring-color:                      rgba($primary, $focus-ring-opacity) !default;
+$focus-ring-blur:                       0 !default;
+$focus-ring-box-shadow:                 0 0 $focus-ring-blur $focus-ring-width $focus-ring-color !default;
+
+// caret variables
+//
+$caret-width:                           .3em !default;
+$caret-vertical-align:                  $caret-width * .85 !default;
+$caret-spacing:                         $caret-width * .85 !default;
+
+// transition variables
+//
+$transition-base:                       all .2s ease-in-out !default;
+$transition-fade:                       opacity .15s linear !default;
+$transition-collapse:                   height .35s ease !default;
+$transition-collapse-width:             width .35s ease !default;
+
+// aspect ratios
+//
+$aspect-ratios: (
+  "1x1":                                100%,
+  "4x3":                                calc(3 / 4 * 100%),
+  "16x9":                               calc(9 / 16 * 100%),
+  "21x9":                               calc(9 / 21 * 100%)
+) !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/dropdowns.asciidoc

@@ -0,0 +1,53 @@
+[source, sass]
+----
+// dropdown variables
+//
+$dropdown-min-width:                    10rem !default;
+$dropdown-padding-x:                    0 !default;
+$dropdown-padding-y:                    .5rem !default;
+$dropdown-spacer:                       .125rem !default;
+$dropdown-font-size:                    $font-size-base !default;
+$dropdown-color:                        var(--#{$prefix}body-color) !default;
+$dropdown-bg:                           var(--#{$prefix}body-bg) !default;
+$dropdown-border-color:                 var(--#{$prefix}border-color-translucent) !default;
+$dropdown-border-radius:                var(--#{$prefix}border-radius) !default;
+$dropdown-border-width:                 var(--#{$prefix}border-width) !default;
+$dropdown-inner-border-radius:          calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default; // stylelint-disable-line function-disallowed-list
+$dropdown-divider-bg:                   $dropdown-border-color !default;
+$dropdown-divider-margin-y:             $spacer * .5 !default;
+$dropdown-box-shadow:                   $box-shadow !default;
+
+$dropdown-link-color:                   var(--#{$prefix}body-color) !default;
+$dropdown-link-hover-color:             $dropdown-link-color !default;
+$dropdown-link-hover-bg:                var(--#{$prefix}tertiary-bg) !default;
+
+$dropdown-link-active-color:            $component-active-color !default;
+$dropdown-link-active-bg:               $component-active-bg !default;
+
+$dropdown-link-disabled-color:          var(--#{$prefix}tertiary-color) !default;
+
+$dropdown-item-padding-y:               $spacer * .25 !default;
+$dropdown-item-padding-x:               $spacer !default;
+
+$dropdown-header-color:                 $gray-600 !default;
+$dropdown-header-padding-x:             $dropdown-item-padding-x !default;
+$dropdown-header-padding-y:             $dropdown-padding-y !default;
+
+$dropdown-header-padding:               $dropdown-header-padding-y $dropdown-header-padding-x !default; // Deprecated in v5.2.0
+
+
+// dropdown-dark variables
+//
+$dropdown-dark-color:                   $gray-300 !default;
+$dropdown-dark-bg:                      $gray-800 !default;
+$dropdown-dark-border-color:            $dropdown-border-color !default;
+$dropdown-dark-divider-bg:              $dropdown-divider-bg !default;
+$dropdown-dark-box-shadow:              null !default;
+$dropdown-dark-link-color:              $dropdown-dark-color !default;
+$dropdown-dark-link-hover-color:        $white !default;
+$dropdown-dark-link-hover-bg:           rgba($white, .15) !default;
+$dropdown-dark-link-active-color:       $dropdown-link-active-color !default;
+$dropdown-dark-link-active-bg:          $dropdown-link-active-bg !default;
+$dropdown-dark-link-disabled-color:     $gray-500 !default;
+$dropdown-dark-header-color:            $gray-500 !default;
+----

data/lib/starter_web/pages/public/learn/bs_sass_variables/_includes/documents/figures.asciidoc

@@ -0,0 +1,5 @@
+[source, sass"]
+----
+$figure-caption-font-size:              $small-font-size !default;
+$figure-caption-color:                  var(--#{$prefix}secondary-color) !default;
+----