ode-bootstrap 1.1.4-feat-produit.202306051650 → 1.1.4-feat-explorer.202306051652

package/scss/variables/_bootstrap.scss

@@ -0,0 +1,234 @@
+/*
+Personnalisation de certains paramètres de boostrap
+Ajouter l'option !default pour permettre la surcharge depuis les thèmes
+Ref : https://github.com/twbs/bootstrap/blob/main/scss/_variables.scss
+*/
+
+$prefix: "ode-";
+// Body
+$body-bg: $gray-200 !default;
+$body-color: $gray-800 !default;
+
+$text-light: $gray-300 !default;
+$text-lightest: $white !default;
+$text-color: $gray-800 !default;
+
+$link-decoration: none !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: 1.75 !default;
+
+// Grid breakpoints
+$grid-breakpoints: (
+  xs: 0,
+  sm: 375px,
+  md: 768px,
+  lg: 1024px,
+  xl: 1280px,
+  xxl: 1400px,
+) !default;
+
+// Container Max Widths
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1352px,
+) !default;
+
+$container-padding-x: 3.2rem;
+
+// Gutter Grid CSS
+$grid-gutter-width: 2.4rem;
+
+// Spacers for margins, paddings and gaps
+$spacer-0: 0 !default;
+$spacer-2: 0.2rem !default;
+$spacer-4: 0.4rem !default;
+$spacer-8: 0.8rem !default;
+$spacer-12: 1.2rem !default;
+$spacer-16: 1.6rem !default;
+$spacer-24: 2.4rem !default;
+$spacer-32: 3.2rem !default;
+$spacer-48: 4.8rem !default;
+$spacer-64: 6.4rem !default;
+$spacer-120: 12rem !default;
+
+$spacers: (
+  0: $spacer-0,
+  2: $spacer-2,
+  4: $spacer-4,
+  8: $spacer-8,
+  12: $spacer-12,
+  16: $spacer-16,
+  24: $spacer-24,
+  32: $spacer-32,
+  48: $spacer-48,
+  64: $spacer-64,
+  120: $spacer-120,
+) !default;
+
+$enable-negative-margins: true;
+
+// Radius
+$border-radius: 0.8rem !default;
+$border-radius-sm: 0.4rem !default;
+$border-radius-lg: 1.2rem !default;
+$border-radius-xl: 1.6rem !default;
+$border-radius-2xl: 2.4rem !default;
+$border-radius-pill: 50rem !default;
+
+// Buttons
+$btn-align-items: center !default;
+$btn-border-radius: 0.8rem !default;
+$btn-border-width: 0.1rem !default;
+$btn-box-shadow: transparent !default;
+$btn-disabled-opacity: 1 !default;
+$btn-display-mode: flex !default;
+$btn-font-size: 1.6rem !default;
+$btn-font-weight: 600 !default;
+$btn-gap: 0.8rem !default;
+$btn-height: 4rem !default;
+$btn-search-icon-size: 2.4rem !default;
+$btn-svg-size: 2rem !default;
+$btn-justify-content: center !default;
+$btn-line-height: 2.2rem !default;
+$btn-padding-x: 1.6rem !default;
+$btn-padding-y: 0.8rem !default;
+$btn-search-bg: $blue-100 !default;
+$btn-search-focus-border-color: $blue-200 !default;
+
+// Forms Feedback
+$form-feedback-valid-color: $success !default;
+$form-feedback-invalid-color: $danger !default;
+
+// Forms Text
+$form-text-margin-top: 0.4rem !default;
+$form-text-color: $gray-700 !default;
+$form-text-font-size: 1.2rem !default;
+
+// Forms Label
+$form-label-margin-bottom: 0.8rem !default;
+$form-label-font-size: 1.4rem !default;
+$form-label-color: $gray-800 !default;
+$form-label-icon-size: 1.6rem !default;
+
+// Forms Input
+$input-padding-y: 0.8rem !default;
+$input-padding-x: 1.2rem !default;
+$input-font-size: 1.6rem !default;
+$input-padding-y-lg: 1.2rem !default;
+$input-padding-x-lg: 1.6rem !default;
+$input-font-size-lg: 1.6rem !default;
+$input-padding-y-sm: 0.4rem !default;
+$input-padding-x-sm: 1.2rem !default;
+$input-font-size-sm: 1.4rem !default;
+$input-border-color: $gray-400 !default;
+$input-disabled-bg: $gray-300 !default;
+$input-disabled-color: $gray-700 !default;
+$input-disabled-border-color: $gray-500 !default;
+$input-placeholder-color: $gray-600 !default;
+$input-focus-border-color: $blue-200 !default;
+$input-invalid-border-color: $danger !default;
+$input-filled-border-color: $gray-600 !default;
+$input-border-radius: $border-radius-lg !default;
+$input-border-radius-sm: $border-radius !default;
+$input-border-radius-lg: $border-radius-lg !default;
+
+// Dropdowns
+$dropdown-link-color: $gray-700 !default;
+$dropdown-link-hover-color: darken($gray-900, 5%) !default;
+$dropdown-link-hover-bg: rgba($secondary, 0.1) !default;
+
+// Dropdowns custom
+$dropdowntrigger-selected-border-color: $blue-200 !default;
+$dropdowntrigger-selected-bg-color: $blue-100 !default;
+
+// Image thumbnails
+$thumbnail-bg: $white !default;
+
+// Cards
+$card-spacer-y: 25px !default;
+$card-spacer-x: 35px !default;
+$card-min-height: 110px !default;
+$card-width: 265px !default;
+
+// Modals
+$modal-backdrop-bg: $gray-800 !default;
+$modal-backdrop-opacity: 0.65 !default;
+$modal-footer-border-width: 0 !default;
+$modal-header-border-width: 0 !default;
+$modal-inner-padding: 1.5rem !default;
+$modal-content-border-width: 0 !default;
+
+//Alerts
+$alert-color-scale: 0 !default;
+$alert-border-width: 1px !default;
+$alert-left-border-width: 8px !default;
+$alert-border-scale: -70% !default;
+$alert-border-radius: 8px !default;
+$alert-padding-x: $spacer-12 !default;
+$alert-padding-y: $spacer-8 !default;
+$alert-dismissible-padding-r: $alert-padding-x * 4 !default;
+$alert-margin-bottom: 0 !default;
+
+// Offcanvas
+$offcanvas-padding-y: 1rem !default;
+$offcanvas-padding-x: 1rem !default;
+$offcanvas-vertical-height: auto !default;
+
+// Image thumbnails
+$thumbnail-bg: $white !default;
+$thumbnail-padding: 0.5rem !default;
+
+// Toast
+$toast-font-size: 1.4rem !default;
+$toast-padding-y: 15px !default;
+$toast-padding-x: 20px !default;
+$toast-background-color: $white !default;
+$toast-header-background-color: $white !default;
+$toast-max-width: 450px !default;
+
+// Table
+$table-color: $gray-700 !default;
+$table-striped-bg: rgba($gray-300, 0.25) !default;
+$table-border-color: $gray-300 !default;
+$table-cell-padding-y: 0.75rem !default;
+$table-cell-padding-x: 0.75rem !default;
+$table-cell-padding-y-sm: 0.5rem !default;
+$table-cell-padding-x-sm: 0.5rem !default;
+$table-hover-bg: $gray-300 !default;
+
+// Tabs
+$nav-link-color: $secondary !default;
+$nav-tabs-link-active-bg: $white !default;
+$nav-tabs-link-active-color: $gray-600 !default;
+
+// Tooltip
+$tooltip-padding-y: 1.2rem;
+$tooltip-padding-x: 1.2rem;
+$tooltip-arrow-width: 1.6rem;
+$tooltip-arrow-height: 0.8rem;
+$tooltip-opacity: 0.8;
+$tooltip-border-radius: 8px;
+$tooltip-max-width: 326px;
+
+// Z-index
+$zindex-offcanvas: 1050 !default;
+
+// Horizontal rule
+$hr-color: $gray-400 !default;
+$hr-opacity: 1 !default;
+$hr-default-spacing: 2.4rem !default;
+
+/**== Custom components ==**/
+
+// Action Bar
+$actionbar-background-color: $primary !default;
+$actionbar-font-size: $btn-font-size !default;
+$actionbar-font-size-mobile: $btn-font-size !default;
+
+//Table Explorer
+$table-explorer-main-color: $blue-100 !default;

