I’m able to do it, but the help of friends is always welcome!
I will attach the example file.
@charset "UTF-8"; /*!
* Bootstrap v5.1.3 (https://getbootstrap.com/)
* Copyright 2011-2021 The Bootstrap Authors
* Copyright 2011-2021 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
*/
:root {
--bs-blue: var(--bs-primary);
--bs-indigo: #6610f2;
--bs-purple: #6f42c1;
--bs-pink: #d63384;
--bs-red: #dc3545;
--bs-orange: #fd7e14;
--bs-yellow: #ffc107;
--bs-green: #198754;
--bs-teal: #20c997;
--bs-cyan: #0dcaf0;
--bs-white: #fff;
--bs-gray: #6c757d;
--bs-gray-dark: #343a40;
--bs-gray-100: #f8f9fa;
--bs-gray-200: #e9ecef;
--bs-gray-300: #dee2e6;
--bs-gray-400: #ced4da;
--bs-gray-500: #adb5bd;
--bs-gray-600: #6c757d;
--bs-gray-700: #495057;
--bs-gray-800: #343a40;
--bs-gray-900: #212529;
--bs-primary: #0d6efd; /* cor do tema no bss */
--bs-secondary: #6c757d; /* cor do tema no bss */
--bs-success: #198754; /* cor do tema no bss */
--bs-info: #0dcaf0; /* cor do tema no bss */
--bs-warning: #ffc107; /* cor do tema no bss */
--bs-danger: #dc3545; /* cor do tema no bss */
--bs-light: #f8f9fa; /* cor do tema no bss */
--bs-dark: #212529; /* cor do tema no bss */
--bs-primary-rgb: var(--bs-primary);
--bs-secondary-rgb: 108, 117, 125;
--bs-success-rgb: 25, 135, 84;
--bs-info-rgb: 13, 202, 240;
--bs-warning-rgb: 255, 193, 7;
--bs-danger-rgb: 220, 53, 69;
--bs-light-rgb: 248, 249, 250;
--bs-dark-rgb: 33, 37, 41;
--bs-white-rgb: 255, 255, 255;
--bs-black-rgb: 0, 0, 0;
--bs-body-color-rgb: 33, 37, 41;
--bs-body-bg-rgb: 255, 255, 255;
--bs-font-sans-serif: system-ui, -apple-system, "Segoe UI", Roboto,
"Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif,
"Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
--bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas,
"Liberation Mono", "Courier New", monospace;
--bs-gradient: linear-gradient(
180deg,
rgba(255, 255, 255, 0.15),
rgba(255, 255, 255, 0)
);
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.5;
--bs-body-color: #212529; /* cor do texto */
--bs-body-bg: #fff; /* cor do fundo */
--btn-primary-hover: rgb(var(--bs-primary-rgb), 0.4);
}
…
.btn-primary:hover {
color: #fff;
background-color: var(--btn-primary-hover);
border-color: #0a58ca;
}
I would like to know if it is possible, or will work, as well as the help of friends in some doubts.
Using the part of the BSS, Bootstap Theme, (an image attached), I would like to customize a bootstrap.mim.css to use in all my projects, customizing the fields through the program.
I would edit the bootstrap.min.css, to use its variables replacing the color repetitions with them, this part I’ve tested and it worked, but I need help with the RGB’s part.
Would there be any way for me to create a partial RGB and the opacity would be the default bootstrap.min.css, if so how, examples?
As in another image the colors are repeated dozens of times, this generates a monstrous work when editing all the components, using variables all would be updated automatically.
I’m really bad at expressing myself, even worse, using Google Translate to be able to post the text in English here on the forum.
I think the images help more than the text in what I’m trying to do.
Example
