sass-zero 0.0.45 → 0.0.49

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

@@ -6,29 +6,25 @@ $font-family: $font-sans;
 $radius-input:  $rounded;
 $radius-button: $rounded;
 
-$color-bg--main:    $white;
-$color-bg--surface: $gray-100;
-$color-primary:     $gray-900;
-$color-txt:         $gray-900;
-$color-focus-ring:  rgba($gray-900, $opacity-50);
+:root {
+  --color-bg--main:    #{$white};
+  --color-bg--surface: #{$gray-100};
+  --color-primary:     #{$gray-900};
+  --color-text:        #{$gray-900};
+  --color-focus-ring:  #{rgba($gray-900, $opacity-50)};
 
-$image-bg-select-black:        url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none"  xmlns="http://www.w3.org/2000/svg"><path stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>');
-$image-checked-checkbox-white: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
-$image-checked-radio-white:    url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>');
+  --image-bg-select:        url('data:image/svg+xml,<svg viewBox="0 0 20 20" fill="none"  xmlns="http://www.w3.org/2000/svg"><path stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>');
+  --image-checked-checkbox: url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><path d="M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z"/></svg>');
+  --image-checked-radio:    url('data:image/svg+xml,<svg viewBox="0 0 16 16" fill="white" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>');
+}
 
 html {
-  background: $color-bg--main;
-  color: $color-txt;
+  background: var(--color-bg--main);
+  color: var(--color-text);
   font-family: $font-family;
   font-size: 16px;
 }
 