package/scss/variables/_colors.scss

@@ -1,51 +1,153 @@
-//Override Bootstrap default colors
-
+// Color System
 $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;
 
-$blue: #0d6efd !default;
-$indigo: #6610f2 !default;
-$purple: #6f42c1 !default;
-$pink: #d63384 !default;
-$red: #dc3545 !default;
-$orange: #fd7e14 !default;
-$yellow: #ffc107 !default;
-$green: #7dbf85 !default;
+// Grey Palette
+$gray-100: $white !default;
+$gray-200: #fafafa !default;
+$gray-300: #f2f2f2 !default;
+$gray-400: #e4e4e4 !default;
+$gray-500: #c7c7c7 !default;
+$gray-600: #b0b0b0 !default;
+$gray-700: #909090 !default;
+$gray-800: #4a4a4a !default;
+$gray-900: $black !default;
+
+// Complementary Colors
+$blue: #2a9cc8 !default;
+$indigo: #1a22a2 !default;
+$purple: #763294 !default;
+$pink: #b930a2 !default;
+$red: #e13a3a !default;
+$orange: #ff8d2e !default;
+$yellow: #ecbe30 !default;
+$green: #46bfaf !default;
 $teal: #20c997 !default;
 $cyan: #0dcaf0 !default;
-$deep-blue: #2A9CC8 !default;
-
-$primary: $blue !default;
-$secondary: $gray-600 !default;
-$third: $deep-blue !default;
-$success: $green !default;
-$info: $cyan !default;
-$warning: $yellow !default;
-$danger: $red !default;
+
+// Pale, Light and Dark Palette
+$blue-100: #e4f4ff !default;
+$blue-200: #aadaed !default;
+$blue-500: $blue !default;
+$blue-900: #1b84ac !default;
+
+// Pale, Light and Dark Palette
+$indigo-100: #dde8fd !default;
+$indigo-200: #9297e5 !default;
+$indigo-500: $indigo !default;
+$indigo-900: #121982 !default;
+
+// Pale, Light and Dark Palette
+$purple-100: #f4eaf9 !default;
+$purple-200: #e4f4ff !default;
+$purple-500: $purple !default;
+$purple-900: #e7f5f4 !default;
+
+// Pale, Light and Dark Palette
+$pink-100: #ffe5fb !default;
+$pink-200: #e39cd7 !default;
+$pink-500: $pink !default;
+$pink-900: #9c2288 !default;
+
+// Pale, Light and Dark Palette
+$red-100: #ffd9d9 !default;
+$red-200: #f48a8a !default;
+$red-500: $red !default;
+$red-900: #c82222 !default;
+
+// Pale, Light and Dark Palette
+$orange-100: #ffefe3 !default;
+$orange-200: #ffc696 !default;
+$orange-500: $orange !default;
+$orange-900: #f17a17 !default;
+
+// Pale, Light and Dark Palette
+$yellow-100: #fff4d1 !default;
+$yellow-200: #f6de94 !default;
+$yellow-500: $yellow !default;
+$yellow-900: #daa910 !default;
+
+// Pale, Light and Dark Palette
+$green-100: #e7f5f4 !default;
+$green-200: #a2e0d8 !default;
+$green-500: $green !default;
+$green-900: #33a797 !default;
+
+// Main actions Colors
+$primary: $orange !default;
+$secondary: $blue !default;
+$tertiary: $gray-300 !default;
 $light: $gray-200 !default;
 $medium: $gray-500 !default;
