@trilogy-ds/styles 0.0.1-beta-74 → 0.0.1-beta-76

package/framework/src/base/_color.scss

@@ -1,36 +1,36 @@
 @use "sass:map";
 
 @function getColor( $name ) {
-  @if str-slice($name, 0, 3) == 'bg-' {
-    $submane: str-slice($name, 4);
-  @return getBGColor( $submane );
+  @if str-slice($name, 0, 5) == 'fade-' {
+    $submane: str-slice($name, 6);
+  @return getFadeColor( $submane );
   }
-  @return var(--color-#{nth(map-get($colors,$name),1)})
+  @return var(--color-#{nth(map-get($colors,$name),3)});
 }
 
 @function getColorValue( $name ) {
-  @return #{nth(map-get($colors,$name),2)}
+  @return #{nth(map-get($colors,$name),1)}
 }
 
-@function getBGColorValue( $name ) {
-  @return #{nth(map-get($colors,$name),4)}
+@function getFadeColorValue( $name ) {
+  @return #{nth(map-get($colors,$name),2)}
 }
 
 @function getColorBrandName( $name ) {
-  @return #{nth(map-get($colors,$name),1)}
+  @return #{nth(map-get($colors,$name),3)}
 }
 
-@function getBGColor( $name ) {
-  @return var(--color-bg-#{nth(map-get($colors,$name),1)})
+@function getFadeColor( $name ) {
+  @return var(--color-fade-#{nth(map-get($colors,$name),3)})
 }
 
 :root {
   @each $name, $color in $colors {
-    --color-#{nth($color,1)}: #{nth($color,2)};
-    --color-bg-#{nth($color,1)}: #{nth($color,4)};
+    --color-#{nth($color,3)}: #{nth($color,1)};
+    --color-fade-#{nth($color,3)}: #{nth($color,2)};
   }
 }
 
 @function invertColor ($colorName) {
-  @return var(--color-#{nth(map-get($colors,$colorName),3)})
+  @return var(--color-#{nth(map-get($colors,$colorName),4)})
 }

package/framework/src/base/_generic.scss

@@ -7,7 +7,7 @@ $body-line-height: 1.5 !default;
 .html-wrap {
     margin: 0;
     padding: 0;
-    background-color: getBGColor('neutral');
+    background-color: getColor('background');
     font-size: $body-size;
     -moz-osx-font-smoothing: grayscale;
     -webkit-font-smoothing: antialiased;

package/framework/src/base/_helpers.scss

@@ -197,8 +197,8 @@ $alignments: (
 
 @mixin typography-colors() {
   @each $name, $color in $colors {
-    $brandName: nth($color, 1);
-    $color: nth($color, 2);
+    $brandName: nth($color, 3);
+    $color: nth($color, 1);
     $color-invert: invertColor($name);
 
     .has-text-#{$brandName} {
@@ -211,7 +211,7 @@ $alignments: (
       background-color: getColor($name) !important;
     }
     .has-background-#{$brandName}-fade {
-      background-color: getBGColor($name) !important;
+      background-color: getFadeColor($name) !important;
     }
   }
 }

package/framework/src/components/_card.scss

@@ -6,7 +6,7 @@
   flex-direction: column;
   position: relative;
   box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
-  background-color: getColor("background");
+  background-color: getColor('background');
 
   &:not(:last-child) {
     margin-bottom: 15px;

package/framework/src/components/_divider.scss

@@ -1,7 +1,7 @@
 .divider {
     position: relative;
     text-align: center;
-    background-color: getBGColor('hovered');
+    background-color: getFadeColor('neutral');
     height: 1px;
     width: 100%;
     margin: 16px 0;

package/framework/src/components/_fab.scss

@@ -20,12 +20,20 @@
   white-space: nowrap;
 
   #{$hoverSelector}, &.is-extended, &:focus, &:focus-visible, &:focus-within {
-    background-color: getColor('hovered');
+    background: linear-gradient(
+        to top,
+        rgba(0, 0, 0, 0.25),
+        rgba(0, 0, 0, 0.25)
+    ) getColor('font');
     max-width: 300px;
   }
 
   &:active {
-    background-color: getColor('hovered');
+    background: linear-gradient(
+        to top,
+        rgba(0, 0, 0, 0.25),
+        rgba(0, 0, 0, 0.25)
+    ) getColor('font');
   }
 
   .icon {

package/framework/src/components/_modal.scss

@@ -135,7 +135,7 @@ body:has(.modal.is-active) {
     z-index: zindex('medium');
 
     #{$hoverSelector} {
-      background-color: getBGColor('neutral');
+      background-color: getFadeColor('neutral');
     }
 
     &::after,

package/framework/src/components/_pagination.scss

@@ -48,7 +48,7 @@
 .pagination-previous,
 .pagination-next,
 .pagination-link {
-  color: getColor('neutral-dark');
+  color: getColor('neutral');
   min-width: 2.25em;
 
   @include hover();
@@ -66,9 +66,12 @@
   &[aria-current] {
     background-color: getColor('font');
     color: getColor('background');
-
     #{$hoverSelector}, &:focus, &:focus-within {
-      background-color: getColor('hovered');
+      background: linear-gradient(
+          to top,
+          rgba(0, 0, 0, 0.25),
+          rgba(0, 0, 0, 0.25)
+      ) getColor('font') !important;
     }
   }
 }

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

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

package/framework/src/components/_price.scss

@@ -170,7 +170,7 @@ $price-levels: (
 
   &.is-striked {
     position: relative;
-    color: getBGColor('font');
+    color: getFadeColor('font');
 
     &::before {
       position: absolute;
@@ -185,7 +185,7 @@ $price-levels: (
     }
 
     &.is-inverted {
-      color: getBGColor('font');
+      color: getFadeColor('font');
 
       &::before {
         border-color: getColor('background');

package/framework/src/components/_segmented-control.scss

@@ -1,7 +1,7 @@
 .segmented-control {
   border-radius: 6px;
   padding: $spacing-1;
-  background-color: getBGColor('neutral');
+  background-color: getFadeColor('neutral');
   display: inline-block;
   margin: 16px 0;
 
@@ -19,7 +19,7 @@
     border: 2px solid transparent;
     height: 42px;
     color: getColor('font');
-    background-color: getBGColor('neutral');
+    background-color: getFadeColor('neutral');
 
     &:not(:last-child) {
       margin-right: 4px;

package/framework/src/components/_stepper.scss

@@ -23,7 +23,7 @@
     height: 4px;
     border-radius: var(--radius-small);
     background-size: 200% !important;
-    background-color: getBGColor('neutral');
+    background-color: getFadeColor('neutral');
   }
 
   &.is-error {
@@ -204,7 +204,7 @@
 
 @keyframes progress {
   0%, 100% {
-    background-image: linear-gradient(to right, transparent 0, transparent 50%, getBGColor('neutral') 50%, getBGColor('neutral') 100%);
+    background-image: linear-gradient(to right, transparent 0, transparent 50%, getFadeColor('neutral') 50%, getFadeColor('neutral') 100%);
   }
   0% {
     background-position: 100% 0;

package/framework/src/components/_timeline.scss

@@ -1,9 +1,9 @@
 @use 'sass:math';
 @import "../utilities/spacing";
 
-$timeline-marker-color: getBGColor('neutral') !default;
+$timeline-marker-color: getFadeColor('neutral') !default;
 $timeline-marker-icon-size: 2.85em !default;
-$timeline-line-color: getBGColor('neutral') !default;
+$timeline-line-color: getFadeColor('neutral') !default;
 $timeline-marker-size: 0.8em !default;
 $timeline-marker-border-size: 0.1em !default;
 $timeline-marker-border: $timeline-marker-border-size solid $timeline-marker-color !default;
@@ -53,7 +53,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
     padding-bottom: $spacing-2;
 
     &::before {
-      background-color: getBGColor('neutral');
+      background-color: getFadeColor('neutral');
     }
 
     .timeline-marker.is-icon {
@@ -116,13 +116,13 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
 
     &.cancel {
       .timeline-marker.is-icon {
-        background-color: getColor('neutral-dark');
-        color: getBGColor('neutral');
+        background-color: getColor('neutral');
+        color: getFadeColor('neutral');
       }
 
       &::before {
         content: '';
-        background-color: getBGColor('neutral-dark');
+        background-color: getFadeColor('neutral');
         display: block;
         width: $timeline-line-width;
         position: absolute;
@@ -338,11 +338,8 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
           background-color: getColor('main');
         }
 
-        &.undone {
-
-          &::before {
-            background-color: getBGColor('neutral');
-          }
+        &.undone::before {
+          background-color: getFadeColor('neutral');
         }
 
         &.done::before {
@@ -350,7 +347,7 @@ $timeline-image-dimensions: 16 24 32 48 64 96 128 !default;
         }
 
         &.cancel::before {
-          background-color: getBGColor('neutral-dark');
+          background-color: getFadeColor('neutral');
         }
 
         .timeline-marker {

package/framework/src/elements/_alert.scss

@@ -49,7 +49,7 @@ a.alert {
 
   @each $name in $colors-feedback {
     &.is-#{$name} {
-      background-color: getBGColor($name);
+      background-color: getFadeColor($name);
       border: 1px solid getColor($name);
 
       .icon {

package/framework/src/elements/_all.scss

@@ -9,7 +9,6 @@
 @import 'chips';
 @import 'checkbox';
 @import 'container';
-@import 'dot';
 @import 'entry';
 @import 'form';
 @import 'icon';

package/framework/src/elements/_autocomplete.scss

@@ -23,10 +23,10 @@
                 @include hoverRules();
                 margin-left: calc(2px - $spacing-3 );
                 margin-right: calc(2px - $spacing-3 );
-                border-top: 1px solid var(--color-bg-hovered);
-                border-bottom: 1px solid var(--color-bg-hovered);
+                border-top: 1px solid getColor('fade-neutral');
+                border-bottom: 1px solid getColor('fade-neutral');
                 padding: calc($spacing-1 - 1.25px) calc($spacing-4 - 1px);
             }
         }
     }
-}
+}

package/framework/src/elements/_box.scss

@@ -158,7 +158,7 @@ a.box {
     margin-right: calc(var(--padding-box)*-1);
     margin-bottom: calc(var(--padding-box)*-1);
     padding: var(--padding-box);
-    border-top: 1px solid getBGColor('hovered');
+    border-top: 1px solid getFadeColor('neutral');
     border-bottom-left-radius: var(--radius);
     border-bottom-right-radius: var(--radius);
   }

package/framework/src/elements/_button.scss

@@ -63,8 +63,8 @@ $button-border-width: 2px !default;
 
   &[disabled],
   &[aria-disabled=true] {
-    background-color: getBGColorValue('main') !important;
-    color: getBGColorValue('disabled') !important
+    background-color: getFadeColorValue('main') !important;
+    color: getFadeColorValue('disabled') !important
   }
 
   &.is-loading {

package/framework/src/elements/_chips.scss

@@ -55,7 +55,7 @@
         }
       }
       #{$hoverSelector} {
-        background-color: var(--color-bg-hovered);
+        background-color: getFadeColor('neutral');
       }
     }
 

package/framework/src/elements/_form.scss

@@ -228,7 +228,7 @@ $label-weight: $weight-bold;
       @each $name, $pair in $colors-feedback {
         &.is-#{$name} {
           ~ .icon {
-            color: getBGColor($name);
+            color: getFadeColor($name);
           }
         }
       }
@@ -242,7 +242,7 @@ $label-weight: $weight-bold;
       @each $name, $pair in $colors-feedback {
         &.is-#{$name} {
           ~ .icon {
-            color: getBGColor($name)
+            color: getFadeColor($name)
           }
         }
       }
@@ -405,7 +405,7 @@ $label-weight: $weight-bold;
 
         &:hover,
         &:focus {
-          color: getColor('neutral-dark');
+          color: getColor('neutral');
         }
       }
     }
@@ -569,7 +569,7 @@ $label-weight: $weight-bold;
 }
 
 .label {
-  color: getColor('neutral-dark');
+  color: getColor('neutral');
   display: block;
   font-size: $size-normal;
   font-weight: $label-weight;

package/framework/src/elements/_other.scss

@@ -5,40 +5,3 @@
 .delete {
     @include delete;
 }
-
-.heading {
-    display: block;
-    font-size: 11px;
-    letter-spacing: 1px;
-    margin-bottom: 5px;
-    text-transform: uppercase;
-}
-
-.highlight {
-    @include block;
-
-    font-weight: $weight-normal;
-    max-width: 100%;
-    overflow: hidden;
-    padding: 0;
-
-    pre {
-        overflow: auto;
-        max-width: 100%;
-    }
-}
-
-.number {
-    align-items: center;
-    background-color: getBGColor('neutral-dark');
-    border-radius: 9999px;
-    display: inline-flex;
-    font-size: $size-medium;
-    height: 2em;
-    justify-content: center;
-    margin-right: 15px;
-    min-width: 2.5em;
-    padding: 2.5px 5px;
-    text-align: center;
-    vertical-align: top;
-}

package/framework/src/elements/_progress.scss

@@ -18,10 +18,10 @@ $progressbar-small: 5px;
   -moz-appearance: none;
   -webkit-appearance: none;
 
-  background-color: getBGColor('hovered');
+  background-color: getFadeColor('neutral');
 
   &::-webkit-progress-bar {
-    background-color: getBGColor('font');
+    background-color: getFadeColor('font');
     border-radius: $progressbar-height;
   }
 
@@ -98,7 +98,7 @@ $progress-circle-slices: (
   secondary: getColor('info'),
   tertiary: getColor('font'),
   warning: getColor('warning'),
-  empty: getBGColor('neutral-dark')
+  empty: getFadeColor('neutral')
 );
 
 .progress-circle {

package/framework/src/elements/_switch.scss

@@ -15,14 +15,14 @@
 
     &:disabled ~ label {
       &:after {
-        $colorSvg: encodecolor(getColorValue('neutral-dark'));
+        $colorSvg: encodecolor(getColorValue('neutral'));
         content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-width="3.2" fill="none"><path d="M12.6 12.6L31.4 31.4M12.6 31.4L31.4 12.6"/></svg>');
       }
     }
 
     &:disabled:checked ~ label {
       &:after {
-        $colorSvg: encodecolor(getColorValue('neutral-dark'));
+        $colorSvg: encodecolor(getColorValue('neutral'));
         content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" fill="none"><path d="M11.3 22.4L18.1 29.3L32.7 14.7"/></svg>');
       }
     }
@@ -45,12 +45,12 @@
       border-radius: 9999px;
       width: 44px;
       height: 22px;
-      background-color: getBGColor('font');
+      background-color: getFadeColor('font');
       margin-left: 16px;
     }
 
     &:after {
-      $colorSvg: encodecolor(getBGColorValue('font'));
+      $colorSvg: encodecolor(getFadeColorValue('font'));
       content: url('data:image/svg+xml; utf8, <svg viewBox="0 0 44 44" xmlns="http://www.w3.org/2000/svg" stroke="#{$colorSvg}" stroke-linecap="round" stroke-width="3.2" fill="none"><path d="M12.6 12.6L31.4 31.4M12.6 31.4L31.4 12.6"/></svg>');
       position: absolute;
       top: 50%;

package/framework/src/elements/_table.scss

@@ -11,7 +11,7 @@
   @include block;
 
   background-color: transparent;
-  color: getColor('neutral-dark');
+  color: getColor('neutral');
 
   &:not(:last-child) {
     margin-bottom: 30px;
@@ -21,12 +21,12 @@
   * @deprecated "Use multiples <tr><th> instead"
   */
   tbody .is-body-header {
-    background-color: getBGColor('neutral-dark');
+    background-color: getFadeColor('neutral');
   }
 
   td,
   th {
-    border: 1px solid getBGColor('neutral-dark');
+    border: 1px solid getFadeColor('neutral');
     border-width: 0;
     padding: 20px;
     vertical-align: top;
@@ -56,7 +56,7 @@
   tr {
     @each $name in $colors-feedback {
       &.is-#{$name} {
-        background-color: getBGColor($name);
+        background-color: getFadeColor($name);
       }
     }
 
@@ -71,7 +71,7 @@
     }
 
     td {
-      border-bottom: 1px solid getBGColor('neutral-dark');
+      border-bottom: 1px solid getFadeColor('neutral');
 
       > p {
         margin: 0;
@@ -155,12 +155,12 @@
 
   &:not(.is-bordered).is-comparative {
     th {
-      border-right: 1px solid getBGColor('neutral');
+      border-right: 1px solid getFadeColor('neutral');
     }
 
     td {
       &:not(:last-child) {
-        border-right: 1px solid getBGColor('neutral-dark');
+        border-right: 1px solid getFadeColor('neutral');
       }
     }
   }
@@ -196,14 +196,14 @@
     tbody {
       tr:not(.is-selected) {
         &:nth-child(even) {
-          background-color: getBGColor('neutral');
+          background-color: getFadeColor('neutral');
         }
       }
     }
   }
 
   .subtable {
-    background-color: getBGColor('neutral');
+    background-color: getFadeColor('neutral');
     border-radius: var(--radius);
     padding: $box-padding * 2;
 
@@ -216,7 +216,7 @@
 
       tr:not(:first-child) {
         td {
-          border-top: 1px solid getColor('neutral-dark');
+          border-top: 1px solid getColor('neutral');
         }
       }
 

package/framework/src/elements/_tag.scss

@@ -85,7 +85,7 @@ $tag-delete-margin: 1px !default;
 
     &.is-inverted {
       .tag {
-        background-color: getColor(getColor('background'));
+        background-color: getColor('fade-background');
       }
     }
 
@@ -94,7 +94,7 @@ $tag-delete-margin: 1px !default;
 
 .tag {
   align-items: center;
-  background-color: getBGColor('neutral-dark');
+  background-color: getFadeColor('neutral');
   border-radius: 9999px;
   color: getColor('font');
   display: inline-flex;
@@ -120,7 +120,7 @@ $tag-delete-margin: 1px !default;
 
   @each $name in $colors-feedback {
     &.is-#{$name}:not(.is-inverted) {
-      background-color: getBGColor($name);
+      background-color: getFadeColor($name);
     }
     &.is-inverted.is-#{$name} {
       color: getColor($name);

package/framework/src/elements/_toaster.scss

@@ -13,7 +13,7 @@ a.toaster {
     @include apply-shadow-box();
 
 
-  background-color: getColor('bg-info');
+  background-color: getColor('fade-info');
   border-radius: var(--radius);
   margin-bottom: 16px;
   position: relative;
@@ -64,7 +64,7 @@ a.toaster {
 
   @each $name in $colors-feedback {
     &.is-#{$name} {
-      background-color: getBGColor($name);
+      background-color: getFadeColor($name);
       border: 2px solid getColor($name);
 
       .icon {

package/framework/src/grid/_columns.scss

@@ -781,7 +781,7 @@
     }
 
     &::-webkit-scrollbar-track {
-      background-color: getBGColor('font');
+      background-color: getFadeColor('font');
       border-radius: var(--radius);
       margin: 0 8px;
     }

package/framework/src/layout/_section.scss

@@ -13,14 +13,6 @@
     }
   }
 
-  &:nth-child(even) {
-    background-color: getBGColor('neutral');
-  }
-
-  &:nth-child(odd) {
-    background-color: getColor('background');
-  }
-
   &.is-info {
     background-color: getColor('info');
     color: getColor('background');
@@ -46,13 +38,4 @@
   &.has-pattern-dark {
     @include pattern-dark(120%, 260px, -30%);
   }
-
-}
-
-.section:nth-child(2n).is-inverted {
-  background-color: getColor('background');
-}
-
-.section:nth-child(2n-1).is-inverted {
-  background-color: getBGColor('neutral');
 }

package/framework/src/theming/buttons_partial.scss

@@ -9,7 +9,7 @@ Colors for buttons
 $button-colors: (
   'accent':['conversion', 'alternate', 'background'],
   'primary': ['primary', 'main', 'background'],
-  'secondary': ['secondary', 'bg-main', 'main'],
+  'secondary': ['secondary', 'fade-main', 'main'],
   'ghost': ['ghost', 'background', 'main'],
 ) !default;
 

package/framework/src/theming/common_partials.scss

@@ -4,6 +4,6 @@
   --radius: 8px;
   --radius-small: 4px;
   --radius-large: 16px;
-  --border: 1px solid #{getBGColor('font')};
+  --border: 1px solid #{getFadeColor('font')};
   --border-active: 2px solid #{getColor('main')};
 }