-blockquote {
-  border-color: $color-primary;
-  border-left-width: $border-4;
-  padding: $size-3 $size-4;
-}
-
 .btn {
   border-radius: $radius-button;
   border-width: $border;
@@ -37,25 +33,21 @@ blockquote {
   padding: $size-2 $size-4;
   cursor: pointer;
 
-  &:focus {
-    outline: 2px dotted $color-primary;
-    outline-offset: 2px;
-  }
-
   &:disabled {
     pointer-events: none;
     opacity: $opacity-50;
   }
 
   &--primary {
-    background-color: $color-primary;
-    border-color: $color-primary;
-    color: $color-bg--main;
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: var(--color-bg--main);
   }
 
   &--secondary {
-    background-color: $color-bg--main;
-    border-color: $color-primary;
+    background-color: var(--color-bg--main);
+    border-color: var(--color-primary);
+    color: var(--color-primary);
   }
 
   &--tertiary {
@@ -64,43 +56,17 @@ blockquote {
   }
 }
 
-code {
-  background-color: $color-bg--surface;
-  border-radius: $rounded-xl;
-  font-size: $text-sm;
-  margin: $size-0 $size-1;
-  padding: $size-1 $size-2;
-  white-space: nowrap;
-}
-
-pre {
-  background-color: $color-bg--surface;
-  border-color: $color-primary;
-  border-left-width: $border-4;
-  overflow-y: hidden;
-
-  & > code {
-    border-radius: $rounded-none;
-    display: block;
-    padding: $size-2 $size-3;
-    white-space: pre;
-  }
-}
-
-hr {
-  margin: $size-6 $size-0;
-}
-
 .input {
+  resize: none;
   appearance: none;
   background-color: $transparent;
   border-radius: $radius-input;
   border-width: $border;
   padding: $size-2 $size-3;
-  width: $size-full;
+  width: $w-full;
 
   &--select {
-    background-image: $image-bg-select-black;
+    background-image: var(--image-bg-select);
     background-position: right $size-2 center;
     background-repeat: no-repeat;
     background-size: auto $size-5;
@@ -108,41 +74,72 @@ hr {
   }
 
   &:focus {
-    box-shadow: ring($color: $color-focus-ring);
+    box-shadow: ring($color: var(--color-focus-ring));
     @include outline-none;
   }
 }
 
 .checkbox {
   border-radius: $rounded;
-  @include input-selection($color-primary);
+  @include input-selection(var(--color-primary));
 
   &:checked {
-    background-image: $image-checked-checkbox-white;
+    background-image: var(--image-checked-checkbox);
     @include checked;
   }
 
   &:focus {
-    box-shadow: ring($color: $color-focus-ring);
+    box-shadow: ring($color: var(--color-focus-ring));
     @include outline-none;
   }
 }
 
 .radio {
   border-radius: $rounded-full;
-  @include input-selection($color-primary);
+  @include input-selection(var(--color-primary));
 
   &:checked {
-    background-image: $image-checked-radio-white;
+    background-image: var(--image-checked-radio);
     @include checked;
   }
 
   &:focus {
-    box-shadow: ring($color: $color-focus-ring);
+    box-shadow: ring($color: var(--color-focus-ring));
     @include outline-none;
   }
 }
 
+blockquote {
+  border-left-width: $border-4;
+  padding: $size-3 $size-4;
+}
+
+code {
+  background-color: var(--color-bg--surface);
+  border-radius: $rounded;
+  font-size: $text-sm;
+  margin: $size-0 $size-1;
+  padding: $size-1 $size-2;
+  white-space: nowrap;
+}
+
+pre {
+  background-color: var(--color-bg--surface);
+  border-left-width: $border-4;
+  overflow-y: hidden;
+
+  & > code {
+    border-radius: $rounded-none;
+    display: block;
+    padding: $size-2 $size-3;
+    white-space: pre;
+  }
+}
+
+hr {
+  margin: $size-6 $size-0;
+}
+
 a {
   font-weight: $font-bold;
 }
@@ -176,13 +173,13 @@ blockquote, figure, p, pre, table, ul, ol, dl {
 }
 
 table {
-  width: $size-full;
+  width: $w-full;
 }
 
 td, th {
   border-bottom-width: $border;
   padding: $size-3 $size-4;
-  text-align: left;
+  text-align: inherit;
 }
 
 h1, h2, h3, h4, h5, h6, .hdg {

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

@@ -58,42 +58,6 @@
   outline-offset: 2px;
 }
 
-@mixin divider($color) {
-  position: relative;
-  z-index: $z-10;
-
-  ::before {
-    content: '';
-    position: absolute;
-    top: 50%;
-    left: $size-0;
-    right: $size-0;
-    height: $size-px;
-    background-color: $color;
-    z-index: -1;
-  }
-}
-
-@mixin space-x($space, $reverse: false) {
-  & > :not([hidden]) ~ :not([hidden]) {
-    @if $reverse {
-      margin-right: $space;
-    } @else {
-      margin-left: $space;
-    }
-  }
-}
-
-@mixin space-y($space, $reverse: false) {
-  & > :not([hidden]) ~ :not([hidden]) {
-    @if $reverse {
-      margin-bottom: $space;
-    } @else {
-      margin-top: $space;
-    }
-  }
-}
-
 @mixin make-container($padding-x: $size-4) {
   width: 100%;
   padding-right: $padding-x;

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

@@ -10,15 +10,15 @@
   flex-direction: column;
 }
 
-.flex--justify-center {
+.flex--centered {
   justify-content: center;
 }
 
-.flex--justify-between {
+.flex--space-items {
   justify-content: space-between;
 }
 
-.flex--items-center {
+.flex--align-center {
   align-items: center;
 }
 

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

@@ -14,8 +14,8 @@
   list-style: none;
 }
 
-.list--spaced {
-  @include space-y($size-2);
+.list--spaced > li + li {
+  margin-top: $size-2;
 }
 
 .list--inside-bulleted {
@@ -27,14 +27,14 @@
   border-top-width: $border;
 }
 
-.list--inline {
-  @include space-x($size-2);
-}
-
 .list--inline > li {
   display: inline-block;
 }
 
+.list--inline > li + li {
+  margin-left: $size-2;
+}
+
 .list--ruled > li {
   padding: $size-4 $size-2;
   border-top-width: $border;

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

@@ -4,12 +4,20 @@
 
 .u-position {
   position: absolute;
+}
 
-  &--right { right: 0; }
+.u-position--right {
+  right: 0;
+}
 
-  &--left { left: 0; }
+.u-position--left {
+  left: 0;
+}
 
-  &--top { top: 0; }
+.u-position--top {
+  top: 0;
+}
 
-  &--bottom { bottom: 0; }
+.u-position--bottom {
+  bottom: 0;
 }

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

@@ -18,23 +18,6 @@
   text-transform: uppercase;
 }
 
-.txt--subtle {
-  color: $color-txt--subtle;
-}
-
-.txt--subtle-reversed {
-  color: $color-txt--subtle-reversed;
-}
-
-.txt--full-contrast {
-  color: $color-txt;
-}
-
-.txt--meta {
-  font-size: $text-sm;
-  color: $color-txt--subtle;
-}
-
 .txt--nowrap {
   white-space: nowrap;
 }
@@ -63,12 +46,6 @@
   opacity: $opacity-50;
 }
 
-.txt--highlight {
-  background-color: $color-bg--highlight;
-  border-radius: $rounded-full;
-  padding: $size-0 $size-1;
-}
-
 .txt--overflow-hidden {
   overflow: hidden;
 }
@@ -138,16 +115,6 @@
   line-height: $leading-none;
 }
 
-.decorated {
-  color: $color-txt--decorated;
-  text-decoration: underline;
-}
-
-.decorated--subtle {
-  color: $color-txt--subtle;
-  text-decoration: underline;
-}
-
 .undecorated {
   color: inherit;
   text-decoration: none;

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

@@ -1,10 +1,3 @@
-$color-txt:                  #18181b;
-$color-txt--subtle:          #3f3f46;
-$color-txt--subtle-reversed: #fff;
-$color-txt--decorated:       #3b82f6;
-
-$color-bg--highlight: #f4f4f5;
-
 @import "sass-zero/utilities/align";
 @import "sass-zero/utilities/animation";
 @import "sass-zero/utilities/container";

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

@@ -19,7 +19,7 @@ $rounded-full: 9999px;
 // border-width: $border;
 // *******************************************************************
 $border-0: 0;
+$border:   1px;
 $border-2: 2px;
 $border-4: 4px;
 $border-8: 8px;
-$border:   1px;

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

@@ -3,6 +3,7 @@
 // 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;
+$current: currentColor;
 
 $black: #000;
 $white: #fff;
@@ -84,16 +85,16 @@ $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;
+$sky-50:  #f0f9ff;
+$sky-100: #e0f2fe;
+$sky-200: #bae6fd;
+$sky-300: #7dd3fc;
+$sky-400: #38bdf8;
+$sky-500: #0ea5e9;
+$sky-600: #0284c7;
+$sky-700: #0369a1;
+$sky-800: #075985;
+$sky-900: #0c4a6e;
 
 $cyan-50:  #ecfeff;
 $cyan-100: #cffafe;

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

@@ -0,0 +1,48 @@
+// *******************************************************************
+// Height
+// Variables for setting the height of an element
+// height: $h-1-2;
+// *******************************************************************
+$h-1-2:    50%;
+$h-1-3:    33.333333%;
+$h-2-3:    66.666667%;
+$h-1-4:    25%;
+$h-2-4:    50%;
+$h-3-4:    75%;
+$h-1-5:    20%;
+$h-2-5:    40%;
+$h-3-5:    60%;
+$h-4-5:    80%;
+$h-1-6:    16.666667%;
+$h-2-6:    33.333333%;
+$h-3-6:    50%;
+$h-4-6:    66.666667%;
+$h-5-6:    83.333333%;
+$h-full:   100%;
+$h-screen: 100vw;
+$h-min:    min-content;
+$h-max:    max-content;
+$h-fit:    fit-content;
+
+// *******************************************************************
+// Min-Height
+// Variables for setting the minimum height of an element
+// min-height: $min-h-0;
+// *******************************************************************
+$min-h-0:      0px;
+$min-h-full:   100%;
+$min-h-screen: 100vh;
+$min-h-min:    min-content;
+$min-h-max:    max-content;
+$min-h-fit:    fit-content;
+
+// *******************************************************************
+// Max-Height
+// Variables for setting the maximum height of an element
+// max-height: $max-h-full;
+// *******************************************************************
+$max-h-full:   100%;
+$max-h-screen: 100vh;
+$max-h-min:    min-content;
+$max-h-max:    max-content;
+$max-h-fit:    fit-content;

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

@@ -1,44 +1,44 @@
 // *******************************************************************
 // Default spacing scale
 // By default, Tailwind includes a generous and comprehensive numeric spacing scale.
-// Use as padding, margin, width, height, transform
+// Use as padding, margin, width, height, translate, etc...
 // *******************************************************************
-$size-px: 1px;
-$size-0:  0px;
-$size-1:  0.25rem;
-$size-2:  0.5rem;
-$size-3:  0.75rem;
-$size-4:  1rem;
-$size-5:  1.25rem;
-$size-6:  1.5rem;
-$size-7:  1.75rem;
-$size-8:  2rem;
-$size-9:  2.25rem;
-$size-10: 2.5rem;
-$size-11: 2.75rem;
-$size-12: 3rem;
-$size-14: 3.5rem;
-$size-16: 4rem;
-$size-20: 5rem;
-$size-24: 6rem;
-$size-28: 7rem;
-$size-32: 8rem;
-$size-36: 9rem;
-$size-40: 10rem;
-$size-44: 11rem;
-$size-48: 12rem;
-$size-52: 13rem;
-$size-56: 14rem;
-$size-60: 15rem;
-$size-64: 16rem;
-$size-72: 18rem;
-$size-80: 20rem;
-$size-96: 24rem;
+$size-auto: auto;
 
-$size-auto:   auto;
-$size-full:   100%;
-$size-screen: 100vw;
-$size-min:    min-content;
-$size-max:    max-content;
+$size-px:  1px;
+$size-0:   0px;
+$size-0-5: 0.125rem;
+$size-1:   0.25rem;
+$size-1-5: 0.375rem;
+$size-2:   0.5rem;
+$size-2-5: 0.625rem;
+$size-3:   0.75rem;
+$size-3-5: 0.875rem;
+$size-4:   1rem;
+$size-5:   1.25rem;
+$size-6:   1.5rem;
+$size-7:   1.75rem;
+$size-8:   2rem;
+$size-9:   2.25rem;
+$size-10:  2.5rem;
+$size-11:  2.75rem;
+$size-12:  3rem;
+$size-14:  3.5rem;
+$size-16:  4rem;
+$size-20:  5rem;
+$size-24:  6rem;
+$size-28:  7rem;
+$size-32:  8rem;
+$size-36:  9rem;
+$size-40:  10rem;
+$size-44:  11rem;
+$size-48:  12rem;
+$size-52:  13rem;
+$size-56:  14rem;
+$size-60:  15rem;
+$size-64:  16rem;
+$size-72:  18rem;
+$size-80:  20rem;
+$size-96:  24rem;
 
 $size-map: ("xs": $size-1, "sm": $size-2, "md": $size-4, "lg": $size-6, "xl": $size-8, "2xl": $size-10, "3xl": $size-12);

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

@@ -29,6 +29,19 @@ $rotate-45:  45deg;
 $rotate-90:  90deg;
 $rotate-180: 180deg;
 
+// *******************************************************************
+// Translate
+// Variables for translating elements with transform.
+// transform: translate($translate-1-2);
+// *******************************************************************
+$translate-1-2:  50%;
+$translate-1-3:  33.333333%;
+$translate-2-3:  66.666667%;
+$translate-1-4:  25%;
+$translate-2-4:  50%;
+$translate-3-4:  75%;
+$translate-full: 100%;
+
 // *******************************************************************
 // Skew
 // Variables for skewing elements with transform.

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

@@ -3,32 +3,37 @@
 // Variables for setting the width of an element
 // width: $w-1-2;
 // *******************************************************************
-$w-1-2:   50%;
-$w-1-3:   33.333333%;
-$w-2-3:   66.666667%;
-$w-1-4:   25%;
-$w-2-4:   50%;
-$w-3-4:   75%;
-$w-1-5:   20%;
-$w-2-5:   40%;
-$w-3-5:   60%;
-$w-4-5:   80%;
-$w-1-6:   16.666667%;
-$w-2-6:   33.333333%;
-$w-3-6:   50%;
-$w-4-6:   66.666667%;
-$w-5-6:   83.333333%;
-$w-1-12:  8.333333%;
-$w-2-12:  16.666667%;
-$w-3-12:  25%;
-$w-4-12:  33.333333%;
-$w-5-12:  41.666667%;
-$w-6-12:  50%;
-$w-7-12:  58.333333%;
-$w-8-12:  66.666667%;
-$w-9-12:  75%;
-$w-10-12: 83.333333%;
-$w-11-12: 91.666667%;
+$w-1-2:    50%;
+$w-1-3:    33.333333%;
+$w-2-3:    66.666667%;
+$w-1-4:    25%;
+$w-2-4:    50%;
+$w-3-4:    75%;
+$w-1-5:    20%;
+$w-2-5:    40%;
+$w-3-5:    60%;
+$w-4-5:    80%;
+$w-1-6:    16.666667%;
+$w-2-6:    33.333333%;
+$w-3-6:    50%;
+$w-4-6:    66.666667%;
+$w-5-6:    83.333333%;
+$w-1-12:   8.333333%;
+$w-2-12:   16.666667%;
+$w-3-12:   25%;
+$w-4-12:   33.333333%;
+$w-5-12:   41.666667%;
+$w-6-12:   50%;
+$w-7-12:   58.333333%;
+$w-8-12:   66.666667%;
+$w-9-12:   75%;
+$w-10-12:  83.333333%;
+$w-11-12:  91.666667%;
+$w-full:   100%;
+$w-screen: 100vw;
+$w-min:    min-content;
+$w-max:    max-content;
+$w-fit:    fit-content;
 
 // *******************************************************************
 // Min-Width
@@ -39,6 +44,7 @@ $min-w-0:    0px;
 $min-w-full: 100%;
 $min-w-min:  min-content;
 $min-w-max:  max-content;
+$min-w-fit:  fit-content;
 
 // *******************************************************************
 // Max-Width
@@ -61,20 +67,4 @@ $max-w-7xl:  80rem;
 $max-w-full: 100%;
 $max-w-min:  min-content;
 $max-w-max:  max-content;
-
-// *******************************************************************
-// Min-Height
-// Variables for setting the minimum height of an element
-// min-height: $min-h-0;
-// *******************************************************************
-$min-h-0:      0px;
-$min-h-full:   100%;
-$min-h-screen: 100vh;
-
-// *******************************************************************
-// Max-Height
-// Variables for setting the maximum height of an element
-// max-height: $max-h-full;
-// *******************************************************************
-$max-h-full:   100%;
-$max-h-screen: 100vh;
+$max-w-fit:  fit-content;

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

@@ -9,4 +9,5 @@
 @import "variables/transform";
 @import "variables/typography";
 @import "variables/width";
+@import "variables/height";
 @import "variables/zindex";