-$dark: $gray-700 !default;
-$ghost: #f5f5fb !default;
+$dark: $gray-800 !default;
+
+// Main colors variants
+$primary-100: $orange-100 !default;
+$primary-200: $orange-200 !default;
+$primary-900: $orange-900 !default;
+$secondary-100: $blue-100 !default;
+$secondary-200: $blue-200 !default;
+$secondary-900: $blue-900 !default;
+
+// Support Palette
+$success: #7dbf85 !default;
+$info: #4bafd5 !default;
+$warning: #f59700 !default;
+$danger: #e13a3a !default;
+
+$danger-900: #d12a2a !default;
+$danger-200: #f3a6a6 !default;
+$danger-100: #ffe9e9 !default;
+
+$warning-900: #e68d00 !default;
+$warning-200: #f2c987 !default;
+$warning-100: #fdecd2 !default;
+
+$success-900: #70a977 !default;
+$success-200: #bbe1bf !default;
+$success-100: #daf1dd !default;
+
+$info-900: #3499bf !default;
+$info-200: #acd6e6 !default;
+$info-100: #d7e8ee !default;
+
+$support-colors: (
+  "success": (
+    base: $success,
+    pale: $success-100,
+    light: $success-200,
+    dark: $success-900,
+  ),
+  "info": (
+    base: $info,
+    pale: $info-100,
+    light: $info-200,
+    dark: $info-900,
+  ),
+  "warning": (
+    base: $warning,
+    pale: $warning-100,
+    light: $warning-200,
+    dark: $warning-900,
+  ),
+  "danger": (
+    base: $danger,
+    pale: $danger-100,
+    light: $danger-200,
+    dark: $danger-900,
+  ),
+) !default;
 
 $theme-colors: (
-    "primary": $primary,
-    "secondary": $secondary,
-    "third": $third,
-    "success": $success,
-    "info": $info,
-    "warning": $warning,
-    "danger": $danger,
-    "light": $light,
-    "medium": $medium,
-    "dark": $dark,
-    "ghost": $ghost
+  "primary": $primary,
+  "secondary": $secondary,
+  "tertiary": $tertiary,
+  "success": $success,
+  "info": $info,
+  "warning": $warning,
+  "danger": $danger,
+  "light": $light,
+  "medium": $medium,
+  "dark": $dark,
 ) !default;
+