sass-zero 0.0.41 → 0.0.42

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

@@ -7,123 +7,244 @@ $transparent: transparent;
 $black: #000;
 $white: #fff;
 
-$gray-50:  #f9fafb;
-$gray-100: #f4f5f7;
-$gray-200: #e5e7eb;
-$gray-300: #d2d6dc;
-$gray-400: #9fa6b2;
-$gray-500: #6b7280;
-$gray-600: #4b5563;
-$gray-700: #374151;
-$gray-800: #252f3f;
-$gray-900: #161e2e;
-
-$cool-gray-50:  #fbfdfe;
-$cool-gray-100: #f1f5f9;
-$cool-gray-200: #e2e8f0;
-$cool-gray-300: #cfd8e3;
-$cool-gray-400: #97a6ba;
-$cool-gray-500: #64748b;
-$cool-gray-600: #475569;
-$cool-gray-700: #364152;
-$cool-gray-800: #27303f;
-$cool-gray-900: #1a202e;
-
-$red-50:  #fdf2f2;
-$red-100: #fde8e8;
-$red-200: #fbd5d5;
-$red-300: #f8b4b4;
-$red-400: #f98080;
-$red-500: #f05252;
-$red-600: #e02424;
-$red-700: #c81e1e;
-$red-800: #9b1c1c;
-$red-900: #771d1d;
-
-$orange-50:  #fff8f1;
-$orange-100: #feecdc;
-$orange-200: #fcd9bd;
-$orange-300: #fdba8c;
-$orange-400: #ff8a4c;
-$orange-500: #ff5a1f;
-$orange-600: #d03801;
-$orange-700: #b43403;
-$orange-800: #8a2c0d;
-$orange-900: #771d1d;
-
-$yellow-50:  #fdfdea;
-$yellow-100: #fdf6b2;
-$yellow-200: #fce96a;
-$yellow-300: #faca15;
-$yellow-400: #e3a008;
-$yellow-500: #c27803;
-$yellow-600: #9f580a;
-$yellow-700: #8e4b10;
-$yellow-800: #723b13;
-$yellow-900: #633112;
-
-$green-50:  #f3faf7;
-$green-100: #def7ec;
-$green-200: #bcf0da;
-$green-300: #84e1bc;
-$green-400: #31c48d;
-$green-500: #0e9f6e;
-$green-600: #057a55;
-$green-700: #046c4e;
-$green-800: #03543f;
-$green-900: #014737;
-
-$teal-50:  #edfafa;
-$teal-100: #d5f5f6;
-$teal-200: #afecef;
-$teal-300: #7edce2;
-$teal-400: #16bdca;
-$teal-500: #0694a2;
-$teal-600: #047481;
-$teal-700: #036672;
-$teal-800: #05505c;
-$teal-900: #014451;
-
-$blue-50:  #ebf5ff;
-$blue-100: #e1effe;
-$blue-200: #c3ddfd;
-$blue-300: #a4cafe;
-$blue-400: #76a9fa;
-$blue-500: #3f83f8;
-$blue-600: #1c64f2;
-$blue-700: #1a56db;
-$blue-800: #1e429f;
-$blue-900: #233876;
-
-$indigo-50:  #f0f5ff;
-$indigo-100: #e5edff;
-$indigo-200: #cddbfe;
-$indigo-300: #b4c6fc;
-$indigo-400: #8da2fb;
-$indigo-500: #6875f5;
-$indigo-600: #5850ec;
-$indigo-700: #5145cd;
-$indigo-800: #42389d;
-$indigo-900: #362f78;
-
-$purple-50:  #f6f5ff;
-$purple-100: #edebfe;
-$purple-200: #dcd7fe;
-$purple-300: #cabffd;
-$purple-400: #ac94fa;
-$purple-500: #9061f9;
-$purple-600: #7e3af2;
-$purple-700: #6c2bd9;
-$purple-800: #5521b5;
-$purple-900: #4a1d96;
+$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: #fce8f3;
-$pink-200: #fad1e8;
-$pink-300: #f8b4d9;
-$pink-400: #f17eb8;
-$pink-500: #e74694;
-$pink-600: #d61f69;
-$pink-700: #bf125d;
-$pink-800: #99154b;
-$pink-900: #751a3d;
+$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;

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

@@ -3,7 +3,6 @@
 // Variables for controlling the box shadow of an element.
 // box-shadow: $shadow;
 // *******************************************************************
-$shadow-xs:      0 0 0 1px rgba(0, 0, 0, 0.05);
 $shadow-sm:      0 1px 2px 0 rgba(0, 0, 0, 0.05);
 $shadow:         0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
 $shadow-md:      0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
@@ -11,8 +10,6 @@ $shadow-lg:      0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0,
 $shadow-xl:      0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
 $shadow-2xl:     0 25px 50px -12px rgba(0, 0, 0, 0.25);
 $shadow-inner:   inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-$shadow-outline: 0 0 0 3px rgba(164, 202, 254, .45);
-$shadow-solid:   0 0 0 2px currentColor;
 $shadow-none:    none;
 
 // *******************************************************************
@@ -21,7 +18,36 @@ $shadow-none:    none;
 // opacity: $opacity-25;
 // *******************************************************************
 $opacity-0:   0;
+$opacity-5:   0.05;
+$opacity-10:  0.1;
+$opacity-20:  0.2;
 $opacity-25:  0.25;
-$opacity-50:  0.50;
+$opacity-30:  0.3;
+$opacity-40:  0.4;
+$opacity-50:  0.5;
+$opacity-60:  0.6;
+$opacity-70:  0.7;
 $opacity-75:  0.75;
+$opacity-80:  0.8;
+$opacity-90:  0.9;
+$opacity-95:  0.95;
 $opacity-100: 1;
+
+// *******************************************************************
+// Ring
+// Utilities for creating outline rings with box-shadows.
+// box-shadow: ring($width: 4px);
+// *******************************************************************
+@function ring($width: 3px, $color: $blue-500, $offset-width: 0px, $offset-color: $white, $opacity: 0.5, $inset: false)  {
+  $ring-color: rgba($color, $opacity);
+
+  @if $inset {
+    $ring-offset-shadow: inset 0 0 0 $offset-width $offset-color;
+    $ring-shadow: inset 0 0 0 ($width + $offset-width) $ring-color;
+    @return $ring-offset-shadow, $ring-shadow, 0 0 #0000;
+  } @else {
+    $ring-offset-shadow: 0 0 0 $offset-width $offset-color;
+    $ring-shadow: 0 0 0 ($width + $offset-width) $ring-color;
+    @return $ring-offset-shadow, $ring-shadow, 0 0 #0000;
+  }
+}