@coreui/coreui 4.2.6 → 5.0.0-alpha.0

package/scss/_utilities.scss

@@ -19,10 +19,23 @@ $utilities: map-merge(
         start: left,
         end: right,
         none: none,
-      ),
-      rtl: true
+      )
     ),
     // scss-docs-end utils-float
+    // Object Fit utilities
+    // scss-docs-start utils-object-fit
+    "object-fit": (
+      responsive: true,
+      property: object-fit,
+      values: (
+        contain: contain,
+        cover: cover,
+        fill: fill,
+        scale: scale-down,
+        none: none,
+      )
+    ),
+    // scss-docs-end utils-object-fit
     // Opacity utilities
     // scss-docs-start utils-opacity
     "opacity": (
@@ -41,6 +54,14 @@ $utilities: map-merge(
       property: overflow,
       values: auto hidden visible scroll,
     ),
+    "overflow-x": (
+      property: overflow-x,
+      values: auto hidden visible scroll,
+    ),
+    "overflow-y": (
+      property: overflow-y,
+      values: auto hidden visible scroll,
+    ),
     // scss-docs-end utils-overflow
     // scss-docs-start utils-display
     "display": (
@@ -117,8 +138,7 @@ $utilities: map-merge(
       values: (
         null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
         0: 0,
-      ),
-      rtl: true
+      )
     ),
     "border-bottom": (
       property: border-bottom,
@@ -133,8 +153,7 @@ $utilities: map-merge(
       values: (
         null: var(--#{$prefix}border-width) var(--#{$prefix}border-style) var(--#{$prefix}border-color),
         0: 0,
-      ),
-      rtl: true
+      )
     ),
     "border-color": (
       property: border-color,
@@ -147,28 +166,59 @@ $utilities: map-merge(
     "border-top-color": (
       property: border-top-color,
       class: border-top,
-      values: map-merge($theme-colors, ("white": $white)),
-      vars: true
+      local-vars: (
+        "border-opacity": 1
+      ),
+      values: $utilities-border-colors
     ),
     "border-end-color": (
       property: border-right-color,
       class: border-end,
-      values: map-merge($theme-colors, ("white": $white)),
-      vars: true,
-      rtl: true
+      local-vars: (
+        "border-opacity": 1
+      ),
+      values: $utilities-border-colors
     ),
     "border-bottom-color": (
       property: border-bottom-color,
       class: border-bottom,
-      values: map-merge($theme-colors, ("white": $white)),
-      vars: true
+      local-vars: (
+        "border-opacity": 1
+      ),
+      values: $utilities-border-colors
     ),
     "border-start-color": (
       property: border-left-color,
       class: border-start,
-      values: map-merge($theme-colors, ("white": $white)),
-      vars: true,
-      rtl: true
+      local-vars: (
+        "border-opacity": 1
+      ),
+      values: $utilities-border-colors
+    ),
+    "subtle-border-color": (
+      property: border-color,
+      class: border,
+      values: $utilities-border-subtle
+    ),
+    "subtle-border-top-color": (
+      property: border-top-color,
+      class: border-top,
+      values: $utilities-border-subtle
+    ),
+    "subtle-border-end-color": (
+      property: border-right-color,
+      class: border-end,
+      values: $utilities-border-subtle
+    ),
+    "subtle-border-bottom-color": (
+      property: border-bottom-color,
+      class: border-bottom,
+      values: $utilities-border-subtle
+    ),
+    "subtle-border-start-color": (
+      property: border-left-color,
+      class: border-start,
+      values: $utilities-border-subtle
     ),
     "border-width": (
       css-var: true,
@@ -185,7 +235,6 @@ $utilities: map-merge(
       property: border-right-width,
       class: border-end,
       values: $border-widths,
-      rtl: true
     ),
     "border-bottom-width": (
       property: border-bottom-width,
@@ -196,7 +245,6 @@ $utilities: map-merge(
       property: border-left-width,
       class: border-start,
       values: $border-widths,
-      rtl: true
     ),
     "border-opacity": (
       css-var: true,
@@ -370,7 +418,7 @@ $utilities: map-merge(
       responsive: true,
       property: margin,
       class: m,
-      values: map-merge($spacers, (auto: auto)),
+      values: map-merge($spacers, (auto: auto))
     ),
     "margin-x": (
       responsive: true,
@@ -394,8 +442,7 @@ $utilities: map-merge(
       responsive: true,
       property: margin-right,
       class: me,
-      values: map-merge($spacers, (auto: auto)),
-      rtl: true
+      values: map-merge($spacers, (auto: auto))
     ),
     "margin-bottom": (
       responsive: true,
@@ -407,8 +454,7 @@ $utilities: map-merge(
       responsive: true,
       property: margin-left,
       class: ms,
-      values: map-merge($spacers, (auto: auto)),
-      rtl: true
+      values: map-merge($spacers, (auto: auto))
     ),
     // Negative margin utilities
     "negative-margin": (
@@ -439,8 +485,7 @@ $utilities: map-merge(
       responsive: true,
       property: margin-right,
       class: me,
-      values: $negative-spacers,
-      rtl: true
+      values: $negative-spacers
     ),
     "negative-margin-bottom": (
       responsive: true,
@@ -452,8 +497,7 @@ $utilities: map-merge(
       responsive: true,
       property: margin-left,
       class: ms,
-      values: $negative-spacers,
-      rtl: true
+      values: $negative-spacers
     ),
     // Padding utilities
     "padding": (
@@ -484,8 +528,7 @@ $utilities: map-merge(
       responsive: true,
       property: padding-right,
       class: pe,
-      values: $spacers,
-      rtl: true
+      values: $spacers
     ),
     "padding-bottom": (
       responsive: true,
@@ -497,8 +540,7 @@ $utilities: map-merge(
       responsive: true,
       property: padding-left,
       class: ps,
-      values: $spacers,
-      rtl: true
+      values: $spacers
     ),
     // Gap utility
     "gap": (
@@ -507,6 +549,18 @@ $utilities: map-merge(
       class: gap,
       values: $spacers
     ),
+    "row-gap": (
+      responsive: true,
+      property: row-gap,
+      class: row-gap,
+      values: $spacers
+    ),
+    "column-gap": (
+      responsive: true,
+      property: column-gap,
+      class: column-gap,
+      values: $spacers
+    ),
     // scss-docs-end utils-spacing
     // Text
     // scss-docs-start utils-text
@@ -530,8 +584,8 @@ $utilities: map-merge(
       property: font-weight,
       class: fw,
       values: (
-        light: $font-weight-light,
         lighter: $font-weight-lighter,
+        light: $font-weight-light,
         normal: $font-weight-normal,
         medium: $font-weight-medium,
         semibold: $font-weight-semibold,
@@ -557,8 +611,7 @@ $utilities: map-merge(
         start: left,
         end: right,
         center: center,
-      ),
-      rtl: true
+      )
     ),
     "text-decoration": (
       property: text-decoration,
@@ -591,22 +644,19 @@ $utilities: map-merge(
       local-vars: (
         "text-opacity": 1
       ),
+      dark-mode: true,
       values: map-merge(
         $utilities-text-colors,
         (
-          "muted": $text-muted,
+          "muted": $text-muted, // deprecated
           "black-50": rgba($black, .5), // deprecated
           "white-50": rgba($white, .5), // deprecated
+          "body-secondary": var(--#{$prefix}secondary-color),
+          "body-tertiary": var(--#{$prefix}tertiary-color),
+          "body-emphasis": var(--#{$prefix}emphasis-color),
           "reset": inherit,
-          "high-emphasis-inverse": $text-high-emphasis-inverse,
-          "medium-emphasis-inverse": $text-medium-emphasis-inverse,
-          "disabled-inverse": $text-disabled-inverse,
-          "high-emphasis": $text-high-emphasis,
-          "medium-emphasis": $text-medium-emphasis,
-          "disabled": $text-disabled
         )
-      ),
-      vars: true
+      )
     ),
     "text-opacity": (
       css-var: true,
@@ -618,6 +668,11 @@ $utilities: map-merge(
         100: 1
       )
     ),
+    "text-color": (
+      property: color,
+      class: text,
+      values: $utilities-text-emphasis-colors
+    ),
     // scss-docs-end utils-color
     // scss-docs-start utils-bg-color
     "background-color": (
@@ -626,13 +681,16 @@ $utilities: map-merge(
       local-vars: (
         "bg-opacity": 1
       ),
+      dark-mode: true,
       values: map-merge(
         $utilities-bg-colors,
         (
-          "transparent": transparent
+          "transparent": transparent,
+          "body-secondary": rgba(var(--#{$prefix}secondary-bg-rgb), var(--#{$prefix}bg-opacity)),
+          "body-tertiary": rgba(var(--#{$prefix}tertiary-bg-rgb), var(--#{$prefix}bg-opacity)),
+          "body-emphasis": rgba(var(--#{$prefix}emphasis-bg-rgb), var(--#{$prefix}bg-opacity)),
         )
-      ),
-      vars: true
+      )
     ),
     "bg-opacity": (
       css-var: true,
@@ -645,6 +703,12 @@ $utilities: map-merge(
         100: 1
       )
     ),
+    "subtle-background-color": (
+      property: background-color,
+      class: bg,
+      dark-mode: true,
+      values: $utilities-bg-subtle
+    ),
     // scss-docs-end utils-bg-color
     "gradient": (
       property: background-image,
@@ -681,24 +745,62 @@ $utilities: map-merge(
     "rounded-top": (
       property: border-top-left-radius border-top-right-radius,
       class: rounded-top,
-      values: (null: var(--#{$prefix}border-radius))
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-sm),
+        2: var(--#{$prefix}border-radius),
+        3: var(--#{$prefix}border-radius-lg),
+        4: var(--#{$prefix}border-radius-xl),
+        5: var(--#{$prefix}border-radius-2xl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill)
+      )
     ),
     "rounded-end": (
       property: border-top-right-radius border-bottom-right-radius,
       class: rounded-end,
-      values: (null: var(--#{$prefix}border-radius)),
-      rtl: true
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-sm),
+        2: var(--#{$prefix}border-radius),
+        3: var(--#{$prefix}border-radius-lg),
+        4: var(--#{$prefix}border-radius-xl),
+        5: var(--#{$prefix}border-radius-2xl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill)
+      )
     ),
     "rounded-bottom": (
       property: border-bottom-right-radius border-bottom-left-radius,
       class: rounded-bottom,
-      values: (null: var(--#{$prefix}border-radius))
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-sm),
+        2: var(--#{$prefix}border-radius),
+        3: var(--#{$prefix}border-radius-lg),
+        4: var(--#{$prefix}border-radius-xl),
+        5: var(--#{$prefix}border-radius-2xl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill)
+      )
     ),
     "rounded-start": (
       property: border-bottom-left-radius border-top-left-radius,
       class: rounded-start,
-      values: (null: var(--#{$prefix}border-radius)),
-      rtl: true
+      values: (
+        null: var(--#{$prefix}border-radius),
+        0: 0,
+        1: var(--#{$prefix}border-radius-sm),
+        2: var(--#{$prefix}border-radius),
+        3: var(--#{$prefix}border-radius-lg),
+        4: var(--#{$prefix}border-radius-xl),
+        5: var(--#{$prefix}border-radius-2xl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill)
+      )
     ),
     // scss-docs-end utils-border-radius
     // scss-docs-start utils-visibility
@@ -709,8 +811,13 @@ $utilities: map-merge(
         visible: visible,
         invisible: hidden,
       )
-    )
+    ),
     // scss-docs-end utils-visibility
+    "z-index": (
+      property: z-index,
+      class: z,
+      values: $zindex-levels,
+    )
   ),
   $utilities
 );

package/scss/_variables-dark.scss

@@ -0,0 +1,109 @@
+// Dark color mode variables
+//
+// Custom variables for the `[data-coreui-theme="dark"]` theme. Use this as a starting point for your own custom color modes by creating a new theme-specific file like `_variables-dark.scss` and adding the variables you need.
+
+//
+// Global colors
+//
+
+// scss-docs-start sass-dark-mode-vars
+$gray-100-dark:                    #f8f9fa !default;
+// $gray-200-dark:                    #e9ecef !default;
+$gray-300-dark:                    #dee2e6 !default;
+// $gray-400-dark:                    #ced4da !default;
+$gray-500-dark:                    #adb5bd !default;
+// $gray-600-dark:                    #6c757d !default;
+$gray-700-dark:                    #495057 !default;
+$gray-800-dark:                    #343a40 !default;
+$gray-900-dark:                    #212529 !default;
+
+$primary-dark:                      tint-color(desaturate($primary, 30%), 30%) !default;
+$secondary-dark:                    desaturate($secondary, 30%) !default;
+$success-dark:                      desaturate($success, 30%) !default;
+$info-dark:                         desaturate($info, 30%) !default;
+$warning-dark:                      desaturate($warning, 30%) !default;
+$danger-dark:                       desaturate($danger, 30%) !default;
+$light-dark:                        rgba($white, .1) !default;
+$dark-dark:                         rgba($black, .1) !default;
+
+$theme-colors-dark: (
+  "primary":    $primary-dark,
+  "secondary":  $secondary-dark,
+  "success":    $success-dark,
+  "info":       $info-dark,
+  "warning":    $warning-dark,
+  "danger":     $danger-dark,
+  "light":      $light-dark,
+  "dark":       $dark-dark
+) !default;
+
+$primary-text-dark:                 $blue-300 !default;
+$secondary-text-dark:               $gray-300-dark !default;
+$success-text-dark:                 $green-300 !default;
+$info-text-dark:                    $cyan-300 !default;
+$warning-text-dark:                 $yellow-300 !default;
+$danger-text-dark:                  $red-300 !default;
+$light-text-dark:                   $gray-100-dark !default;
+$dark-text-dark:                    $gray-300-dark !default;
+
+$primary-bg-subtle-dark:            $blue-900 !default;
+$secondary-bg-subtle-dark:          $gray-900-dark !default;
+$success-bg-subtle-dark:            $green-900 !default;
+$info-bg-subtle-dark:               $cyan-900 !default;
+$warning-bg-subtle-dark:            $yellow-900 !default;
+$danger-bg-subtle-dark:             $red-900 !default;
+$light-bg-subtle-dark:              $gray-800-dark !default;
+$dark-bg-subtle-dark:               mix($gray-800-dark, $black) !default;
+
+$primary-border-subtle-dark:        $blue-700 !default;
+$secondary-border-subtle-dark:      $gray-700-dark !default;
+$success-border-subtle-dark:        $green-700 !default;
+$info-border-subtle-dark:           $cyan-800 !default;
+$warning-border-subtle-dark:        $yellow-800 !default;
+$danger-border-subtle-dark:         $red-700 !default;
+$light-border-subtle-dark:          $gray-700-dark !default;
+$dark-border-subtle-dark:           $gray-800-dark !default;
+
+$body-color-dark:                   $gray-500-dark !default;
+$body-bg-dark:                      $gray-900-dark !default;
+$body-emphasis-color-dark:          $gray-100-dark !default;
+$body-secondary-color-dark:         rgba($body-color-dark, .75) !default;
+$body-secondary-bg-dark:            $gray-800-dark !default;
+$body-tertiary-color-dark:          rgba($body-color-dark, .5) !default;
+$body-tertiary-bg-dark:             mix($gray-800-dark, $gray-900-dark, 50%) !default;
+$emphasis-color-dark:               $white !default;
+$border-color-dark:                 $gray-700-dark !default;
+$border-color-translucent-dark:     rgba($white, .15) !default;
+$headings-color-dark:               #fff !default;
+$link-color-dark:                   $blue-300 !default;
+$link-hover-color-dark:             $blue-200 !default;
+$code-color-dark:                   $pink-300 !default;
+
+
+//
+// Forms
+//
+
+$form-select-indicator-color-dark:  $body-color-dark !default;
+$form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path fill='none' stroke='#{$form-select-indicator-color-dark}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/></svg>") !default;
+
+$form-switch-color-dark:            rgba($white, .25) !default;
+$form-switch-bg-image-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color-dark}'/></svg>") !default;
+
+
+//
+// Accordion
+//
+
+$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+$accordion-button-active-icon-dark:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$primary-text-dark}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
+
+//
+// Sidebar
+//
+
+$sidebar-color-dark:               var(--#{$prefix}body-color) !default;
+$sidebar-bg-dark:                  var(--#{$prefix}tertiary-bg) !default;
+$sidebar-nav-link-active-bg-dark:  rgba(var(--#{$prefix}tertiary-color-rgb), .1) !default;
+$sidebar-nav-link-hover-bg-dark:   rgba(var(--#{$prefix}tertiary-color-rgb), .1) !default;
+// scss-docs-end sass-dark-mode-vars