active_frontend 16.4.1 → 17.0.0

data/vendor/assets/stylesheets/_variable.scss

@@ -38,35 +38,35 @@ $animation-durations: (
 
 // Color
 // ==================================================
-$colors-grayscale: (
-  'light-black': rgba(21,48,66,1),
+$colors-base: (
   'black': rgba(16,37,51,1),
-  'dark-black': rgba(12,26,36,1),
-  'light-slate': rgba(43,67,88,1),
-  'slate': rgba(34,54,72,1),
-  'dark-slate': rgba(27,41,55,1),
-  'light-gray': rgba(158,177,201,1),
-  'gray': rgba(142,161,187,1),
-  'dark-gray': rgba(127,146,170,1),
-  'light-haze': rgba(244,245,250,1),
-  'haze': rgba(234,237,248,1),
-  'dark-haze': rgba(222,227,241,1),
   'white': rgba(255,255,255,1),
   'transparent': rgba(0,0,0,0)
 );
+$colors-grayscale: (
+  'light-slate': rgba(40,63,92,1),
+  'slate': rgba(34,54,78,1),
+  'dark-slate': rgba(28,45,64,1),
+  'light-gray': rgba(178,196,214,1),
+  'gray': rgba(165,186,207,1),
+  'dark-gray': rgba(152,176,200,1),
+  'light-haze': rgba(246,248,252,1),
+  'haze': rgba(234,239,250,1),
+  'dark-haze': rgba(223,230,246,1)
+);
 $colors-brand: (
-  'lime': rgba(115,211,37,1),
-  'green': rgba(59,201,29,1),
-  'teal': rgba(21,214,150,1),
-  'sky': rgba(0,160,255,1),
-  'blue': rgba(3,94,255,1),
-  'indigo': rgba(94,64,255,1),
-  'purple': rgba(156,60,241,1),
-  'brown': rgba(130,65,36,1),
-  'pink': rgba(252,81,103,1),
-  'red': rgba(243,29,44,1),
-  'orange': rgba(255,115,25,1),
-  'yellow': rgba(255,205,0,1)
+  'lime': rgba(171,189,49,1),
+  'green': rgba(67,197,64,1),
+  'teal': rgba(39,196,144,1),
+  'sky': rgba(65,176,255,1),
+  'blue': rgba(41,121,254,1),
+  'indigo': rgba(134,96,254,1),
+  'purple': rgba(187,100,250,1),
+  'brown': rgba(128,88,78,1),
+  'pink': rgba(245,112,129,1),
+  'red': rgba(239,56,67,1),
+  'orange': rgba(247,115,55,1),
+  'yellow': rgba(249,202,40,1)
 );
 $colors-global: (
   'primary': map-get($colors-brand, 'blue'),
@@ -74,32 +74,36 @@ $colors-global: (
   'tertiary': map-get($colors-brand, 'red'),
   'quaditiary': map-get($colors-brand, 'yellow')
 );
-$colors: map-collect($colors-grayscale, $colors-brand, $colors-global);
+$colors: map-collect($colors-base, $colors-grayscale, $colors-brand, $colors-global);
 $colors-black-text: 'transparent', 'dark-haze', 'haze', 'light-haze', 'white';
 
 // Common
 // ==================================================
 $common-border-widths: (
-  xl: 6px,
+  xxxl: 8px,
+  xxl: 6px,
+  xl: 4px,
   l: 3px,
   m: 2px,
   b: 1px,
   n: 0
 );
 $common-border-radiuses: (
-  xl: 999px,
+  xxl: 999px,
+  xl: 14px,
   l: 10px,
   m: 6px,
-  b: 2px,
-  s: 1px,
+  b: 4px,
+  s: 2px,
   n: 0
 );
 $common-box-shadows: (
   xxl: 14px,
   xl: 10px,
-  l: 6px,
-  m: 4px,
-  b: 2px,
+  l: 8px,
+  m: 6px,
+  b: 4px,
+  s: 2px,
   n: 0
 );
 $common-margins-and-paddings: (
@@ -114,7 +118,7 @@ $common-margins-and-paddings: (
   n: 0
 );
 $common-border-styles: dashed, dotted, double, none, solid;
-$common-display-types: block, inline, inline-block, table, table-cell, table-row;
+$common-display-types: block, inline, inline-block, none, table, table-cell, table-row;
 $common-visibility-types: collapse, hidden, visible;
 
 // Font
@@ -130,8 +134,8 @@ $font-families: (
   serif: ('Tiempos Headline', Georgia, 'Times New Roman', Times, serif)
 );
 $font-indents: (
-  xxxl: 25px,
-  xxl: 20px,
+  xxxl: 45px,
+  xxl: 30px,
   xl: 15px,
   l: 10px,
   m: 5px,
@@ -139,7 +143,7 @@ $font-indents: (
   s: -5px,
   xs: -10px,
   xxs: -15px,
-  xxxs: -20px
+  xxxs: -30px
 );
 $font-line-heights: (
   xxxl: 80px,

data/vendor/assets/stylesheets/blocks/_button.scss

@@ -16,16 +16,16 @@
   @include appearance(none);
   @include transition(all 0.3s ease-in-out);
   background: color(haze);
-  border: 1px solid color(haze);
+  border: 2px solid color(haze);
   border-radius: border-radius(b);
   box-sizing: border-box;
-  color: color(slate);
+  color: color(black);
   cursor: pointer;
   display: inline-block;
   font-size: text-size(b);
   font-weight: text-weight(normal);
   line-height: 1;
-  padding: 12px 20px 14px;
+  padding: 11px 20px 13px;
   text-align: center;
   touch-action: manipulation;
   vertical-align: middle;
@@ -36,15 +36,15 @@
       &:hover,
       &.active,
       &:focus {
-        background: darkish-color(haze);
-        border-color: darkish-color(haze);
+        background: color(dark-haze);
+        border-color: color(dark-haze);
       }
       &:active,
       &.disabled,
       &[disabled] {
-        background: lightish-color(haze);
-        border-color: lightish-color(haze);
-        color: transparentize(color(slate), 0.35);
+        background: color(light-haze);
+        border-color: color(light-haze);
+        color: color-transparentize(black, 0.35);
       }
       &.disabled,
       &[disabled] { cursor: not-allowed; }
@@ -70,32 +70,32 @@
 // ==================================================
 .btn-size-l,
 .btn-size-m { font-size: text-size(m); }
-.btn-size-l { padding: 21px 30px; }
-.btn-size-m { padding: 16px 25px; }
+.btn-size-l { padding: 20px 30px; }
+.btn-size-m { padding: 15px 25px; }
 .btn-size-s {
   font-size: text-size(s);
-  padding: 8px 15px 9px;
+  padding: 7px 15px 8px;
 }
 .btn-icon {
   max-width: 44px;
-  padding: 13px 0;
+  padding: 12px 0;
   width: 44px;
 
   &.btn-size-l,
   &.btn-size-m { font-size: text-size(l); }
   &.btn-size-l {
     max-width: 62px;
-    padding: 20px 0;
+    padding: 19px 0;
     width: 62px;
   }
   &.btn-size-m {
     max-width: 52px;
-    padding: 15px 0;
+    padding: 14px 0;
     width: 52px;
   }
   &.btn-size-s {
     max-width: 33px;
-    padding: 8.5px 0;
+    padding: 7.5px 0;
     width: 33px;
   }
   &.btn-link {
@@ -124,14 +124,14 @@
         &:hover,
         &.active,
         &:focus {
-          background: darkish-color($name);
-          border-color: darkish-color($name);
+          background: color-600($name);
+          border-color: color-600($name);
         }
         &:active,
         &.disabled,
         &[disabled] {
-          background: lightish-color($name);
-          border-color: lightish-color($name);
+          background: color-400($name);
+          border-color: color-400($name);
           color: transparentize(text-color-on($name), 0.35);
         }
       }
@@ -144,10 +144,10 @@
         @if ($pseudo-elements) {
           &:hover,
           &.active,
-          &:focus { color: darkish-color($name); }
+          &:focus { color: color-600($name); }
           &:active,
           &.disabled,
-          &[disabled] { color: lightish-color($name); }
+          &[disabled] { color: color-400($name); }
         }
       }
     }
@@ -162,8 +162,8 @@
           &:focus,
           &.disabled,
           &[disabled] {
-            background: darkish-color($name);
-            border-color: darkish-color($name);
+            background: color-600($name);
+            border-color: color-600($name);
             color: text-color-on($name);
           }
           &.disabled,
@@ -219,7 +219,7 @@
 
   > .btn {
     border-radius: 0;
-    margin-left: -1px;
+    margin-left: -2px;
     position: relative;
 
     &:hover,
@@ -248,7 +248,7 @@
   > .btn {
     display: block;
     margin-left: 0;
-    margin-top: -1px;
+    margin-top: -2px;
     width: 100%;
 
     &:first-child {
@@ -282,7 +282,7 @@
       border-right-width: 0;
       display: table-cell;
 
-      &:last-child { border-right-width: 1px; }
+      &:last-child { border-right-width: 2px; }
     }
   }
 
@@ -331,7 +331,7 @@
       border-radius: 0;
       display: block;
       margin-left: 0;
-      margin-top: -1px;
+      margin-top: -2px;
       width: 100%;
 
       &:first-child {
@@ -349,7 +349,7 @@
     &.btn-group-vertical {
       > .btn {
         display: inline-block;
-        margin-left: -1px;
+        margin-left: -2px;
         margin-top: 0;
         max-width: initial;
         width: initial;
@@ -370,10 +370,10 @@
     &.btn-group-block {
       > .btn {
         border-radius: 0;
-        border-right-width: 1px;
+        border-right-width: 2px;
         display: block;
         margin-left: 0;
-        margin-top: -1px;
+        margin-top: -2px;
         width: 100%;
 
         &:first-child {
@@ -404,7 +404,7 @@
           &.dropdown-toggle {
             border-bottom-left-radius: 0;
             border-bottom-right-radius: border-radius(b);
-            border-right-width: 1px;
+            border-right-width: 2px;
             border-top-left-radius: 0;
             border-top-right-radius: border-radius(b);
           }

data/vendor/assets/stylesheets/blocks/_code.scss

@@ -51,7 +51,7 @@ samp { white-space: pre-wrap; }
 pre,
 samp {
   .c {
-    color: color(light-gray);
+    color: color(white);
     font-style: italic;
   } // Comment
   .err {
@@ -60,12 +60,12 @@ samp {
   } // Error
   .k { color: color(blue); } // Keyword
   .cm {
-    color: color(light-gray);
+    color: color(white);
     font-style: italic;
   } // Comment.Multiline
   .cp { color: color(green); } // Comment.Preproc
   .c1 {
-    color: color(light-gray);
+    color: color(white);
     font-style: italic;
   } // Comment.Single
   .cs {
@@ -81,10 +81,10 @@ samp {
   } // Generic.Heading
   .gi { color: color(green); } // Generic.Inserted
   .go { color: color(gray); } // Generic.Output
-  .gp { color: color(slate); } // Generic.Prompt
+  .gp { color: color(black); } // Generic.Prompt
   .gs { font-weight: bold; } // Generic.Strong
   .gu {
-    color: color(slate);
+    color: color(black);
     font-weight: bold;
   } // Generic.Subheading
   .gt { color: color(red); } // Generic.Traceback
@@ -136,7 +136,11 @@ samp {
   .vi { color: color(red); } // Name.Variable.Instance
   .il { color: color(green); } // Literal.Number.Integer.Long
 
-  &.dark {
+  &.light,
+  &.white {
+    .c,
+    .cm,
+    .c1 { color: color(gray); }
     .err { background: color(gray); }
     .gp,
     .gu { color: inherit; }

data/vendor/assets/stylesheets/blocks/_common.scss

@@ -29,7 +29,7 @@
 .scrollbar {
   &::-webkit-scrollbar {
     background: color(transparent);
-    border-radius: 999px;
+    border-radius: border-radius(xxl);
     width: 6px;
   }
   @if ($pseudo-elements) {
@@ -37,12 +37,12 @@
   }
   &::-webkit-scrollbar-thumb {
     background: rgba(color(transparent), 0.5);
-    border-radius: 999px;
+    border-radius: border-radius(xxl);
   }
   @if ($pseudo-elements) {
     &::-webkit-scrollbar-thumb:active {
       background: rgba(color(transparent), 0.6);
-      border-radius: 999px;
+      border-radius: border-radius(xxl);
     }
   }
 }
@@ -92,11 +92,6 @@
   border-color: color(dark-slate);
   color: color(gray);
 }
-.primary {
-  background: color(primary);
-  border-color: darker-color(primary);
-  color: text-color-on(primary);
-}
 .transparent {
   background: color(transparent);
   border-color: color(transparent);
@@ -105,7 +100,7 @@
 .light,
 .white {
   border-color: color(haze);
-  color: color(slate);
+  color: color(black);
 }
 .light { background: color(light-haze); }
 .white { background: color(white); }
@@ -113,21 +108,21 @@
 // Box shadow insets
 // ==================================================
 @each $name, $spread in $common-box-shadows {
-  .box-shadow-inset-#{$name} { box-shadow: inset 0 0 $spread darker-color(dark-haze) !important; }
-  .box-shadow-inset-bottom-#{$name} { box-shadow: inset 0 1px $spread darker-color(dark-haze) !important; }
-  .box-shadow-inset-left-#{$name} { box-shadow: inset -1px 0 $spread darker-color(dark-haze) !important; }
-  .box-shadow-inset-right-#{$name} { box-shadow: inset 1px 0 $spread darker-color(dark-haze) !important; }
-  .box-shadow-inset-top-#{$name} { box-shadow: inset 0 -1px $spread darker-color(dark-haze) !important; }
+  .box-shadow-inset-#{$name} { box-shadow: inset 0 0 $spread color(dark-haze) !important; }
+  .box-shadow-inset-bottom-#{$name} { box-shadow: inset 0 ($spread / 2) $spread color(dark-haze) !important; }
+  .box-shadow-inset-left-#{$name} { box-shadow: inset (-$spread / 2) 0 $spread color(dark-haze) !important; }
+  .box-shadow-inset-right-#{$name} { box-shadow: inset ($spread / 2) 0 $spread color(dark-haze) !important; }
+  .box-shadow-inset-top-#{$name} { box-shadow: inset 0 (-$spread / 2) $spread color(dark-haze) !important; }
 }
 
 // Box shadows
 // ==================================================
 @each $name, $spread in $common-box-shadows {
-  .box-shadow-#{$name} { box-shadow: 0 0 $spread 0 darker-color(dark-haze) !important; }
-  .box-shadow-bottom-#{$name} { box-shadow: 0 1px $spread 0 darker-color(dark-haze) !important; }
-  .box-shadow-left-#{$name} { box-shadow: -1px 0 $spread 0 darker-color(dark-haze) !important; }
-  .box-shadow-right-#{$name} { box-shadow: 1px 0 $spread 0 darker-color(dark-haze) !important; }
-  .box-shadow-top-#{$name} { box-shadow: 0 -1px $spread 0 darker-color(dark-haze) !important; }
+  .box-shadow-#{$name} { box-shadow: 0 0 $spread 0 color(dark-haze) !important; }
+  .box-shadow-bottom-#{$name} { box-shadow: 0 ($spread / 2) $spread 0 color(dark-haze) !important; }
+  .box-shadow-left-#{$name} { box-shadow: (-$spread / 2) 0 $spread 0 color(dark-haze) !important; }
+  .box-shadow-right-#{$name} { box-shadow: ($spread / 2) 0 $spread 0 color(dark-haze) !important; }
+  .box-shadow-top-#{$name} { box-shadow: 0 (-$spread / 2) $spread 0 color(dark-haze) !important; }
 }
 
 // Border width
@@ -154,6 +149,10 @@
 // ==================================================
 @each $name, $radius in $common-border-radiuses {
   .border-radius-#{$name} { border-radius: $radius !important; }
+  .border-radius-bottom-left-#{$name} { border-bottom-left-radius: $radius !important; }
+  .border-radius-bottom-right-#{$name} { border-bottom-right-radius: $radius !important; }
+  .border-radius-top-left-#{$name} { border-top-left-radius: $radius !important; }
+  .border-radius-top-right-#{$name} { border-top-right-radius: $radius !important; }
 }
 
 // Border colors