@coreui/coreui 5.0.0-alpha.0 → 5.0.0-alpha.2

package/scss/_type.scss

@@ -69,7 +69,7 @@
   display: inline-block;
 
   &:not(:last-child) {
-    margin-right: $list-inline-padding;
+    @include ltr-rtl("margin-right", $list-inline-padding);
   }
 }
 

package/scss/_utilities.scss

@@ -19,7 +19,8 @@ $utilities: map-merge(
         start: left,
         end: right,
         none: none,
-      )
+      ),
+      rtl: true
     ),
     // scss-docs-end utils-float
     // Object Fit utilities
@@ -69,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
@@ -84,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,
@@ -138,7 +147,8 @@ $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,
@@ -153,7 +163,8 @@ $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,
@@ -166,63 +177,31 @@ $utilities: map-merge(
     "border-top-color": (
       property: border-top-color,
       class: border-top,
-      local-vars: (
-        "border-opacity": 1
-      ),
-      values: $utilities-border-colors
+      values: map-merge($theme-colors, ("white": $white)),
+      vars: true
     ),
     "border-end-color": (
       property: border-right-color,
       class: border-end,
-      local-vars: (
-        "border-opacity": 1
-      ),
-      values: $utilities-border-colors
+      values: map-merge($theme-colors, ("white": $white)),
+      vars: true,
+      rtl: true
     ),
     "border-bottom-color": (
       property: border-bottom-color,
       class: border-bottom,
-      local-vars: (
-        "border-opacity": 1
-      ),
-      values: $utilities-border-colors
+      values: map-merge($theme-colors, ("white": $white)),
+      vars: true
     ),
     "border-start-color": (
       property: border-left-color,
       class: border-start,
-      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
+      values: map-merge($theme-colors, ("white": $white)),
+      vars: true,
+      rtl: true
     ),
     "border-width": (
-      css-var: true,
-      css-variable-name: border-width,
+      property: border-width,
       class: border,
       values: $border-widths
     ),
@@ -235,6 +214,7 @@ $utilities: map-merge(
       property: border-right-width,
       class: border-end,
       values: $border-widths,
+      rtl: true
     ),
     "border-bottom-width": (
       property: border-bottom-width,
@@ -245,6 +225,12 @@ $utilities: map-merge(
       property: border-left-width,
       class: border-start,
       values: $border-widths,
+      rtl: true
+    ),
+    "subtle-border-color": (
+      property: border-color,
+      class: border,
+      values: $utilities-border-subtle
     ),
     "border-opacity": (
       css-var: true,
@@ -442,7 +428,8 @@ $utilities: map-merge(
       responsive: true,
       property: margin-right,
       class: me,
-      values: map-merge($spacers, (auto: auto))
+      values: map-merge($spacers, (auto: auto)),
+      rtl: true
     ),
     "margin-bottom": (
       responsive: true,
@@ -454,7 +441,8 @@ $utilities: map-merge(
       responsive: true,
       property: margin-left,
       class: ms,
-      values: map-merge($spacers, (auto: auto))
+      values: map-merge($spacers, (auto: auto)),
+      rtl: true
     ),
     // Negative margin utilities
     "negative-margin": (
@@ -485,7 +473,8 @@ $utilities: map-merge(
       responsive: true,
       property: margin-right,
       class: me,
-      values: $negative-spacers
+      values: $negative-spacers,
+      rtl: true
     ),
     "negative-margin-bottom": (
       responsive: true,
@@ -497,7 +486,8 @@ $utilities: map-merge(
       responsive: true,
       property: margin-left,
       class: ms,
-      values: $negative-spacers
+      values: $negative-spacers,
+      rtl: true
     ),
     // Padding utilities
     "padding": (
@@ -528,7 +518,8 @@ $utilities: map-merge(
       responsive: true,
       property: padding-right,
       class: pe,
-      values: $spacers
+      values: $spacers,
+      rtl: true
     ),
     "padding-bottom": (
       responsive: true,
@@ -540,7 +531,8 @@ $utilities: map-merge(
       responsive: true,
       property: padding-left,
       class: ps,
-      values: $spacers
+      values: $spacers,
+      rtl: true
     ),
     // Gap utility
     "gap": (
@@ -611,7 +603,8 @@ $utilities: map-merge(
         start: left,
         end: right,
         center: center,
-      )
+      ),
+      rtl: true
     ),
     "text-decoration": (
       property: text-decoration,
@@ -641,20 +634,26 @@ $utilities: map-merge(
     "color": (
       property: color,
       class: text,
+      dark-mode: true,
       local-vars: (
         "text-opacity": 1
       ),
-      dark-mode: true,
       values: map-merge(
         $utilities-text-colors,
         (
-          "muted": $text-muted, // deprecated
+          "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": 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)
         )
       )
     ),
@@ -674,21 +673,70 @@ $utilities: map-merge(
       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
       ),
-      dark-mode: true,
       values: map-merge(
         $utilities-bg-colors,
         (
           "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)),
         )
       )
     ),
@@ -737,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)
       )
@@ -752,7 +800,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)
       )
@@ -767,10 +815,11 @@ $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)
-      )
+      ),
+      rtl: true
     ),
     "rounded-bottom": (
       property: border-bottom-right-radius border-bottom-left-radius,
@@ -782,7 +831,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)
       )
@@ -797,10 +846,11 @@ $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)
-      )
+      ),
+      rtl: true
     ),
     // scss-docs-end utils-border-radius
     // scss-docs-start utils-visibility
@@ -813,11 +863,13 @@ $utilities: map-merge(
       )
     ),
     // 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

@@ -7,25 +7,46 @@
 //
 
 // 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;
-
+// 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:       desaturate($primary, 10%) !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,
@@ -36,48 +57,54 @@ $theme-colors-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;
+// 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;
-
-$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;
+// 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-color-dark:                   rgba($white, .87) !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-color-dark:         rgba($white, .6) !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;
+$body-tertiary-color-dark:          rgba($white, .38) !default;
+$body-tertiary-bg-dark:             mix($gray-800-dark, #212631, 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:                   $primary-dark !default;
+$link-hover-color-dark:             shift-color($link-color-dark, -$link-shade-percentage) !default;
+$code-color-dark:                   tint-color($code-color, 40%) !default;
 
 
 //
@@ -90,20 +117,44 @@ $form-select-indicator-dark:        url("data:image/svg+xml,<svg xmlns='http://w
 $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-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;
+$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;
+
 
 //
-// Sidebar
+// Buttons
 //
 
-$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;
+$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;
 // scss-docs-end sass-dark-mode-vars