@oruga-ui/theme-oruga 0.7.1 → 0.8.1

package/dist/scss/components/_notification.scss

@@ -1,44 +1,91 @@
 @use "sass:list";
+@use "sass:map";
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
 
 /* @docs */
-$notification-background-color: var(--#{$prefix}primary) !default;
-$notification-border-radius: 4px !default;
+$notification-spacer: calc(2 * h.useVar("control-spacer")) !default;
 $notification-padding: 1.75em 1.75em !default;
-$notification-margin-bottom: 1.5rem !default;
-$notification-animantion: append-animate 0.3s linear !default;
-$notification-color: var(--#{$prefix}white) !default;
-$notification-close-border-radius: var(
-    --#{$prefix}base-border-radius-rounded
-) !default;
-$notification-close-right: 0.5rem !default;
-$notification-close-top: 0.5rem !default;
-$notification-close-size: 20px !default;
-$notification-close-color: var(--#{$prefix}white) !default;
-$notification-close-background-color: hsla(0, 0%, 4%, 0.2) !default;
-$notification-icon-margin-right: 1rem !default;
+$notification-animation: append-animate h.useVar("animation-speed") linear !default;
+
+$notification-color: h.useVar("primary-invert") !default;
+$notification-background-color: h.useVar("primary") !default;
+$notification-border-radius: h.useVar("border-radius") !default;
+
+$notification-close-top: 0.5em !default;
+$notification-close-right: 0.5em !default;
+$notification-close-color: h.useVar("white") !default;
+$notification-close-size: 1.5rem !default;
+$notification-close-border-radius: h.useVar("border-radius-rounded") !default;
+$notification-close-background-color: h.useVar("control-shadow-color") !default;
+
 $notification-notices-padding: 2em !default;
-$notification-notices-zindex: 1000 !default;
+$notification-notices-max-width: 600px !default;
+$notification-notices-zindex: map.get(vars.$zindex, "tooltip") !default;
 /* @docs */
 
 .o-notification {
-    position: relative;
-    transform-origin: 50% 0;
-    // Modifiers
-    background-color: var(
-        --#{$prefix}notification-background-color,
+    @include h.defineVar("notification-spacer", $notification-spacer);
+    @include h.defineVar("notification-padding", $notification-padding);
+    @include h.defineVar("notification-animation", $notification-animation);
+    @include h.defineVar("notification-color", $notification-color);
+    @include h.defineVar(
+        "notification-background-color",
         $notification-background-color
     );
-    color: var(--#{$prefix}notification-color, $notification-color);
-    border-radius: var(
-        --#{$prefix}notification-border-radius,
+    @include h.defineVar(
+        "notification-border-radius",
         $notification-border-radius
     );
-    padding: var(--#{$prefix}notification-padding, $notification-padding);
-    margin-bottom: var(
-        --#{$prefix}notification-margin-bottom,
-        $notification-margin-bottom
+
+    @include h.defineVar("notification-close-top", $notification-close-top);
+    @include h.defineVar("notification-close-right", $notification-close-right);
+    @include h.defineVar("notification-close-color", $notification-close-color);
+    @include h.defineVar("notification-close-size", $notification-close-size);
+    @include h.defineVar(
+        "notification-close-border-radius",
+        $notification-close-border-radius
+    );
+    @include h.defineVar(
+        "notification-close-background-color",
+        $notification-close-background-color
     );
 
+    display: inline-flex;
+    flex-direction: row-reverse;
+    position: relative;
+    transform-origin: 50% 0;
+
+    padding: h.useVar("notification-padding");
+    margin-bottom: h.useVar("notification-spacer");
+
+    color: h.useVar("notification-color");
+
+    background-color: h.useVar("notification-background-color");
+    border-radius: h.useVar("notification-border-radius");
+
+    animation: h.useVar("notification-animation");
+    -webkit-animation: h.useVar("notification-animation");
+
+    // color variants
+    @each $name, $pair in vars.$colors {
+        &--#{$name} {
+            @include h.defineVar(
+                "notification-color",
+                h.useVar("#{$name}-invert")
+            );
+            @include h.defineVar(
+                "notification-background-color",
+                h.useVar($name)
+            );
+
+            &:hover {
+                // darken color on hover
+                filter: brightness(95%);
+            }
+        }
+    }
+
     &__content {
         flex-basis: auto;
         flex-grow: 1;
@@ -49,8 +96,8 @@ $notification-notices-zindex: 1000 !default;
     }
 
     &__wrapper {
-        align-items: center;
         display: flex;
+        align-items: center;
         text-align: inherit;
         padding-top: 0;
         border: 0;
@@ -60,93 +107,66 @@ $notification-notices-zindex: 1000 !default;
         flex-basis: auto;
         flex-grow: 0;
         flex-shrink: 0;
-        margin-right: var(
-            --#{$prefix}notification-icon-margin-right,
-            $notification-icon-margin-right
-        );
+        margin-right: h.useVar("notification-spacer");
     }
 
     &__close {
+        // add clickable cursor
+        @include h.clickable;
+
         position: absolute;
-        border: none;
-        cursor: pointer;
-        pointer-events: auto;
-        display: flex;
-        justify-content: center;
+        top: h.useVar("notification-close-top");
+        right: h.useVar("notification-close-right");
+
+        display: inline-flex;
         align-items: center;
-        flex-grow: 0;
-        flex-shrink: 0;
-        vertical-align: top;
-        background-color: var(
-            --#{$prefix}notification-close-background-color,
-            $notification-close-background-color
-        );
-        border-radius: var(
-            --#{$prefix}notification-close-border-radius,
-            $notification-close-border-radius
-        );
-        right: var(
-            --#{$prefix}notification-close-right,
-            $notification-close-right
-        );
-        top: var(--#{$prefix}notification-close-top, $notification-close-top);
-        height: var(
-            --#{$prefix}notification-close-size,
-            $notification-close-size
-        );
-        width: var(
-            --#{$prefix}notification-close-size,
-            $notification-close-size
-        );
-        color: var(
-            --#{$prefix}notification-close-color,
-            $notification-close-color
-        );
-    }
+        justify-content: center;
 
-    @each $name, $pair in $colors {
-        $color: list.nth($pair, 1);
-        $color-invert: list.nth($pair, 2);
-        &--#{$name} {
-            border-color: transparent;
-            background-color: var(--#{$prefix}variant-#{$name}, $color);
-            color: var(--#{$prefix}variant-invert-#{$name}, $color-invert);
+        height: h.useVar("notification-close-size");
+        width: h.useVar("notification-close-size");
+        padding: 0;
 
-            &:hover {
-                // background-color: darken($color, 2.5%)
-                // IE 11 needs polyfill
-                filter: brightness(97.5%);
-            }
-        }
+        color: h.useVar("notification-close-color");
+
+        border: none;
+        border-radius: h.useVar("notification-close-border-radius");
+        background-color: h.useVar("notification-close-background-color");
     }
 }
 
 .o-notices {
+    @include h.defineVar(
+        "notification-notices-zindex",
+        $notification-notices-zindex
+    );
+    @include h.defineVar(
+        "notification-notices-padding",
+        $notification-notices-padding
+    );
+    @include h.defineVar(
+        "notification-notices-max-width",
+        $notification-notices-max-width
+    );
+
     position: fixed;
     display: flex;
     top: 0;
     bottom: 0;
     left: 0;
     right: 0;
+
     overflow: hidden;
+    // disable clickable
     pointer-events: none;
-    padding: var(
-        --#{$prefix}notification-notices-padding,
-        $notification-notices-padding
-    );
-    z-index: var(
-        --#{$prefix}notification-notices-zindex,
-        $notification-notices-zindex
-    );
+
+    padding: h.useVar("notification-notices-padding");
+    z-index: h.useVar("notification-notices-zindex");
 
     .o-notification {
         pointer-events: stroke;
-        max-width: 600px;
-        animation: var(
-            --#{$prefix}notification-animantion,
-            $notification-animantion
-        );
+        max-width: h.useVar("notification-notices-max-width");
 
+        // position variants
         &--top,
         &--bottom {
             align-self: center;
@@ -176,12 +196,8 @@ $notification-notices-zindex: 1000 !default;
             margin-bottom: 0;
 
             &:not(:first-child) {
-                margin-bottom: $notification-margin-bottom;
+                margin-bottom: h.useVar("notification-spacer");
             }
         }
     }
-
-    &__custom-container {
-        position: absolute;
-    }
 }

package/dist/scss/components/_pagination.scss

@@ -1,137 +1,209 @@
+@use "../utils/helpers" as h;
+@use "../utils/variables" as vars;
+
 /* @docs */
-$pagination-disabled-opacity: var(--#{$prefix}base-disabled-opacity) !default;
-$pagination-ellipsis-color: var(--#{$prefix}grey-light) !default;
-$pagination-button-border-color: var(--#{$prefix}grey-light) !default;
-$pagination-button-border-radius: var(--#{$prefix}base-border-radius) !default;
-$pagination-button-border: 1px solid transparent !default;
-$pagination-button-color: var(--#{$prefix}black) !default;
-$pagination-button-background-color: transparent !default;
-$pagination-button-background-color-hover: var(
-    --#{$prefix}grey-lighter
-) !default;
-$pagination-button-current-background-color: var(--#{$prefix}primary) !default;
-$pagination-button-current-border-color: var(--#{$prefix}primary) !default;
-$pagination-button-current-color: #fff !default;
+$pagination-spacer: calc(0.5 * h.useVar("control-spacer")) !default;
+$pagination-disabled-opacity: h.useVar("control-disabled-opacity") !default;
+$pagination-ellipsis-color: h.useVar("grey-light") !default;
+
+$pagination-button-color: h.useVar("font-color") !default;
+$pagination-button-font-size: h.useVar("font-size") !default;
+$pagination-button-font-weight: h.useVar("font-weight") !default;
+$pagination-button-line-height: h.useVar("line-height") !default;
+
 $pagination-button-height: 2.25em !default;
-$pagination-button-hover-border-color: var(--#{$prefix}grey-light) !default;
-$pagination-button-line-height: var(--#{$prefix}base-line-height) !default;
-$pagination-button-margin: 0.25rem !default;
-$pagination-button-min-width: 2.25em !default;
-$pagination-button-padding: 0.5em 0.5em !default;
-$pagination-margin: -0.25rem !default;
-$pagination-rounded-border-radius: var(
-    --#{$prefix}base-border-radius-rounded
+$pagination-button-min-width: $pagination-button-height !default;
+$pagination-button-padding: h.useVar("control-spacer") !default;
+
+$pagination-button-box-shadow: none !default;
+$pagination-button-border-width: h.useVar("control-border-width") !default;
+$pagination-button-border-color: h.useVar("control-border-color") !default;
+$pagination-button-border-style: solid !default;
+$pagination-button-border-radius: h.useVar("border-radius") !default;
+$pagination-button-border-radius-rounded: h.useVar(
+    "border-radius-rounded"
+) !default;
+$pagination-button-background-color: h.useVar(
+    "control-brackground-color"
 ) !default;
+
+$pagination-button-hover-color: $pagination-button-color;
+$pagination-button-hover-background-color: $pagination-button-background-color;
+$pagination-button-hover-border-color: $pagination-button-border-color;
+
+$pagination-button-current-color: h.useVar("white") !default;
+$pagination-button-current-background-color: h.useVar("primary") !default;
+$pagination-button-current-border-color: h.useVar("primary") !default;
 /* @docs */
 
 .o-pagination {
+    @include h.defineVar("pagination-spacer", $pagination-spacer);
+    @include h.defineVar(
+        "pagination-disabled-opacity",
+        $pagination-disabled-opacity
+    );
+    @include h.defineVar(
+        "pagination-ellipsis-color",
+        $pagination-ellipsis-color
+    );
+
+    @include h.defineVar("pagination-button-color", $pagination-button-color);
+    @include h.defineVar(
+        "pagination-button-font-size",
+        $pagination-button-font-size
+    );
+    @include h.defineVar(
+        "pagination-button-font-weight",
+        $pagination-button-font-weight
+    );
+    @include h.defineVar(
+        "pagination-button-line-height",
+        $pagination-button-line-height
+    );
+
+    @include h.defineVar("pagination-button-height", $pagination-button-height);
+    @include h.defineVar(
+        "pagination-button-min-width",
+        $pagination-button-min-width
+    );
+    @include h.defineVar(
+        "pagination-button-padding",
+        $pagination-button-padding
+    );
+
+    @include h.defineVar(
+        "pagination-button-box-shadow",
+        $pagination-button-box-shadow
+    );
+    @include h.defineVar(
+        "pagination-button-border-width",
+        $pagination-button-border-width
+    );
+    @include h.defineVar(
+        "pagination-button-border-color",
+        $pagination-button-border-color
+    );
+    @include h.defineVar(
+        "pagination-button-border-style",
+        $pagination-button-border-style
+    );
+    @include h.defineVar(
+        "pagination-button-border-radius",
+        $pagination-button-border-radius
+    );
+    @include h.defineVar(
+        "pagination-button-border-radius-rounded",
+        $pagination-button-border-radius-rounded
+    );
+    @include h.defineVar(
+        "pagination-button-background-color",
+        $pagination-button-background-color
+    );
+
+    @include h.defineVar(
+        "pagination-button-hover-color",
+        $pagination-button-hover-color
+    );
+    @include h.defineVar(
+        "pagination-button-hover-background-color",
+        $pagination-button-hover-background-color
+    );
+    @include h.defineVar(
+        "pagination-button-hover-border-color",
+        $pagination-button-hover-border-color
+    );
+
+    @include h.defineVar(
+        "pagination-button-current-color",
+        $pagination-button-current-color
+    );
+    @include h.defineVar(
+        "pagination-button-current-background-color",
+        $pagination-button-current-background-color
+    );
+    @include h.defineVar(
+        "pagination-button-current-border-color",
+        $pagination-button-current-border-color
+    );
+
     align-items: center;
     display: flex;
     text-align: center;
     justify-content: space-between;
-    font-size: var(--#{$prefix}base-font-size, $base-font-size);
-    margin: var(--#{$prefix}pagination-margin, $pagination-margin);
 
-    @each $name, $value in $sizes {
+    // size variants
+    @each $name, $value in vars.$sizes {
         &--#{$name} {
-            font-size: var(--#{$prefix}pagination-font-size-#{$name}, $value);
+            @include h.defineVar(
+                "pagination-button-font-size",
+                h.useVar("size-#{$name}")
+            );
         }
     }
 
+    // TODO: normal o-button will be used here later
     &__button {
-        @include unselectable;
-        -moz-appearance: none;
-        -webkit-appearance: none;
+        // define focus shadow effect
+        @include h.focusable;
+
+        // add clickable cursor
+        @include h.clickable;
+
+        // remove default appearance
+        @include h.removeAppearance;
+        text-decoration: none;
 
-        align-items: center;
-        box-shadow: none;
-        display: inline-flex;
         position: relative;
+        display: inline-flex;
+        align-items: center;
         vertical-align: top;
         justify-content: center;
         text-align: center;
-        text-decoration: none;
-        cursor: pointer;
-
-        line-height: var(
-            --#{$prefix}pagination-link-line-height,
-            $pagination-button-line-height
-        );
-        background-color: var(
-            --#{$prefix}pagination-button-background-color,
-            $pagination-button-background-color
-        );
-        border: var(
-            --#{$prefix}pagination-link-border,
-            $pagination-button-border
-        );
-        border-radius: var(
-            --#{$prefix}pagination-link-border-radius,
-            $pagination-button-border-radius
-        );
-        border-color: var(
-            --#{$prefix}pagination-link-border-color,
-            $pagination-button-border-color
-        );
-        color: var(--#{$prefix}pagination-link-color, $pagination-button-color);
-        min-width: var(
-            --#{$prefix}pagination-link-min-width,
-            $pagination-button-min-width
-        );
-        height: var(
-            --#{$prefix}pagination-link-height,
-            $pagination-button-height
-        );
-        padding: var(
-            --#{$prefix}pagination-link-padding,
-            $pagination-button-padding
-        );
-        margin: var(
-            --#{$prefix}pagination-link-margin,
-            $pagination-button-margin
-        );
+
+        color: h.useVar("pagination-button-color");
+        font-size: h.useVar("pagination-button-font-size");
+        font-weight: h.useVar("pagination-button-font-weight");
+        line-height: h.useVar("pagination-button-line-height");
+
+        box-shadow: h.useVar("pagination-button-box-shadow");
+        background-color: h.useVar("pagination-button-background-color");
+
+        border-color: h.useVar("pagination-button-border-color");
+        border-style: h.useVar("pagination-button-border-style");
+        border-width: h.useVar("pagination-button-border-width");
+        border-radius: h.useVar("pagination-button-border-radius");
+
+        min-width: h.useVar("pagination-button-min-width");
+        height: h.useVar("pagination-button-height");
+        padding: h.useVar("pagination-button-padding");
+        margin: h.useVar("pagination-spacer");
 
         &:hover {
-            text-decoration: none;
-            border-color: var(
-                --#{$prefix}pagination-link-hover-border-color,
-                $pagination-button-hover-border-color
-            );
-            background-color: var(
-                --#{$prefix}pagination-button-background-color-hover,
-                $pagination-button-background-color-hover
+            color: h.useVar("pagination-button-hover-color");
+            border-color: h.useVar("pagination-button-hover-border-color");
+            background-color: h.useVar(
+                "pagination-button-background-color-hover"
             );
         }
 
         &--rounded {
-            border-radius: var(
-                --#{$prefix}pagination-rounded-border-radius,
-                $pagination-rounded-border-radius
+            @include h.defineVar(
+                "pagination-button-border-radius",
+                h.useVar("pagination-button-border-radius-rounded")
             );
         }
 
         &--disabled {
-            pointer-events: none;
-            opacity: var(
-                --#{$prefix}pagination-disabled-opacity,
-                $pagination-disabled-opacity
-            );
+            @include h.disabled(h.useVar("menu-disabled-opacity"));
         }
 
         &--current {
             pointer-events: none;
-            background-color: var(
-                --#{$prefix}pagination-link-current-background-color,
-                $pagination-button-current-background-color
-            );
-            border-color: var(
-                --#{$prefix}pagination-link-current-border-color,
-                $pagination-button-current-border-color
-            );
-            color: var(
-                --#{$prefix}pagination-link-current-color,
-                $pagination-button-current-color
+            background-color: h.useVar(
+                "pagination-button-current-background-color"
             );
+            border-color: h.useVar("pagination-button-current-border-color");
+            color: h.useVar("pagination-button-current-color");
         }
     }
 
@@ -139,14 +211,8 @@ $pagination-rounded-border-radius: var(
         justify-content: center;
         text-align: center;
         pointer-events: none;
-        margin: var(
-            --#{$prefix}pagination-link-margin,
-            $pagination-button-margin
-        );
-        color: var(
-            --#{$prefix}pagination-ellipsis-color,
-            $pagination-ellipsis-color
-        );
+        margin: h.useVar("pagination-spacer");
+        color: h.useVar("pagination-ellipsis-color");
     }
 
     &__button-next {
@@ -237,6 +303,7 @@ $pagination-rounded-border-radius: var(
 
         .o-pagination__list {
             order: 0;
+            justify-content: end;
         }
     }
 }