@trilogy-ds/styles 0.0.1-beta-4 → 0.0.1-beta.11

package/framework/src/elements/_radio.scss

@@ -59,7 +59,7 @@
 
     input:checked:disabled ~ label.radio-label {
         &:after {
-            background-color: getColor('grey');
+            background-color: getColor('neutral');
             top: 19px;
             right: 19px;
         }

package/framework/src/elements/_select.scss

@@ -1,315 +1,279 @@
 [data-blur-select] {
-    position: absolute;
-    z-index: zindex('large');
-    min-width: 100%;
-    min-height: 100%;
-    left:0;
-    top: 0;
+  position: absolute;
+  z-index: zindex('large');
+  min-width: 100%;
+  min-height: 100%;
+  left: 0;
+  top: 0;
 }
 
 
-@mixin arrow-style($isDisabled:false, $direction:"up") {
-    $color: getColor('font');
-    @if($isDisabled) { $color: getColor('grey') }
-
-    @include arrow($color,$direction);
-    right: 16px;
-    margin-left: 16px;
-    top: calc(50% - 7px);
+@mixin arrow-style($direction:"up") {
+  @include arrow($direction);
+  right: 16px;
+  margin-left: 16px;
+  top: calc(50% - 7px);
 }
 
 .select {
-    border: 1px solid getColor('grey');
-    display: inline-block;
+  border: 1px solid getBGColor('font');
+  display: inline-block;
+  max-width: 100%;
+  position: relative;
+  font-family: $body-family;
+  border-radius: $radius-small;
+  background-color: getColor('background');
+  display: block;
+  font-size: 1em;
+  max-width: 100%;
+  outline: none;
+  cursor: pointer;
+  height: 56px;
+
+  select {
+    height: 100%;
+    border: 1px solid transparent;
+    border-radius: 3px;
     max-width: 100%;
-    position: relative;
-    font-family: $body-family;
-    border-radius: 4px;
-    background-color: getColor('background');
-    display: block;
+    width: 100%;
     font-size: 1em;
-    max-width: 100%;
-    outline: none;
+    font-family: $body-family;
+    color: getColor('font');
     cursor: pointer;
-    height: 56px;
-
-    select {
-        height: 100%;
-        border: 1px solid transparent;
-        border-radius: 3px;
-        max-width: 100%;
-        width: 100%;
-        font-size: 1em;
-        font-family: $body-family;
-        color: getColor('font');
-        cursor: pointer;
-        -webkit-appearance: none;
-        -moz-appearance: none;
-        appearance: none;
-        z-index: 10;
-        background-color: transparent;
-        opacity: 100;
-        outline: none;
-        padding-left: $spacing-4;
-        &::-ms-expand {
-            display: none !important;
-        }
-        &:focus, &:hover {
-            outline: 1px auto getColor('alternate');
-        }
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    z-index: 10;
+    background-color: transparent;
+    opacity: 100;
+    outline: none;
+    padding-left: $spacing-4;
 
+    &::-ms-expand {
+      display: none !important;
     }
 
-    label {
-        position: absolute;
-        top: 50%;
-        transform: translate(0, -50%);
-        left: 16px !important;
-        color: getColor('grey') !important
-    }
+    @include hover();
 
-    &.select-native {
-        .icon {
-            position: absolute;
-        }
+  }
 
-        &.has-icon {
-            select {
-                padding-left: 50px;
-                &:not(.no-label) {
-                    padding-bottom: 5px;
-                }
-            }
-        }
-    }
+  label {
+    position: absolute;
+    top: 50%;
+    transform: translate(0, -50%);
+    left: 16px !important;
+    color: getColor('neutral') !important
+  }
 
-    .has-dynamic-placeholder {
-        label {
-            top: 18px;
-            color: getColor('grey') !important
-        }
+  &.select-native {
+    .icon {
+      position: absolute;
     }
 
+    &.has-icon {
+      select {
+        padding-left: 50px;
 
-    &-value {
-        position: absolute ;
-        left: 16px;
-        top: 50%;
-        transform: translateY(-20%);
-
-        &.no-label {
-            transform: translateY(-50%);
-
+        &:not(.no-label) {
+          padding-bottom: 5px;
         }
+      }
     }
+  }
 
+  .has-dynamic-placeholder {
+    label {
+      top: 18px;
+      color: getColor('neutral') !important
+    }
+  }
 
 
-    &-disabled {
-        background-color: getColor('grey-disabled');
-        border: 1px solid getColor('grey-disabled');
-        cursor:default ;
-        label {
-            color: #565656  !important;
-        }
-        .icon {
-            color: #565656;
-        }
-    }
+  &-value {
+    position: absolute;
+    left: 16px;
+    top: 50%;
+    transform: translateY(-20%);
+
+    &.no-label {
+      transform: translateY(-50%);
 
+    }
+  }
 
+  .icon {
+    height: 100%;
+    width: 50px;
+  }
 
-    .icon {
-        height: 100%;
-        width: 50px;
+  &.has-icon {
+    label {
+      left: 50px !important;
     }
 
-    &.has-icon {
-        label {
-            left: 50px !important;
-        }
-        .select-value {
-            left: 50px !important;
-        }
+    .select-value {
+      left: 50px !important;
     }
+  }
 
 
-    &:not(.is-loading) {
-        &:not(.select-disabled) {
-            &::after {
-                @include arrow-style(false,"down")
-            }
-            &:not(.select-native):hover, &:not(.select-native):focus {
-                outline: 1px auto getColor('alternate');
-            }
-        }
-        &.select-disabled {
-            &::after {
-                @include arrow-style(true,"down")
-            }
-        }
+  &:not(.is-loading) {
+    &:not(.select-disabled) {
+      &::after {
+        @include arrow-style("down")
+      }
 
+      &:not(.select-native) {
+        @include hover();
+      }
     }
+  }
 
-    &.select-show-options:not(.is-loading) {
-        outline: 1px auto getColor('alternate');
-        &::after {
-            @include arrow-style()
-        }
-        &:hover {
-            &::after {
-                border-color: getColor('font');
-            }
-        }
-    }
+  &.select-show-options:not(.is-loading) {
+    outline: 1px auto getColor('main');
 
-    // Colors
-    @each $name in $colors-brand {
-      $brandName: getColorBrandName($name);
-      $color: getColor($name);
-
-        &.is-#{$brandName} {
-            &:not(:hover) {
-                outline: 1px auto $color;
-            }
-            &:hover,
-            &.is-hovered {
-                outline: 1px auto getVariantColor($name, 1);
-            }
-        }
+    &::after {
+      @include arrow-style()
     }
 
-    // Sizes
-    &.is-small {
-        @include control-small;
+    #{$hoverSelector} {
+      &::after {
+        border-color: getColor('font');
+      }
     }
-
-    &.is-large {
-        @include control-large;
+  }
+
+  // Sizes
+  &.is-small {
+    @include control-small;
+  }
+
+  &.is-large {
+    @include control-large;
+  }
+
+  &.is-loading {
+    &::after {
+      @include spinner;
+      margin-top: 0;
+      position: absolute;
+      right: 0.625em;
+      top: 0.625em;
+      transform: none;
     }
 
+    &.is-small::after {
+      font-size: $size-small;
+    }
 
-    &.is-loading {
-        &::after {
-            @include spinner;
-            margin-top: 0;
-            position: absolute;
-            right: 0.625em;
-            top: 0.625em;
-            transform: none;
-        }
-        &.is-small::after {
-            font-size: $size-small;
-        }
-        &.is-large::after {
-            font-size: $size-large;
-        }
+    &.is-large::after {
+      font-size: $size-large;
     }
+  }
 }
 
 .select-options {
-    position: absolute;
-    margin-top: 8px;
+  position: absolute;
+  margin-top: 8px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  background: getColor('background');
+  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
+  border-radius: $radius-small;
+  overflow: auto;
+  width: 100%;
+  max-height: 260px;
+  z-index: zindex('large');
+
+
+  &-option {
     display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-    background: getColor('background');
-    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.1);
-    border-radius: 4px;
-    overflow: auto;
+    flex-direction: row;
+    align-items: center;
+    justify-content: space-between;
+    padding: 14px $spacing-4;
     width: 100%;
-    max-height: 260px;
-    z-index:  zindex('large') ;
-
-
-    &-option {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        justify-content: space-between;
-        padding: 14px $spacing-4;
-        width: 100%;
-        .has-icon {
-            display: flex;
-            align-items: center;
-            .icon {
-              margin-right: 16px;
-              width: 20px;
-              height: 20px;
-            }
-          }
-        &-activated {
-            color: getColor('alternate');
-            font-weight: $weight-bold;
-            &::after {
-                content: "";
-                mask-image: url('./assets/icons/all/check.svg');
-                background-color: getColor('alternate');
-                min-width: 15px;
-                min-height: 15px;
-                display:inline-block;
-                margin-left: 16px;
-                mask-size: 20px;
-            }
-        }
-        &-disabled {
-            background-color: getColor('grey-disabled');
-            color: #565656
-        }
+
+    .has-icon {
+      display: flex;
+      align-items: center;
+
+      .icon {
+        margin-right: 16px;
+        width: 20px;
+        height: 20px;
+      }
     }
 
-    .option-container, &-option {
-        outline:none;
-        &:focus {
-            background-color: #E4EAED;
-        }
+    &-activated {
+      color: getColor('main');
+      font-weight: $weight-bold;
+
+      &::after {
+        content: "";
+        mask-image: url('./assets/icons/all/check.svg');
+        background-color: getColor('main');
+        min-width: 15px;
+        min-height: 15px;
+        display: inline-block;
+        margin-left: 16px;
+        mask-size: 20px;
+      }
+    }
 
-        &:not([data-is-disabled='true']){
-            cursor: pointer;
-        }
+  }
+
+  .option-container, &-option {
+    outline: none;
+
+    &:focus {
+      background-color: #E4EAED;
     }
+
+    &:not([data-is-disabled='true']) {
+      cursor: pointer;
+    }
+  }
 }
 
 [data-is-open-options="false"] {
-    display: none;
+  display: none;
 }
 
 [data-is-open-options="true"] {
-    display:block
+  display: block
 }
 
 //AutoComplete
 .is-autocomplete {
+  .autocomplete-menu {
+    display: none;
+  }
+
+  &.is-active {
     .autocomplete-menu {
-        display: none;
+      display: block;
+      border: 1px solid rgba(0, 38, 60, .4);
+      border-radius: $radius-small;
+      max-height: 220px;
+      overflow-y: auto;
+      background-color: getColor('background');
+      z-index: 10000;
     }
 
-    &.is-active {
-        .autocomplete-menu {
-            display: block;
-            border: 1px solid rgba(0,38,60,.4);
-            padding: 5px 10px;
-            border-radius: 4px;
-            max-height: 220px;
-            overflow-y: auto;
-            background-color: getColor('background');
-            z-index: 10000;
-        }
+    .autocomplete-item {
+      cursor: pointer;
+      padding: 16px;
 
-        .autocomplete-item {
-            cursor: pointer;
-            padding: 3.75px calc(15px - 10px);
-
-            &.is-active, &[data-autocomplete-item-hover] {
-                background-color: rgba(16,157,185,.08);
-                border-top: 1px solid getColor('alternate');
-                border-bottom: 1px solid getColor('alternate');
-                margin-left: -10px;
-                margin-right: -10px;
-                padding: 2.75px 15px;
-            }
-        }
+      @include hover();
+
+      &.is-active, &[data-autocomplete-item-hover] {
+        @include hoverRules();
+        font-weight: bold;
+      }
     }
+  }
 }
 
 

package/framework/src/elements/_sticker.scss

@@ -16,7 +16,7 @@ $sticker-radius: $radius-large;
   &:not(.is-hat) {
     width: fit-content;
 
-    @include mobile{
+    @include mobile {
       border-radius: 16px;
       font-size: 12px;
       padding: $spacing-1 $spacing-2;
@@ -30,9 +30,13 @@ $sticker-radius: $radius-large;
     }
   }
 
+  &.is-accent {
+    background-color: getColor('alternate');
+    color: getColor('background') !important;
+  }
 
-  &.is-primary {
-    background-color: getColor('main');
+  &.is-info {
+    background-color: getColor('info');
     color: getColor('background') !important;
   }
 
@@ -40,17 +44,12 @@ $sticker-radius: $radius-large;
     border-radius: 0 16px 0 0;
   }
 
-  &.is-outlined,
   &.is-inverted {
     background-color: white !important;
     border-style: solid;
     border-width: 2px;
     border-color: currentColor;
-    color: getColor('font') !important;
-
-    &.is-primary {
-      color: getColor('main') !important;
-    }
+    color: currentColor;
   }
 
   &.is-small {