@spaziodati/atoka-design-system 7.12.0 → 7.12.1-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaziodati/atoka-design-system",
-  "version": "7.12.0",
+  "version": "7.12.1-beta.1",
   "description": "",
   "scripts": {
     "serve-build": "http-server -p 6006 .out . > http.log 2>&1 & echo $! > /var/tmp/pidfile",
@@ -41,7 +41,7 @@
     "leaflet": "1.9.4",
     "leaflet-image": "0.4.0",
     "react": "18.2.0",
-    "react-bootstrap": "1.6.7",
+    "react-bootstrap": "2.10.2",
     "react-dom": "18.2.0",
     "react-select": "5.8.3"
   },
@@ -89,7 +89,7 @@
     "@types/react-dom": "18.2.25",
     "@typescript-eslint/eslint-plugin": "5.27.1",
     "@typescript-eslint/parser": "5.27.1",
-    "bootstrap": "latest-4",
+    "bootstrap": "5.3.0",
     "classnames": "2.5.1",
     "css-loader": "3.6.0",
     "css-minimizer-webpack-plugin": "3.3.1",
@@ -120,7 +120,7 @@
     "mini-css-extract-plugin": "2.9.2",
     "puppeteer": "24.1.1",
     "react": "18.2.0",
-    "react-bootstrap": "1.6.7",
+    "react-bootstrap": "^2.10.2",
     "react-datepicker": "8.0.0",
     "react-dom": "18.2.0",
     "react-leaflet": "4.2.1",

package/styles/atoka-bootstrap-variables.scss

@@ -30,7 +30,7 @@ $enable-gradients: false;
 $font-weight-base: $font-weight;
 
 // _grid_framework.less
-$grid-columns: 24;
+$grid-columns: 12;
 $grid-gutter-width: 4 * $spacing-unit;
 $spacer: 2 * $spacing-unit;
 
@@ -62,3 +62,5 @@ $headings-color: $black;
 $progress-bar-color: var(--atoka_colors_primaryContrastText);
 $progress-bar-bg: var(--atoka_colors_primaryMain);
 $text-muted: var(--atoka_colors_mediumEmphasisMain);
+$link-decoration: none;
+$carousel-indicator-active-bg: var(--atoka_colors_highEmphasisMain) !important;

package/styles/atoka-bs.scss

@@ -175,4 +175,14 @@
     .text-primary {
         color: var(--atoka_colors_primaryMain, $blue300) !important;
     }
+
+    // this comes from BS5 and is not editable with a variable
+
+    .placeholder {
+        background-color: unset !important;
+    }
+
+    // override BS variables, do like Jesus wants it to be done
+    --#{prefix}-form-invalid-color: var(--atoka_colors_errorMain);
+
 }

package/styles/variables.scss

@@ -71,7 +71,7 @@ $box-shadow: var(--atoka_colors_boxShadow);
 $light-box-shadow: 1px 1px $spacing-unit 0 rgb(0 0 0 / 0.10);
 $box-shadow-select-options-down: 0px 3px 4px rgb(90 90 90 / 0.15);
 $box-shadow-select-options-up: 0px -3px 4px rgb(90 90 90 / 0.15);
-$grid-row-columns: 24;
+$grid-row-columns: 12;
 $font-size-xxs: 10px;
 $font-size-xs: 11px;
 $font-size-sm: 12px;
@@ -108,3 +108,12 @@ $placeholder-color: $gray300;
 $input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 $logo-white-size: $spacing-unit * 4;
 $primary-main-with-transparency: hsl(from var(--atoka_colors_primaryMain) h s l / $transparency-unit);
+
+// Containers
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1140px
+) !default;