@trilogy-ds/styles 0.0.1-beta.9 → 0.0.4-beta-v4

package/framework/src/components/_pagination.scss

@@ -1,182 +1,80 @@
 .pagination {
-    font-size: $size-normal;
-    margin: -2.5px;
-
-    &.is-rounded {
-        .pagination-previous,
-        .pagination-next {
-            padding-left: 1em;
-            padding-right: 1em;
-            height: 35px;
-            width: 35px;
-            border-radius: $radius-rounded;
-        }
-
-        .pagination-link {
-            height: 35px;
-            border-radius: $radius-rounded;
-        }
-
-        .pagination-list {
-            flex: 0 0 auto;
-
-            .pagination-link {
-                &.is-current {
-                    background: getColor('alternate');
-                    border-color: currentColor;
-                }
-            }
-        }
-    }
-}
-
-.pagination,
-.pagination-list {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    text-align: center;
-}
-
-.pagination-previous,
-.pagination-next,
-.pagination-link,
-.pagination-ellipsis {
+  font-size: $size-normal;
+  margin: -2.5px;
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  text-align: center;
+
+  .pagination-previous,
+  .pagination-next,
+  .pagination-link,
+  .pagination-ellipsis {
     @include control;
     @include unselectable;
-
     font-size: 1em;
     padding-left: 0.5em;
     padding-right: 0.5em;
     justify-content: center;
     margin: 2.5px;
     text-align: center;
-}
-
-.pagination-previous,
-.pagination-next,
-.pagination-link {
-    border-color: transparent;
-    color: getColor('grey-dark');
+  }
+
+  .pagination-previous,
+  .pagination-next,
+  .pagination-link,
+  .pagination-ellipsis {
+    @include hover();
+    color: getColor('font');
     min-width: 2.25em;
-
-    &:hover {
-        border-color: getColor('alternate');
-    }
-
-    &:focus {
-        border-color: getVariantColor('alternate',2);
-    }
-
-    &:active {
-        box-shadow: inset 0 1px 2px getColor('grey-dark');
-    }
-
-    &[disabled] {
-        background-color: getColor('grey-lighter');
-        border-color: currentColor;
-        box-shadow: none;
-        color: getColor('grey');
-        opacity: 0.5;
-    }
-}
-
-.pagination-previous,
-.pagination-next {
+    height: 35px;
+    width: 35px;
+    border-radius: 9999px;
     padding-left: 0.75em;
     padding-right: 0.75em;
     white-space: nowrap;
-}
-
-.pagination-link {
-    &.is-current {
-        background-color: getColor('alternate');
-        border-color: currentColor;
-        color: getColor('background');
-    }
-}
-
-.pagination-ellipsis {
-    color: getColor('grey-light');
-    pointer-events: none;
-}
+  }
 
-.pagination-list {
+  .pagination-list {
+    flex: 0 0 auto;
     flex-wrap: wrap;
-}
-
-@include mobile {
-    .pagination {
-        flex-wrap: wrap;
+    flex-grow: 1;
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    text-align: center;
+  }
+
+  .pagination-previous {
+    order: 1;
+  }
+
+  .pagination-list {
+    order: 2;
+  }
+
+  .pagination-next {
+    order: 3;
+  }
+
+  .pagination-link {
+    &[aria-current] {
+      background-color: getColor('font');
+      color: getColor('background');
+      #{$hoverSelector}, &:focus, &:focus-within {
+        background: linear-gradient(
+            to top,
+            rgba(0, 0, 0, 0.25),
+            rgba(0, 0, 0, 0.25)
+        ) getColor('font') !important;
+      }
     }
+  }
 
-    .pagination-previous,
-    .pagination-next {
-        flex-grow: 1;
-        flex-shrink: 1;
-    }
+  .pagination-ellipsis {
+    pointer-events: none;
+  }
 
-    .pagination-list {
-        li {
-            flex-grow: 1;
-            flex-shrink: 1;
-        }
-    }
 }
 
-@include tablet {
-    .pagination-list {
-        flex-grow: 1;
-        flex-shrink: 1;
-        justify-content: flex-start;
-        order: 1;
-    }
 
-    .pagination-previous {
-        order: 2;
-    }
-
-    .pagination-next {
-        order: 3;
-    }
-
-    .pagination {
-        justify-content: space-between;
-
-        &.is-centered {
-            .pagination-previous {
-                order: 1;
-            }
-
-            .pagination-list {
-                justify-content: center;
-                order: 2;
-            }
-
-            .pagination-next {
-                order: 3;
-            }
-        }
-
-        &.is-right {
-            .pagination-previous {
-                order: 1;
-            }
-
-            .pagination-next {
-                order: 2;
-            }
-
-            .pagination-list {
-                justify-content: flex-end;
-                order: 3;
-            }
-        }
-    }
-}
-
-@include desktop {
-    .pagination {
-        justify-content: center;
-    }
-}

package/framework/src/components/_plus-symbol.scss

@@ -1,6 +1,6 @@
 $plus-symbol-size: 40px;
 
-@mixin plus-symbol($color: getColor('grey-light'), $text-color: getColor('grey-dark')) {
+@mixin plus-symbol($color: getColor('neutral-fade'), $text-color: getColor('neutral')) {
     &::after {
         content: "+";
         display: inline-block;