Global variables
Dynamic Framework, like Bootstrap, harnesses the power of CSS variables to enable seamless and efficient customization of themes. CSS variables are essentially placeholders for values that can be reused throughout your stylesheets. This means you can define a variable once and then reference it multiple times, simplifying the process of maintaining and updating your styles.
Bootstrap comes with a wide array of pre-defined CSS variables that control various aspects of its design system, including colors, typography, spacing, and more. These variables are prefixed with --bs- to avoid conflicts with your own custom variables. To see a comprehensive list of available Bootstrap CSS variables, you can refer to the official documentation
:root,[data-bs-theme=dynamic] {
/* BASE COLORS */
--bs-blue-rgb: 54, 109, 219;
--bs-indigo-rgb: 72, 72, 183;
--bs-purple-rgb: 82, 82, 152;
--bs-pink-rgb: 230, 0, 99;
--bs-red-rgb: 216, 27, 96;
--bs-orange-rgb: 211, 47, 47;
--bs-yellow-rgb: 251, 192, 45;
--bs-green-rgb: 2, 135, 89;
--bs-teal-rgb: 32, 201, 151;
--bs-cyan-rgb: 13, 202, 240;
--bs-black-rgb: 0, 0, 0;
--bs-white-rgb: 255, 255, 255;
--bs-gray-rgb: 109, 109, 130;
--bs-gray-dark-rgb: 54, 55, 68;
/* BASE COLOR GRAY */
--bs-gray-100-rgb: 247, 247, 255;
--bs-gray-200-rgb: 230, 230, 243;
--bs-gray-300-rgb: 213, 212, 230;
--bs-gray-400-rgb: 161, 161, 181;
--bs-gray-500-rgb: 109, 109, 130;
--bs-gray-600-rgb: 97, 97, 115;
--bs-gray-700-rgb: 85, 85, 100;
--bs-gray-800-rgb: 54, 55, 68;
--bs-gray-900-rgb: 22, 23, 35;
--bs-gray-soft-rgb: 250, 250, 250;
--bs-primary-soft-rgb: 255, 249, 250;
--bs-secondary-soft-rgb: 251, 250, 255;
/* BASE COLOR PRIMARY */
--bs-primary-100-rgb: 247, 209, 223;
--bs-primary-200-rgb: 239, 164, 191;
--bs-primary-300-rgb: 232, 118, 160;
--bs-primary-400-rgb: 224, 73, 128;
--bs-primary-500-rgb: var(--bs-primary-rgb);
--bs-primary-600-rgb: 173, 22, 77;
--bs-primary-700-rgb: 130, 16, 58;
--bs-primary-800-rgb: 86, 11, 38;
--bs-primary-900-rgb: 43, 5, 19;
/* BASE COLOR SECONDARY */
--bs-secondary-100-rgb: 218, 218, 241;
--bs-secondary-200-rgb: 182, 182, 226;
--bs-secondary-300-rgb: 145, 145, 212;
--bs-secondary-400-rgb: 109, 109, 197;
--bs-secondary-500-rgb: var(--bs-secondary-rgb);
--bs-secondary-600-rgb: 58, 58, 146;
--bs-secondary-700-rgb: 43, 43, 110;
--bs-secondary-800-rgb: 29, 29, 73;
--bs-secondary-900-rgb: 14, 14, 37;
/* BASE COLOR SUCCESS */
--bs-success-100-rgb: 204, 231, 222;
--bs-success-200-rgb: 154, 207, 189;
--bs-success-300-rgb: 103, 183, 155;
--bs-success-400-rgb: 53, 159, 122;
--bs-success-500-rgb: var(--bs-success-rgb);
--bs-success-600-rgb: 2, 108, 71;
--bs-success-700-rgb: 1, 81, 53;
--bs-success-800-rgb: 1, 54, 36;
--bs-success-900-rgb: 0, 27, 18;
/* BASE COLOR INFO */
--bs-info-100-rgb: 215, 226, 248;
--bs-info-200-rgb: 175, 197, 241;
--bs-info-300-rgb: 134, 167, 233;
--bs-info-400-rgb: 94, 138, 226;
--bs-info-500-rgb: var(--bs-info-rgb);
--bs-info-600-rgb: 43, 87, 175;
--bs-info-700-rgb: 32, 65, 131;
--bs-info-800-rgb: 22, 44, 88;
--bs-info-900-rgb: 11, 22, 44;
/* BASE COLOR WARNING */
--bs-warning-100-rgb: 254, 242, 213;
--bs-warning-200-rgb: 253, 230, 171;
--bs-warning-300-rgb: 253, 217, 129;
--bs-warning-400-rgb: 252, 205, 87;
--bs-warning-500-rgb: var(--bs-warning-rgb);
--bs-warning-600-rgb: 201, 154, 36;
--bs-warning-700-rgb: 151, 115, 27;
--bs-warning-800-rgb: 100, 77, 18;
--bs-warning-900-rgb: 50, 38, 9;
/* BASE COLOR DANGER */
--bs-danger-100-rgb: 246, 213, 213;
--bs-danger-200-rgb: 237, 172, 172;
--bs-danger-300-rgb: 229, 130, 130;
--bs-danger-400-rgb: 220, 89, 89;
--bs-danger-500-rgb: var(--bs-danger-rgb);
--bs-danger-600-rgb: 169, 38, 38;
--bs-danger-700-rgb: 127, 28, 28;
--bs-danger-800-rgb: 84, 19, 19;
--bs-danger-900-rgb: 42, 9, 9;
/* BASE COLORS RGB */
--bs-primary-rgb: var(--bs-red-rgb);
--bs-secondary-rgb: var(--bs-indigo-rgb);
--bs-success-rgb: var(--bs-green-rgb);
--bs-info-rgb: var(--bs-blue-rgb);
--bs-warning-rgb: var(--bs-yellow-rgb);
--bs-danger-rgb: var(--bs-orange-rgb);
--bs-light-rgb: var(--bs-gray-100-rgb);
--bs-dark-rgb: var(--bs-gray-900-rgb);
/* MISCELLANEOUS */
--bs-font-sans-serif: "Source Sans 3", sans-serif;
--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-code-color: rgb(var(--bs-code-color-rgb));
--bs-code-color-rgb: var(--bs-primary-rgb);
--bs-highlight-bg: var(--bs-warning-100);
/* GENERAL BODY */
--bs-root-font-size: 16px;
--bs-body-font-family: var(--bs-font-sans-serif);
--bs-body-font-size: 1rem;
--bs-body-font-weight: 400;
--bs-body-line-height: 1.2;
--bs-body-color: rgb(var(--bs-body-color-rgb));
--bs-body-color-rgb: var(--bs-gray-900-rgb);
--bs-body-bg: rgb(var(--bs-body-bg-rgb));
--bs-body-bg-rgb: var(--bs-secondary-soft-rgb);
/* SECONDARY COLORS AND BACKGROUNDS */
--bs-emphasis-color: rgb(var(--bs-emphasis-color-rgb));
--bs-emphasis-color-rgb: var(--bs-black-rgb);
--bs-secondary-color: rgba(var(--bs-secondary-color-rgb), .75);
--bs-secondary-color-rgb: var(--bs-body-color-rgb);
--bs-secondary-bg: rgb(var(--bs-secondary-bg-rgb));
--bs-secondary-bg-rgb: var(--bs-gray-200);
--bs-tertiary-color: rgba(var(--bs-tertiary-color-rgb), .5);
--bs-tertiary-color-rgb: var(--bs-body-color-rgb);
--bs-tertiary-bg: rgb(var(--bs-tertiary-bg-rgb));
--bs-tertiary-bg-rgb: var(--bs-gray-100);
--bs-heading-color: inherit;
/* LINK PROPERTIES */
--bs-link-color: rgb(var(--bs-link-color-rgb));
--bs-link-color-rgb: var(--bs-primary-rgb);
--bs-link-decoration: underline;
--bs-link-hover-color: rgb(var(--bs-link-hover-color-rgb));
--bs-link-hover-color-rgb: var(--bs-primary-700-rgb);
--bs-link-hover-decoration: underline;
/* BORDERS */
--bs-border-width: 1px;
--bs-border-style: solid;
--bs-border-color: var(--bs-gray-200);
--bs-border-color-translucent: rgba(var(--bs-black-rgb), 0.175);
/* BORDER RADIUS */
--bs-border-radius: 1rem;
--bs-border-radius-sm: 0.5rem;
--bs-border-radius-lg: 1.5rem;
--bs-border-radius-xl: 2rem;
--bs-border-radius-xxl: 2.5rem;
--bs-border-radius-2xl: var(--bs-border-radius-xxl);
--bs-border-radius-pill: 50rem;
/* SHADOWS */
--bs-box-shadow: 0 12px 14px 0 rgba(22, 23, 35, 0.2);
--bs-box-shadow-sm: 0 8px 12px 0 rgba(22, 23, 35, 0.05);
--bs-box-shadow-lg: 0 20px 22px 0 rgba(22, 23, 35, 0.25);
--bs-box-shadow-inset: inset 0 1px 2px rgba(0, 0, 0, 0.75);
/* FORMS */
--bs-focus-ring-width: 0.25rem;
--bs-focus-ring-opacity: 1;
--bs-focus-ring-color: rgba(var(--bs-secondary-rgb), var(--bs-focus-ring-opacity));
--bs-form-valid-color: var(--bs-gray);
--bs-form-valid-border-color: var(--bs-success);
--bs-form-invalid-color: var(--bs-danger);
--bs-form-invalid-border-color: var(--bs-danger);
/* SIZING */
--bs-ref-spacer-0: 0;
--bs-ref-spacer-1: 0.25rem;
--bs-ref-spacer-2: 0.5rem;
--bs-ref-spacer-3: 0.75rem;
--bs-ref-spacer-4: 1rem;
--bs-ref-spacer-5: 1.25rem;
--bs-ref-spacer-6: 1.5rem;
--bs-ref-spacer-7: 1.75rem;
--bs-ref-spacer-8: 2rem;
--bs-ref-spacer-9: 2.25rem;
--bs-ref-spacer-10: 2.5rem;
--bs-ref-spacer-11: 2.75rem;
--bs-ref-spacer-12: 3rem;
--bs-ref-spacer-13: 3.25rem;
--bs-ref-spacer-14: 3.5rem;
--bs-ref-display-1: 7.5rem;
--bs-ref-display-2: 4.5rem;
--bs-ref-display-3: 4rem;
--bs-ref-display-4: 3.5rem;
--bs-ref-display-5: 3rem;
--bs-ref-display-6: 2.5rem;
--bs-ref-fs-1: 4rem;
--bs-ref-fs-2: 3.5rem;
--bs-ref-fs-3: 3rem;
--bs-ref-fs-4: 2rem;
--bs-ref-fs-5: 1.5rem;
--bs-ref-fs-6: 1.125rem;
--bs-ref-fs-small: 0.875rem;
--bs-ref-fw-lighter: lighter;
--bs-ref-fw-light: 200;
--bs-ref-fw-normal: 400;
--bs-ref-fw-semibold: 600;
--bs-ref-fw-bold: 700;
--bs-ref-fw-bolder: 800;
/* LABEL */
--bs-label-padding-y: var(--bs-ref-spacer-0);
--bs-label-padding-x: var(--bs-ref-spacer-2);
--bs-label-font-size: var(--bs-ref-fs-small);
--bs-label-font-weight: var(--bs-ref-fw-bold);
--bs-label-color: var(--bs-gray)
}
Colors
The Dynamic framework features an extensive color system that allows for theming of styles and components. This facilitates more comprehensive customization and extension for any project.
The fundamental color base for constructing components, such as alerts and badges with their respective colors, should be specified in RGB values.
Examples
All colors defined in the Dynamic Framework (including primary, secondary, gray, success, info, warning, and danger) are structured on a scale from 100 to 900, with the variant 500 serving as the primary representation of each color. For instance, here's the scale for the gray color:
BASE COLOR PRIMARY
The primary color variants range from 100 to 900, with 500 being the main color. This color is utilized in buttons and essential actions such as backgrounds, text, alerts, etc.
Examples
BASE COLOR SECONDARY
Scale from 100 to 900 for the secondary color variants, the main color is 500. It is employed in buttons and secondary actions such as backgrounds, texts, alerts, etc. Additionally, it defaults in the backgrounds of checkboxes and radio buttons.
Examples
BASE COLOR SUCCESS
Scale from 100 to 900 for success color variants, the main color is 500.
Examples
BASE COLOR INFO
Escala del 100 al 900 para las variantes del color info, el principal es el 500.
Examples
BASE COLOR WARNING
Scale from 100 to 900 for warning color variants, the main color is 500.
Examples
BASE COLOR DANGER
Scale from 100 to 900 for warning color variants, the main color is 500.
Examples
BASE COLORS RGB
This section defines variables that control the background color of various UI components, including alerts and potentially others that leverage these variables.
Miscellaneous
Here you can configure slightly less used tags (like pre, code)
General Body
This set of variables details how to control the general styles of font-size, color, font-weight and background.
SECONDARY COLORS AND BACKGROUNDS
Define auxiliary colors for tooltips, overlays, and link styles (color, decoration, hover effects).
LINK PROPERTIES
This section defines styles for links, including:
color: Base color of the link text.text-decoration: Properties like underline or none to control link appearance.hover: Styles applied on hover interaction (e.g., color change).
BORDERS
Manage border properties (width, color, style) across components like buttons, navigation, tables, etc.
BORDER RADIUS
Set corner rounding for various components with options for different sizes (sm, md, lg, xl, xxl, 2xl y pill) and potentially a pill option for fully rounded corners.
SHADOWS
Utilize pre-built shadow utilities with classes like .shadow and configure intensity and color using variants (0, sm, md, lg, xl).
FORMS
Control styling for input fields during focus events and validation states.
SIZING
Configure global size variables used for margins, paddings, fonts (size and weight) across various HTML elements.
LABEL
Set padding, font styles, and color for labels.