@coreui/coreui 4.2.6 → 4.3.0-alpha.0

package/scss/_type.scss

@@ -35,6 +35,8 @@
 @each $display, $font-size in $display-font-sizes {
   .display-#{$display} {
     @include font-size($font-size);
+    font-family: $display-font-family;
+    font-style: $display-font-style;
     font-weight: $display-font-weight;
     line-height: $display-line-height;
   }
@@ -67,7 +69,7 @@
   display: inline-block;
 
   &:not(:last-child) {
-    @include ltr-rtl("margin-right", $list-inline-padding);
+    margin-right: $list-inline-padding;
   }
 }
 

package/scss/_utilities.scss

@@ -23,6 +23,20 @@ $utilities: map-merge(
       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 +55,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": (
@@ -48,7 +70,7 @@ $utilities: map-merge(
       print: true,
       property: display,
       class: d,
-      values: inline inline-block block grid table table-row table-cell flex inline-flex none
+      values: inline inline-block block grid inline-grid table table-row table-cell flex inline-flex none
     ),
     // scss-docs-end utils-display
     // scss-docs-start utils-shadow
@@ -63,6 +85,14 @@ $utilities: map-merge(
       )
     ),
     // scss-docs-end utils-shadow
+    // scss-docs-start utils-focus-ring
+    "focus-ring": (
+      css-var: true,
+      css-variable-name: focus-ring-color,
+      class: focus-ring,
+      values: map-loop($theme-colors-rgb, rgba-css-var, "$key", "focus-ring")
+    ),
+    // scss-docs-end utils-focus-ring
     // scss-docs-start utils-position
     "position": (
       property: position,
@@ -171,8 +201,7 @@ $utilities: map-merge(
       rtl: true
     ),
     "border-width": (
-      css-var: true,
-      css-variable-name: border-width,
+      property: border-width,
       class: border,
       values: $border-widths
     ),
@@ -198,6 +227,11 @@ $utilities: map-merge(
       values: $border-widths,
       rtl: true
     ),
+    "subtle-border-color": (
+      property: border-color,
+      class: border,
+      values: $utilities-border-subtle
+    ),
     "border-opacity": (
       css-var: true,
       class: border-opacity,
@@ -370,7 +404,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,
@@ -507,6 +541,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 +576,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,
@@ -588,25 +634,28 @@ $utilities: map-merge(
     "color": (
       property: color,
       class: text,
+      dark-mode: true,
       local-vars: (
         "text-opacity": 1
       ),
       values: map-merge(
         $utilities-text-colors,
         (
-          "muted": $text-muted,
+          "muted": var(--#{$prefix}secondary-color), // 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
+          "high-emphasis-inverse": var(--#{$prefix}high-emphasis-inverse), // deprecated
+          "medium-emphasis-inverse": var(--#{$prefix}medium-emphasis-inverse), // deprecated
+          "disabled-inverse": var(--#{$prefix}disabled-inverse), // deprecated
+          "high-emphasis": var(--#{$prefix}high-emphasis), // deprecated
+          "medium-emphasis": var(--#{$prefix}medium-emphasis), // deprecated
+          "disabled": var(--#{$prefix}disabled)
         )
-      ),
-      vars: true
+      )
     ),
     "text-opacity": (
       css-var: true,
@@ -618,21 +667,78 @@ $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-links
+    "link-opacity": (
+      css-var: true,
+      class: link-opacity,
+      state: hover,
+      values: (
+        10: .1,
+        25: .25,
+        50: .5,
+        75: .75,
+        100: 1
+      )
+    ),
+    "link-offset": (
+      property: text-underline-offset,
+      class: link-offset,
+      state: hover,
+      values: (
+        1: .125em,
+        2: .25em,
+        3: .375em,
+      )
+    ),
+    "link-underline": (
+      property: text-decoration-color,
+      class: link-underline,
+      local-vars: (
+        "link-underline-opacity": 1
+      ),
+      values: map-merge(
+        $utilities-links-underline,
+        (
+          null: rgba(var(--#{$prefix}link-color-rgb), var(--#{$prefix}link-underline-opacity, 1)),
+        )
+      )
+    ),
+    "link-underline-opacity": (
+      css-var: true,
+      class: link-underline-opacity,
+      state: hover,
+      values: (
+        0: 0,
+        10: .1,
+        25: .25,
+        50: .5,
+        75: .75,
+        100: 1
+      ),
+    ),
+    // scss-docs-end utils-links
     // scss-docs-start utils-bg-color
     "background-color": (
       property: background-color,
       class: bg,
+      dark-mode: true,
       local-vars: (
         "bg-opacity": 1
       ),
       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)),
         )
-      ),
-      vars: true
+      )
     ),
     "bg-opacity": (
       css-var: true,
@@ -645,6 +751,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,
@@ -673,7 +785,7 @@ $utilities: map-merge(
         2: var(--#{$prefix}border-radius),
         3: var(--#{$prefix}border-radius-lg),
         4: var(--#{$prefix}border-radius-xl),
-        5: var(--#{$prefix}border-radius-2xl),
+        5: var(--#{$prefix}border-radius-xxl),
         circle: 50%,
         pill: var(--#{$prefix}border-radius-pill)
       )
@@ -681,23 +793,63 @@ $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-xxl),
+        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)),
+      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-xxl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill)
+      ),
       rtl: true
     ),
     "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-xxl),
+        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)),
+      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-xxl),
+        circle: 50%,
+        pill: var(--#{$prefix}border-radius-pill)
+      ),
       rtl: true
     ),
     // scss-docs-end utils-border-radius
@@ -709,8 +861,15 @@ $utilities: map-merge(
         visible: visible,
         invisible: hidden,
       )
-    )
+    ),
     // scss-docs-end utils-visibility
+    // scss-docs-start utils-zindex
+    "z-index": (
+      property: z-index,
+      class: z,
+      values: $zindex-levels,
+    )
+    // scss-docs-end utils-zindex
   ),
   $utilities
 );

