@react-ui-org/react-ui 0.56.0 → 0.57.0

package/src/theme.scss

@@ -306,6 +306,70 @@
         --rui-Alert--dark__foreground-color: var(--rui-color-neutral-on-dark);
         --rui-Alert--dark__background-color: var(--rui-color-background-dark);
 
+        //
+        // Badge
+        // =====
+
+        // Badge: filled priority
+
+        // Badge: filled priority: success variant
+        --rui-Badge--filled--success__color: var(--rui-color-feedback-on-success);
+        --rui-Badge--filled--success__background-color: var(--rui-color-feedback-success);
+
+        // Badge: filled priority: warning variant
+        --rui-Badge--filled--warning__color: var(--rui-color-feedback-on-warning);
+        --rui-Badge--filled--warning__background-color: var(--rui-color-feedback-warning);
+
+        // Badge: filled priority: danger variant
+        --rui-Badge--filled--danger__color: var(--rui-color-feedback-on-danger);
+        --rui-Badge--filled--danger__background-color: var(--rui-color-feedback-danger);
+
+        // Badge: filled priority: help variant
+        --rui-Badge--filled--help__color: var(--rui-color-feedback-on-help);
+        --rui-Badge--filled--help__background-color: var(--rui-color-feedback-help);
+
+        // Badge: filled priority: info variant
+        --rui-Badge--filled--info__color: var(--rui-color-feedback-on-info);
+        --rui-Badge--filled--info__background-color: var(--rui-color-feedback-info);
+
+        // Badge: filled priority: note variant
+        --rui-Badge--filled--note__color: var(--rui-color-feedback-on-note);
+        --rui-Badge--filled--note__background-color: var(--rui-color-feedback-note);
+
+        // Badge: filled priority: light variant
+        --rui-Badge--filled--light__color: var(--rui-color-neutral-on-light);
+        --rui-Badge--filled--light__background-color: var(--rui-color-neutral-light);
+
+        // Badge: filled priority: dark variant
+        --rui-Badge--filled--dark__color: var(--rui-color-neutral-on-dark);
+        --rui-Badge--filled--dark__background-color: var(--rui-color-neutral-dark);
+
+        // Badge: outline priority
+
+        // Badge: outline priority: success variant
+        --rui-Badge--outline--success__color: var(--rui-color-feedback-success);
+
+        // Badge: outline priority: warning variant
+        --rui-Badge--outline--warning__color: var(--rui-color-feedback-warning);
+
+        // Badge: outline priority: danger variant
+        --rui-Badge--outline--danger__color: var(--rui-color-feedback-danger);
+
+        // Badge: outline priority: help variant
+        --rui-Badge--outline--help__color: var(--rui-color-feedback-help);
+
+        // Badge: outline priority: info variant
+        --rui-Badge--outline--info__color: var(--rui-color-feedback-info);
+
+        // Badge: outline priority: note variant
+        --rui-Badge--outline--note__color: var(--rui-color-feedback-note);
+
+        // Badge: outline priority: light variant
+        --rui-Badge--outline--light__color: var(--rui-color-neutral-light);
+
+        // Badge: outline priority: dark variant
+        --rui-Badge--outline--dark__color: var(--rui-color-neutral-dark);
+
         //
         // Button
         // ======

package/src/components/Alert/_tools.scss

@@ -1,10 +0,0 @@
-@use "sass:map";
-@use "theme";
-
-@mixin color($color) {
-    $color-variant-properties: map.get(theme.$colors, $color);
-
-    --rui-local-color: #{map.get($color-variant-properties, color)};
-    --rui-local-foreground-color: #{map.get($color-variant-properties, foreground-color)};
-    --rui-local-background-color: #{map.get($color-variant-properties, background-color)};
-}

package/src/components/Button/_base.scss

