@trilogy-ds/styles 0.0.1-beta-3 → 0.0.1-beta.10

package/framework/src/components/_otp.scss

@@ -3,15 +3,17 @@
   flex-wrap: nowrap;
 
   .otp {
+    @include hover();
     outline: none;
     border: 1px solid currentColor;
-    border-radius: 4px;
+    border-radius: $radius-small;
     background: transparent;
     width: 33px;
     height: 40px;
     margin: 4px 4px 0 4px;
     text-align: center;
-    color: getColor('grey');
+    color: getColor('neutral');
+
     &:first-child {
       margin: 4px 4px 0 0;
     }
@@ -24,13 +26,7 @@
 
   &.is-danger {
     .otp {
-      border: 2px solid  getColor('error');
-    }
-  }
-
-  &.is-tertiary {
-    .otp {
-      border: 2px solid getColor('font');
+      border: 1px solid getColor('error');
     }
   }
 
@@ -42,7 +38,7 @@
 
   &.is-focus {
     .otp {
-      border: 2px solid getColor('alternate');;
+      border: 1px solid getColor('font');;
       color: getColor('font')
     }
   }
@@ -50,38 +46,23 @@
 
   &.is-error {
     .otp {
-      border: 2px solid getColor('error');
+      border: 1px solid getColor('error');
       color: getColor('font')
     }
   }
 
-  &.is-tertiary {
-    .otp {
-      border: 2px solid getColor('font');
-    }
-  }
-
-  &.is-disabled {
-    .otp {
-      border: none !important;
-      background: getColor('grey-disabled');
-      pointer-events: none;
-      color: getColor('grey');
-    }
-  }
-
 }
 
 .otp-list:focus-within {
   .otp {
-    border: 2px solid getColor('alternate');;
+    border: 1px solid getColor('font');;
     color: getColor('font');
   }
 }
 
 .otp-list.is-error:focus-within {
   .otp {
-    border: 2px solid getColor('error');
+    border: 1px solid getColor('error');
     color: getColor('font');
   }
 }

package/framework/src/components/_pagination.scss

@@ -1,182 +1,160 @@
 .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;
-                }
-            }
-        }
+  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,
 .pagination-list {
-    align-items: center;
-    display: flex;
-    justify-content: center;
-    text-align: center;
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  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;
+  @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');
-    min-width: 2.25em;
+  color: getColor('neutral-dark');
+  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;
-    }
+  @include hover();
+  
 }
 
 .pagination-previous,
 .pagination-next {
-    padding-left: 0.75em;
-    padding-right: 0.75em;
-    white-space: nowrap;
+  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');
+  &.is-current {
+    background-color: getColor('font');
+    color: getColor('background');
+
+    #{$hoverSelector}, &:focus, &:focus-within {
+      background-color: getColor('hovered');
     }
+  }
 }
 
 .pagination-ellipsis {
-    color: getColor('grey-light');
-    pointer-events: none;
+  color: getBGColor('neutral-dark');
+  pointer-events: none;
 }
 
 .pagination-list {
-    flex-wrap: wrap;
+  flex-wrap: wrap;
 }
 
 @include mobile {
-    .pagination {
-        flex-wrap: wrap;
-    }
-
-    .pagination-previous,
-    .pagination-next {
-        flex-grow: 1;
-        flex-shrink: 1;
-    }
-
-    .pagination-list {
-        li {
-            flex-grow: 1;
-            flex-shrink: 1;
-        }
+  .pagination {
+    flex-wrap: wrap;
+  }
+
+  .pagination-previous,
+  .pagination-next {
+    flex-grow: 1;
+    flex-shrink: 1;
+  }
+
+  .pagination-list {
+    li {
+      flex-grow: 1;
+      flex-shrink: 1;
     }
+  }
 }
 
 @include tablet {
-    .pagination-list {
-        flex-grow: 1;
-        flex-shrink: 1;
-        justify-content: flex-start;
+  .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-previous {
+      .pagination-list {
+        justify-content: center;
         order: 2;
-    }
+      }
 
-    .pagination-next {
+      .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;
-            }
-        }
+    &.is-right {
+      .pagination-previous {
+        order: 1;
+      }
+
+      .pagination-next {
+        order: 2;
+      }
+
+      .pagination-list {
+        justify-content: flex-end;
+        order: 3;
+      }
     }
+  }
 }
 
 @include desktop {
-    .pagination {
-        justify-content: center;
-    }
+  .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: getBGColor('neutral-dark'), $text-color: getColor('neutral-dark')) {
     &::after {
         content: "+";
         display: inline-block;

package/framework/src/components/_popover.scss

@@ -68,7 +68,7 @@
 
 .popover {
     position: relative;
-    display: inline-block;
+    display: inline-flex;
 
     .popover-content {
         @include position-top();
@@ -79,7 +79,6 @@
         color: getColor('background');
         display: inline-block;
         font-size: 12px;
-        opacity: 0.95;
         visibility: hidden;
         padding: $spacing-2;
         font-weight: 500;
@@ -329,12 +328,10 @@
 
     &.is-popover-active .popover-content,
     &:hover .popover-content {
-        opacity: 1;
         visibility: visible;
     }
 
     .popover-trigger:focus ~ .popover-content {
-        opacity: 1;
         visibility: visible;
     }
 }