package/scss/_variables-dark.scss

@@ -0,0 +1,169 @@
+// 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
+// scss-docs-start gray-color-dark-variables
+$gray-100-dark: #f3f4f7 !default;
+$gray-200-dark: #e7eaee !default;
+$gray-300-dark: #dbdfe6 !default;
+$gray-400-dark: #cfd4de !default;
+$gray-500-dark: #aab3c5 !default;
+$gray-600-dark: #6d7d9c !default;
+$gray-700-dark: #4a566d !default;
+$gray-800-dark: #323a49 !default;
+$gray-900-dark: #212631 !default;
+// scss-docs-end gray-color-dark-variables
+
+// fusv-disable
+// scss-docs-start gray-colors-dark-map
+$grays-dark: (
+  "100": $gray-100-dark,
+  "200": $gray-200-dark,
+  "300": $gray-300-dark,
+  "400": $gray-400-dark,
+  "500": $gray-500-dark,
+  "600": $gray-600-dark,
+  "700": $gray-700-dark,
+  "800": $gray-800-dark,
+  "900": $gray-900-dark
+) !default;
+// scss-docs-end gray-colors-dark-map
+// fusv-enable
+
+// scss-docs-start theme-color-dark-variables
+$primary-dark:       tint-color(desaturate($primary, 20%), 20%) !default;
+$secondary-dark:     desaturate($secondary, 10%) !default;
+$success-dark:       desaturate($success, 10%) !default;
+$info-dark:          desaturate($info, 10%) !default;
+$warning-dark:       desaturate($warning, 10%) !default;
+$danger-dark:        desaturate($danger, 10%) !default;
+$light-dark:         desaturate($light, 10%) !default;
+$dark-dark:          desaturate($dark, 10%) !default;
+// scss-docs-end theme-color-dark-variables
+
+// scss-docs-start theme-colors-dark-map
+$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;
+// scss-docs-end theme-colors-dark-map
+
+// scss-docs-start theme-text-dark-variables
+$primary-text-emphasis-dark:        $primary-text-emphasis !default;
+$secondary-text-emphasis-dark:      $secondary-text-emphasis !default;
+$success-text-emphasis-dark:        $success-text-emphasis !default;
+$info-text-emphasis-dark:           $info-text-emphasis !default;
+$warning-text-emphasis-dark:        $warning-text-emphasis !default;
+$danger-text-emphasis-dark:         $danger-text-emphasis !default;
+$light-text-emphasis-dark:          $gray-100-dark !default;
+$dark-text-emphasis-dark:           $gray-300-dark !default;
+// scss-docs-end theme-text-dark-variables
+
+// scss-docs-start theme-bg-subtle-dark-variables
+$primary-bg-subtle-dark:            $primary-bg-subtle !default;
+$secondary-bg-subtle-dark:          $secondary-bg-subtle !default;
+$success-bg-subtle-dark:            $success-bg-subtle !default;
+$info-bg-subtle-dark:               $info-bg-subtle !default;
+$warning-bg-subtle-dark:            $warning-bg-subtle !default;
+$danger-bg-subtle-dark:             $danger-bg-subtle !default;
+$light-bg-subtle-dark:              $gray-800-dark !default;
+$dark-bg-subtle-dark:               mix($gray-800-dark, $black) !default;
+// scss-docs-end theme-bg-subtle-dark-variables
+
+// scss-docs-start theme-border-subtle-dark-variables
+$primary-border-subtle-dark:        $primary-border-subtle !default;
+$secondary-border-subtle-dark:      $secondary-border-subtle !default;
+$success-border-subtle-dark:        $success-border-subtle !default;
+$info-border-subtle-dark:           $info-border-subtle !default;
+$warning-border-subtle-dark:        $warning-border-subtle !default;
+$danger-border-subtle-dark:         $danger-border-subtle !default;
+$light-border-subtle-dark:          $gray-700-dark !default;
+$dark-border-subtle-dark:           $gray-800-dark !default;
+// scss-docs-end theme-border-subtle-dark-variables
+
+$body-color-dark:                   $gray-500-dark !default;
+$body-bg-dark:                      $gray-900-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, #181924, 50%) !default;
+$body-emphasis-color-dark:          $white !default;
+$border-color-dark:                 $gray-800-dark !default;
+$border-color-translucent-dark:     rgba($white, .1) !default;
+$headings-color-dark:               inherit !default;
+$link-color-dark:                   tint-color($primary, 40%) !default;
+$link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
+$code-color-dark:                   tint-color($code-color, 40%) !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;
+
+// scss-docs-start form-validation-colors-dark
+$form-valid-color-dark:             $green-300 !default;
+$form-valid-border-color-dark:      $green-300 !default;
+$form-invalid-color-dark:           $red-300 !default;
+$form-invalid-border-color-dark:    $red-300 !default;
+// scss-docs-end form-validation-colors-dark
+
+
+//
+// Accordion
+//
+
+$accordion-icon-color-dark:         $body-color-dark !default;
+$accordion-icon-active-color-dark:  $primary-text-emphasis-dark !default;
+
+$accordion-button-icon-dark:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$accordion-icon-color-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='#{$accordion-icon-active-color-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;
+
+
+//
+// Buttons
+//
+
+$button-variants-dark: (
+  "primary":    btn-color-map($primary-dark, $primary-dark),
+  "secondary":  btn-color-map($secondary-dark, $secondary-dark),
+  "success":    btn-color-map($success-dark, $success-dark),
+  "danger":     btn-color-map($danger-dark, $danger-dark),
+  "warning":    btn-color-map($warning-dark, $warning-dark),
+  "info":       btn-color-map($info-dark, $info-dark)
+) !default;
+
+$button-outline-ghost-variants-dark: (
+  "primary":    btn-outline-color-map($primary-dark),
+  "secondary":  btn-outline-color-map($secondary-dark),
+  "success":    btn-outline-color-map($success-dark),
+  "danger":     btn-outline-color-map($danger-dark),
+  "warning":    btn-outline-color-map($warning-dark),
+  "info":       btn-outline-color-map($info-dark)
+) !default;
+
+
+//
+// Sidebar
+//
+
+$sidebar-bg-dark:            $body-bg-dark !default;
+$sidebar-border-width-dark:  var(--#{$prefix}border-width) !default;
+$sidebar-border-color-dark:  var(--#{$prefix}border-color) !default;
+// scss-docs-end sass-dark-mode-vars