sass-zero 0.0.37 → 0.0.42

data/app/assets/stylesheets/sass-zero/utilities/layout.scss

@@ -1,10 +1,20 @@
 @import "sass-zero/variables/breakpoints";
+@import "sass-zero/variables/effects";
 @import "sass-zero/mixins";
 
 .u-full-width {
   width: 100%;
 }
 
+.u-min-width {
+  min-width: 0;
+}
+
+.u-disabled {
+  pointer-events: none;
+  opacity: $opacity-50;
+}
+
 .u-unscrollable {
   overflow: hidden;
 }
@@ -27,7 +37,7 @@
 
 .u-centered {
   margin-right: auto;
-  margin-left: auto;
+  margin-left:  auto;
 }
 
 .u-clearfix {

data/app/assets/stylesheets/sass-zero/utilities/list.scss

@@ -1,15 +1,31 @@
 @import "sass-zero/variables/spacing";
+@import "sass-zero/variables/colors";
+@import "sass-zero/mixins";
 
 .list--unindented {
   padding-left: $size-8;
 }
 
 .list--unbulleted {
- list-style: none;
+  list-style: none;
 }
 
-.list--inline li {
-  margin-bottom: $size-0;
-  margin-right:  $size-2;
+.list--spaced {
+  @include space-y($size-2);
+}
+
+.list--boxed {
+  background-color: $gray-200;
+  padding: $size-4;
+  border-radius: $rounded;
+}
+
+.list--ruled > li {
+  padding: $size-3 $size-4;
+  border-top-width: $border;
+}
+
+.list--inline > li {
+  margin-right: $size-2;
   display: inline-block;
 }

data/app/assets/stylesheets/sass-zero/utilities/text.scss

@@ -1,35 +1,72 @@
 @import "sass-zero/variables/typography";
 @import "sass-zero/variables/spacing";
-@import "sass-zero/variables/border";
 @import "sass-zero/variables/colors";
+@import "sass-zero/variables/border";
 @import "sass-zero/mixins";
 
 .txt--xs {
   font-size: $text-xs;
+  line-height: $leading-4;
 }
 
 .txt--sm {
   font-size: $text-sm;
+  line-height: $leading-5;
 }
 
 .txt--md {
   font-size: $text-base;
+  line-height: $leading-6;
 }
 
 .txt--lg {
   font-size: $text-lg;
+  line-height: $leading-7;
 }
 
 .txt--xl {
   font-size: $text-xl;
+  line-height: $leading-7;
 }
 
 .txt--2xl {
   font-size: $text-2xl;
+  line-height: $leading-8;
 }
 
 .txt--3xl {
   font-size: $text-3xl;
+  line-height: $leading-9;
+}
+
+.txt--4xl {
+  font-size: $text-4xl;
+  line-height: $leading-10;
+}
+
+.txt--5xl {
+  font-size: $text-5xl;
+  line-height: $leading-4;
+}
+
+.txt--6xl {
+  font-size: $text-6xl;
+  line-height: $leading-4;
+}
+
+.txt--7xl {
+  font-size: $text-7xl;
+  line-height: $leading-4;
+}
+
+.txt--8xl {
+  font-size: $text-8xl;
+  line-height: $leading-4;
+}
+
+.txt--9xl {
+  font-size: $text-9xl;
+  line-height: $leading-4;
 }
 
 .txt--nowrap {
@@ -40,6 +77,10 @@
   word-wrap: break-word;
 }
 
+.txt--break-words-alt {
+  word-break: break-word;
+}
+
 .txt--break-all {
   word-break: break-all;
 }
@@ -49,7 +90,7 @@
 }
 
 .txt--normal {
-  font-weight: $font-normal;
+  font-weight: $font-normal !important;
 }
 
 .txt--bold {
@@ -72,6 +113,12 @@
   text-transform: uppercase;
 }
 
+.txt--highlight {
+  background-color: $gray-200;
+  border-radius: $rounded-full;
+  padding: $size-0 $size-1;
+}
+
 .align--top {
   vertical-align: top;
 }
@@ -95,3 +142,13 @@
 .align--right {
   text-align: right;
 }
+
+.decorated {
+  color: $blue-500;
+  text-decoration: underline;
+}
+
+.decorated--subtle {
+  color: $gray-700;
+  text-decoration: underline;
+}

data/app/assets/stylesheets/sass-zero/variables.scss

@@ -3,6 +3,7 @@
 @import "variables/colors";
 @import "variables/effects";
 @import "variables/flex";
+@import "variables/grid";
 @import "variables/spacing";
 @import "variables/transition";
 @import "variables/transform";

data/app/assets/stylesheets/sass-zero/variables/border.scss

@@ -8,6 +8,9 @@ $rounded-sm:   0.125rem;
 $rounded:      0.25rem;
 $rounded-md:   0.375rem;
 $rounded-lg:   0.5rem;
+$rounded-xl:   0.75rem;
+$rounded-2xl:  1rem;
+$rounded-3xl:  1.5rem;
 $rounded-full: 9999px;
 
 // *******************************************************************
@@ -15,8 +18,8 @@ $rounded-full: 9999px;
 // Utilities for controlling the width of an element's borders.
 // border-width: $border;
 // *******************************************************************
-$border:   1px;
 $border-0: 0;
 $border-2: 2px;
 $border-4: 4px;
 $border-8: 8px;
+$border:   1px;

data/app/assets/stylesheets/sass-zero/variables/breakpoints.scss

@@ -3,7 +3,8 @@
 // Customizing the default breakpoints for your project.
 // @media (min-width: $breakpoint-md) {   }
 // *******************************************************************
-$breakpoint-sm: 640px;
-$breakpoint-md: 768px;
-$breakpoint-lg: 1024px;
-$breakpoint-xl: 1280px;
+$breakpoint-sm:  640px;
+$breakpoint-md:  768px;
+$breakpoint-lg:  1024px;
+$breakpoint-xl:  1280px;
+$breakpoint-2xl: 1536px;

data/app/assets/stylesheets/sass-zero/variables/colors.scss

@@ -2,107 +2,249 @@
 // Default color palette
 // sass-zero includes a generous palette of great-looking, well-balanced colors that are perfect for prototyping or for kicking off a brand new project.
 // *******************************************************************
-$transparent: 'transparent';
+$transparent: transparent;
 
 $black: #000;
 $white: #fff;
 
-$gray-100: #f7fafc !default;
-$gray-200: #edf2f7 !default;
-$gray-300: #e2e8f0 !default;
-$gray-400: #cbd5e0 !default;
-$gray-500: #a0aec0 !default;
-$gray-600: #718096 !default;
-$gray-700: #4a5568 !default;
-$gray-800: #2d3748 !default;
-$gray-900: #1a202c !default;
-
-$red-100: #fff5f5;
-$red-200: #fed7d7;
-$red-300: #feb2b2;
-$red-400: #fc8181;
-$red-500: #f56565;
-$red-600: #e53e3e;
-$red-700: #c53030;
-$red-800: #9b2c2c;
-$red-900: #742a2a;
-
-$orange-100: #fffaf0;
-$orange-200: #feebc8;
-$orange-300: #fbd38d;
-$orange-400: #f6ad55;
-$orange-500: #ed8936;
-$orange-600: #dd6b20;
-$orange-700: #c05621;
-$orange-800: #9c4221;
-$orange-900: #7b341e;
-
-$yellow-100: #fffff0;
-$yellow-200: #fefcbf;
-$yellow-300: #faf089;
-$yellow-400: #f6e05e;
-$yellow-500: #ecc94b;
-$yellow-600: #d69e2e;
-$yellow-700: #b7791f;
-$yellow-800: #975a16;
-$yellow-900: #744210;
-
-$green-100: #f0fff4;
-$green-200: #c6f6d5;
-$green-300: #9ae6b4;
-$green-400: #68d391;
-$green-500: #48bb78;
-$green-600: #38a169;
-$green-700: #2f855a;
-$green-800: #276749;
-$green-900: #22543d;
-
-$teal-100: #e6fffa;
-$teal-200: #b2f5ea;
-$teal-300: #81e6d9;
-$teal-400: #4fd1c5;
-$teal-500: #38b2ac;
-$teal-600: #319795;
-$teal-700: #2c7a7b;
-$teal-800: #285e61;
-$teal-900: #234e52;
-
-$blue-100: #ebf8ff;
-$blue-200: #bee3f8;
-$blue-300: #90cdf4;
-$blue-400: #63b3ed;
-$blue-500: #4299e1;
-$blue-600: #3182ce;
-$blue-700: #2b6cb0;
-$blue-800: #2c5282;
-$blue-900: #2a4365;
-
-$indigo-100: #ebf4ff;
-$indigo-200: #c3dafe;
-$indigo-300: #a3bffa;
-$indigo-400: #7f9cf5;
-$indigo-500: #667eea;
-$indigo-600: #5a67d8;
-$indigo-700: #4c51bf;
-$indigo-800: #434190;
-$indigo-900: #3c366b;
-
-$purple-100: #faf5ff;
-$purple-200: #e9d8fd;
-$purple-300: #d6bcfa;
-$purple-400: #b794f4;
-$purple-500: #9f7aea;
-$purple-600: #805ad5;
-$purple-700: #6b46c1;
-$purple-800: #553c9a;
-$purple-900: #44337a;
-
-$pink-100: #fff5f7;
-$pink-200: #fed7e2;
-$pink-300: #fbb6ce;
-$pink-400: #f687b3;
-$pink-500: #ed64a6;
-$pink-600: #d53f8c;
-$pink-700: #b83280;
-$pink-800: #97266d;
-$pink-900: #702459;
+$rose-50:  #fff1f2;
+$rose-100: #ffe4e6;
+$rose-200: #fecdd3;
+$rose-300: #fda4af;
+$rose-400: #fb7185;
+$rose-500: #f43f5e;
+$rose-600: #e11d48;
+$rose-700: #be123c;
+$rose-800: #9f1239;
+$rose-900: #881337;
+
+$pink-50:  #fdf2f8;
+$pink-100: #fce7f3;
+$pink-200: #fbcfe8;
+$pink-300: #f9a8d4;
+$pink-400: #f472b6;
+$pink-500: #ec4899;
+$pink-600: #db2777;
+$pink-700: #be185d;
+$pink-800: #9d174d;
+$pink-900: #831843;
+
+$fuchsia-50:  #fdf4ff;
+$fuchsia-100: #fae8ff;
+$fuchsia-200: #f5d0fe;
+$fuchsia-300: #f0abfc;
+$fuchsia-400: #e879f9;
+$fuchsia-500: #d946ef;
+$fuchsia-600: #c026d3;
+$fuchsia-700: #a21caf;
+$fuchsia-800: #86198f;
+$fuchsia-900: #701a75;
+
+$purple-50:  #faf5ff;
+$purple-100: #f3e8ff;
+$purple-200: #e9d5ff;
+$purple-300: #d8b4fe;
+$purple-400: #c084fc;
+$purple-500: #a855f7;
+$purple-600: #9333ea;
+$purple-700: #7e22ce;
+$purple-800: #6b21a8;
+$purple-900: #581c87;
+
+$violet-50:  #f5f3ff;
+$violet-100: #ede9fe;
+$violet-200: #ddd6fe;
+$violet-300: #c4b5fd;
+$violet-400: #a78bfa;
+$violet-500: #8b5cf6;
+$violet-600: #7c3aed;
+$violet-700: #6d28d9;
+$violet-800: #5b21b6;
+$violet-900: #4c1d95;
+
+$indigo-50:  #eef2ff;
+$indigo-100: #e0e7ff;
+$indigo-200: #c7d2fe;
+$indigo-300: #a5b4fc;
+$indigo-400: #818cf8;
+$indigo-500: #6366f1;
+$indigo-600: #4f46e5;
+$indigo-700: #4338ca;
+$indigo-800: #3730a3;
+$indigo-900: #312e81;
+
+$blue-50:  #eff6ff;
+$blue-100: #dbeafe;
+$blue-200: #bfdbfe;
+$blue-300: #93c5fd;
+$blue-400: #60a5fa;
+$blue-500: #3b82f6;
+$blue-600: #2563eb;
+$blue-700: #1d4ed8;
+$blue-800: #1e40af;
+$blue-900: #1e3a8a;
+
+$light-blue-50:  #f0f9ff;
+$light-blue-100: #e0f2fe;
+$light-blue-200: #bae6fd;
+$light-blue-300: #7dd3fc;
+$light-blue-400: #38bdf8;
+$light-blue-500: #0ea5e9;
+$light-blue-600: #0284c7;
+$light-blue-700: #0369a1;
+$light-blue-800: #075985;
+$light-blue-900: #0c4a6e;
+
+$cyan-50:  #ecfeff;
+$cyan-100: #cffafe;
+$cyan-200: #a5f3fc;
+$cyan-300: #67e8f9;
+$cyan-400: #22d3ee;
+$cyan-500: #06b6d4;
+$cyan-600: #0891b2;
+$cyan-700: #0e7490;
+$cyan-800: #155e75;
+$cyan-900: #164e63;
+
+$teal-50:  #f0fdfa;
+$teal-100: #ccfbf1;
+$teal-200: #99f6e4;
+$teal-300: #5eead4;
+$teal-400: #2dd4bf;
+$teal-500: #14b8a6;
+$teal-600: #0d9488;
+$teal-700: #0f766e;
+$teal-800: #115e59;
+$teal-900: #134e4a;
+
+$emerald-50:  #ecfdf5;
+$emerald-100: #d1fae5;
+$emerald-200: #a7f3d0;
+$emerald-300: #6ee7b7;
+$emerald-400: #34d399;
+$emerald-500: #10b981;
+$emerald-600: #059669;
+$emerald-700: #047857;
+$emerald-800: #065f46;
+$emerald-900: #064e3b;
+
+$green-50:  #f0fdf4;
+$green-100: #dcfce7;
+$green-200: #bbf7d0;
+$green-300: #86efac;
+$green-400: #4ade80;
+$green-500: #22c55e;
+$green-600: #16a34a;
+$green-700: #15803d;
+$green-800: #166534;
+$green-900: #14532d;
+
+$lime-50:  #f7fee7;
+$lime-100: #ecfccb;
+$lime-200: #d9f99d;
+$lime-300: #bef264;
+$lime-400: #a3e635;
+$lime-500: #84cc16;
+$lime-600: #65a30d;
+$lime-700: #4d7c0f;
+$lime-800: #3f6212;
+$lime-900: #365314;
+
+$yellow-50:  #fefce8;
+$yellow-100: #fef9c3;
+$yellow-200: #fef08a;
+$yellow-300: #fde047;
+$yellow-400: #facc15;
+$yellow-500: #eab308;
+$yellow-600: #ca8a04;
+$yellow-700: #a16207;
+$yellow-800: #854d0e;
+$yellow-900: #713f12;
+
+$amber-50:  #fffbeb;
+$amber-100: #fef3c7;
+$amber-200: #fde68a;
+$amber-300: #fcd34d;
+$amber-400: #fbbf24;
+$amber-500: #f59e0b;
+$amber-600: #d97706;
+$amber-700: #b45309;
+$amber-800: #92400e;
+$amber-900: #78350f;
+
+$orange-50:  #fff7ed;
+$orange-100: #ffedd5;
+$orange-200: #fed7aa;
+$orange-300: #fdba74;
+$orange-400: #fb923c;
+$orange-500: #f97316;
+$orange-600: #ea580c;
+$orange-700: #c2410c;
+$orange-800: #9a3412;
+$orange-900: #7c2d12;
+
+$red-50:  #fef2f2;
+$red-100: #fee2e2;
+$red-200: #fecaca;
+$red-300: #fca5a5;
+$red-400: #f87171;
+$red-500: #ef4444;
+$red-600: #dc2626;
+$red-700: #b91c1c;
+$red-800: #991b1b;
+$red-900: #7f1d1d;
+
+$warm-gray-50:  #fafaf9;
+$warm-gray-100: #f5f5f4;
+$warm-gray-200: #e7e5e4;
+$warm-gray-300: #d6d3d1;
+$warm-gray-400: #a8a29e;
+$warm-gray-500: #78716c;
+$warm-gray-600: #57534e;
+$warm-gray-700: #44403c;
+$warm-gray-800: #292524;
+$warm-gray-900: #1c1917;
+
+$true-gray-50:  #fafafa;
+$true-gray-100: #f5f5f5;
+$true-gray-200: #e5e5e5;
+$true-gray-300: #d4d4d4;
+$true-gray-400: #a3a3a3;
+$true-gray-500: #737373;
+$true-gray-600: #525252;
+$true-gray-700: #404040;
+$true-gray-800: #262626;
+$true-gray-900: #171717;
+
+$gray-50:  #fafafa;
+$gray-100: #f4f4f5;
+$gray-200: #e4e4e7;
+$gray-300: #d4d4d8;
+$gray-400: #a1a1aa;
+$gray-500: #71717a;
+$gray-600: #52525b;
+$gray-700: #3f3f46;
+$gray-800: #27272a;
+$gray-900: #18181b;
+
+$cool-gray-50:  #f9fafb;
+$cool-gray-100: #f3f4f6;
+$cool-gray-200: #e5e7eb;
+$cool-gray-300: #d1d5db;
+$cool-gray-400: #9ca3af;
+$cool-gray-500: #6b7280;
+$cool-gray-600: #4b5563;
+$cool-gray-700: #374151;
+$cool-gray-800: #1f2937;
+$cool-gray-900: #111827;
+
+$blue-gray-50:  #f8fafc;
+$blue-gray-100: #f1f5f9;
+$blue-gray-200: #e2e8f0;
+$blue-gray-300: #cbd5e1;
+$blue-gray-400: #94a3b8;
+$blue-gray-500: #64748b;
+$blue-gray-600: #475569;
+$blue-gray-700: #334155;
+$blue-gray-800: #1e293b;
+$blue-gray-900: #0f172a;