@@ -1,156 +0,0 @@
-// 1. ButtonGroup gap is implemented using the `margin` property so the buttons can overlap and reduce duplicate
-//    borders.
-
-@use "sass:map";
-@use "../../styles/tools/breakpoint";
-@use "settings";
-@use "theme";
-@use "tools";
-
-@layer components.button {
-    .root {
-        @include tools.button();
-    }
-
-    .label {
-        display: block;
-    }
-
-    .beforeLabel,
-    .afterLabel,
-    .startCorner,
-    .endCorner,
-    .feedbackIcon {
-        display: flex;
-        align-items: baseline;
-        justify-content: center;
-    }
-
-    .startCorner,
-    .endCorner {
-        position: absolute;
-        top: -0.35rem;
-        z-index: 2;
-    }
-
-    .startCorner {
-        left: 0;
-        margin-left: -0.35rem;
-    }
-
-    .endCorner {
-        right: 0;
-        margin-right: -0.35rem;
-    }
-
-    .feedbackIcon {
-        position: absolute;
-        inset: 0;
-        z-index: 1;
-        align-items: center;
-    }
-
-    .isRootSizeSmall {
-        @include tools.button-size(small);
-    }
-
-    .isRootSizeMedium {
-        @include tools.button-size(medium);
-    }
-
-    .isRootSizeLarge {
-        @include tools.button-size(large);
-    }
-
-    .isRootBlock {
-        width: 100%;
-    }
-
-    .hasRootFeedback:disabled {
-        opacity: theme.$feedback-opacity;
-        cursor: theme.$feedback-cursor;
-    }
-
-    .hasRootFeedback .label,
-    .hasRootFeedback .beforeLabel,
-    .hasRootFeedback .afterLabel {
-        color: transparent;
-    }
-
-    .isRootInButtonGroup,
-    .isRootInInputGroup {
-        z-index: map.get(settings.$group-z-indexes, button);
-
-        &:not(:first-child) {
-            border-start-start-radius: var(--rui-local-inner-border-radius);
-            border-end-start-radius: var(--rui-local-inner-border-radius);
-        }
-
-        &:not(:last-child) {
-            border-start-end-radius: var(--rui-local-inner-border-radius);
-            border-end-end-radius: var(--rui-local-inner-border-radius);
-        }
-    }
-
-    .isRootInButtonGroup:not(:first-child) {
-        margin-inline-start: var(--rui-local-gap); // 1.
-    }
-
-    .isRootInButtonGroup:focus,
-    .isRootInButtonGroup:not(:disabled):hover {
-        z-index: map.get(settings.$group-z-indexes, button-hover);
-    }
-
-    .isRootInButtonGroup .startCorner,
-    .isRootInInputGroup .startCorner,
-    .isRootInButtonGroup .endCorner,
-    .isRootInInputGroup .endCorner {
-        z-index: map.get(settings.$group-z-indexes, button-overflowing-elements);
-    }
-
-    .hasLabelHidden,
-    .hasLabelVisibleSm,
-    .hasLabelVisibleMd,
-    .hasLabelVisibleLg,
-    .hasLabelVisibleXl,
-    .hasLabelVisibleX2l,
-    .hasLabelVisibleX3l {
-        @include tools.hide-label();
-    }
-
-    .hasLabelVisibleSm {
-        @include breakpoint.up(sm) {
-            @include tools.show-label();
-        }
-    }
-
-    .hasLabelVisibleMd {
-        @include breakpoint.up(md) {
-            @include tools.show-label();
-        }
-    }
-
-    .hasLabelVisibleLg {
-        @include breakpoint.up(lg) {
-            @include tools.show-label();
-        }
-    }
-
-    .hasLabelVisibleXl {
-        @include breakpoint.up(xl) {
-            @include tools.show-label();
-        }
-    }
-
-    .hasLabelVisibleX2l {
-        @include breakpoint.up(x2l) {
-            @include tools.show-label();
-        }
-    }
-
-    .hasLabelVisibleX3l {
-        @include breakpoint.up(x3l) {
-            @include tools.show-label();
-        }
-    }
-}

package/src/components/Button/_priorities.scss

@@ -1,149 +0,0 @@
-@use "sass:map";
-@use "settings";
-@use "theme";
-@use "tools";
-
-@layer components.button {
-    .isRootPriorityFilled.isRootColorPrimary {
-        @include tools.button-color(filled, primary);
-    }
-
-    .isRootPriorityFilled.isRootColorSecondary {
-        @include tools.button-color(filled, secondary);
-    }
-
-    .isRootPriorityFilled.isRootColorSelected {
-        @include tools.button-color(filled, selected);
-    }
-
-    .isRootPriorityFilled.isRootColorSuccess {
-        @include tools.button-color(filled, success);
-    }
-
-    .isRootPriorityFilled.isRootColorWarning {
-        @include tools.button-color(filled, warning);
-    }
-
-    .isRootPriorityFilled.isRootColorDanger {
-        @include tools.button-color(filled, danger);
-    }
-
-    .isRootPriorityFilled.isRootColorHelp {
-        @include tools.button-color(filled, help);
-    }
-
-    .isRootPriorityFilled.isRootColorInfo {
-        @include tools.button-color(filled, info);
-    }
-
-    .isRootPriorityFilled.isRootColorNote {
-        @include tools.button-color(filled, note);
-    }
-
-    .isRootPriorityFilled.isRootColorLight {
-        @include tools.button-color(filled, light);
-    }
-
-    .isRootPriorityFilled.isRootColorDark {
-        @include tools.button-color(filled, dark);
-    }
-
-    .isRootPriorityOutline.isRootColorPrimary {
-        @include tools.button-color(outline, primary);
-    }
-
-    .isRootPriorityOutline.isRootColorSecondary {
-        @include tools.button-color(outline, secondary);
-    }
-
-    .isRootPriorityOutline.isRootColorSelected {
-        @include tools.button-color(outline, selected);
-    }
-
-    .isRootPriorityOutline.isRootColorSuccess {
-        @include tools.button-color(outline, success);
-    }
-
-    .isRootPriorityOutline.isRootColorWarning {
-        @include tools.button-color(outline, warning);
-    }
-
-    .isRootPriorityOutline.isRootColorDanger {
-        @include tools.button-color(outline, danger);
-    }
-
-    .isRootPriorityOutline.isRootColorHelp {
-        @include tools.button-color(outline, help);
-    }
-
-    .isRootPriorityOutline.isRootColorInfo {
-        @include tools.button-color(outline, info);
-    }
-
-    .isRootPriorityOutline.isRootColorNote {
-        @include tools.button-color(outline, note);
-    }
-
-    .isRootPriorityOutline.isRootColorLight {
-        @include tools.button-color(outline, light);
-    }
-
-    .isRootPriorityOutline.isRootColorDark {
-        @include tools.button-color(outline, dark);
-    }
-
-    .isRootPriorityFlat.isRootColorPrimary {
-        @include tools.button-color(flat, primary);
-    }
-
-    .isRootPriorityFlat.isRootColorSecondary {
-        @include tools.button-color(flat, secondary);
-    }
-
-    .isRootPriorityFlat.isRootColorSelected {
-        @include tools.button-color(flat, selected);
-    }
-
-    .isRootPriorityFlat.isRootColorSuccess {
-        @include tools.button-color(flat, success);
-    }
-
-    .isRootPriorityFlat.isRootColorWarning {
-        @include tools.button-color(flat, warning);
-    }
-
-    .isRootPriorityFlat.isRootColorDanger {
-        @include tools.button-color(flat, danger);
-    }
-
-    .isRootPriorityFlat.isRootColorHelp {
-        @include tools.button-color(flat, help);
-    }
-
-    .isRootPriorityFlat.isRootColorInfo {
-        @include tools.button-color(flat, info);
-    }
-
-    .isRootPriorityFlat.isRootColorNote {
-        @include tools.button-color(flat, note);
-    }
-
-    .isRootPriorityFlat.isRootColorLight {
-        @include tools.button-color(flat, light);
-    }
-
-    .isRootPriorityFlat.isRootColorDark {
-        @include tools.button-color(flat, dark);
-    }
-
-    .isRootInButtonGroup:not(:first-child)::before {
-        content: "";
-        position: absolute;
-        top: calc(-1 * #{theme.$border-width});
-        bottom: calc(-1 * #{theme.$border-width});
-        left: calc(-1 * #{theme.$border-width});
-        z-index: map.get(settings.$group-z-indexes, separator);
-        border-left: var(--rui-local-separator-width) solid var(--rui-local-separator-color);
-        transform: translateX(calc(-0.5 * var(--rui-local-gap) - 50%));
-    }
-}

package/src/components/Card/_tools.scss

@@ -1,10 +0,0 @@
-@use "sass:map";
-@use "theme";
-
-@mixin color($color) {
-    $color-variant-properties: map.get(theme.$colors, $color);
-
-    --rui-local-color: #{map.get($color-variant-properties, color)};
-    --rui-local-border-color: #{map.get($color-variant-properties, border-color)};
-    --rui-local-background-color: #{map.get($color-variant-properties, background-color)};
-}