sass-zero 1.3.2 → 1.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 52757fc96f9e5a53855b56448f7e018de29ca3140d03e6b71640fdebd13c1de3
-  data.tar.gz: 9fb81ca3d6590f4941ca2c66fa458801f74e45d275ebab376dd02e1ecf803ce6
+  metadata.gz: a175d1a2408d702e6bf7dc1b075cce2a81f1ae0b8b4be8a3ddf4563c272b20f0
+  data.tar.gz: bad039ba7b8b64b9b8c40b68dfd18b473ca1fee827d28b80fc6549d619020dbb
 SHA512:
-  metadata.gz: a3d6a8a06e5fce7a0c94e2d04bb254ef23ca6efec6021276a260e665c5130af140452d28e3f1eff0a2b4430c849a3e98cc843b46e34210352a9817054a00e283
-  data.tar.gz: 9cac737a7dd2d6888cec6099c3d4c78ff8c1d410206e8c5fd6b2a1899bd315401effda9edaa250e44066793c88dfeb494597cc7049cfdbdd70cb0c597774bd6a
+  metadata.gz: 24b3df06ab1792a9eedc84a859316c2856c84f6a79a62597870027153c826fa8febbe99b6dd13b5281a79ae1c64bda9686e0e64d2d61b301f03175ff6fc840a7
+  data.tar.gz: 3fcdd63c8c919d533f9b68c579a2b6b257b489a5c12603bb7323b63fc24b6cd3cbab73bd5213729057fb4b2afd59949f141be7af2aa6b989cc5fab3e828c2df9

data/.sass-zero-references.scss

@@ -725,11 +725,6 @@ $z-50:   50;
 @mixin antialiased {}
 @mixin subpixel-antialiased {}
 @mixin progress-bar {}
-
-// *******************************************************************
-// Animations
-// *******************************************************************
-
 @mixin animate-spin {}
 @mixin animate-ping {}
 @mixin animate-pulse {}

data/Gemfile.lock

@@ -1,7 +1,7 @@
 PATH
   remote: .
   specs:
-    sass-zero (1.3.2)
+    sass-zero (1.4.0)
 
 GEM
   remote: https://rubygems.org/

data/README.md

@@ -16,6 +16,7 @@ Add these lines to your application.css:
 ```css
 *= require sass-zero/base
 *= require sass-zero/utilities
+*= require sass-zero/keyframes
 *= require sass-zero/breadboard
 ```
 
@@ -25,22 +26,22 @@ Instead of hand-picking values from a limitless pool any time you need to make a
 
 #### Essential
 
-- [Border](app/assets/stylesheets/sass-zero/variables/_border.scss)
+- [Sizing](app/assets/stylesheets/sass-zero/variables/_sizing.scss)
 - [Colors](app/assets/stylesheets/sass-zero/variables/_colors.scss)
-- [Effects](app/assets/stylesheets/sass-zero/variables/_effects.scss)
+- [Width](app/assets/stylesheets/sass-zero/variables/_width.scss)
 - [Height](app/assets/stylesheets/sass-zero/variables/_height.scss)
-- [Sizing](app/assets/stylesheets/sass-zero/variables/_sizing.scss)
+- [Border](app/assets/stylesheets/sass-zero/variables/_border.scss)
+- [Effects](app/assets/stylesheets/sass-zero/variables/_effects.scss)
 - [Typography](app/assets/stylesheets/sass-zero/variables/_typography.scss)
-- [Width](app/assets/stylesheets/sass-zero/variables/_width.scss)
 - [Z-Index](app/assets/stylesheets/sass-zero/variables/_zindex.scss)
 
 #### Others
 
 - [Breakpoints](app/assets/stylesheets/sass-zero/variables/_breakpoints.scss)
 - [Filters](app/assets/stylesheets/sass-zero/variables/_filters.scss)
-- [Flex](app/assets/stylesheets/sass-zero/variables/_flex.scss)
-- [Grid](app/assets/stylesheets/sass-zero/variables/_grid.scss)
 - [Transform](app/assets/stylesheets/sass-zero/variables/_transform.scss)
+- [Grid](app/assets/stylesheets/sass-zero/variables/_grid.scss)
+- [Flex](app/assets/stylesheets/sass-zero/variables/_flex.scss)
 - [Transition](app/assets/stylesheets/sass-zero/variables/_transition.scss)
 - [Mixins](app/assets/stylesheets/sass-zero/_mixins.scss)
 

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

@@ -1,16 +1,12 @@
 @import "variables/sizing";
-@import "animations";
 
 // *******************************************************************
 // General
 // *******************************************************************
 
-@mixin make-container($padding-x: $size-4) {
-  width: 100%;
-  padding-right: $padding-x;
-  padding-left: $padding-x;
-  margin-right: auto;
-  margin-left: auto;
+@mixin make-container($padding: $size-4) {
+  width: 100%; margin: 0 auto;
+  padding: $padding;
 }
 
 @mixin ellipsis {
@@ -29,16 +25,6 @@
   -moz-osx-font-smoothing: auto;
 }
 
-@mixin progress-bar {
-  ::-webkit-progress-value {
-    @content;
-  }
-
-  ::-moz-progress-bar {
-    @content;
-  }
-}
-
 // *******************************************************************
 // Animations
 // *******************************************************************

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

@@ -30,18 +30,23 @@ $radius-secondary: $rounded;
   border-color: var(--color-border);
 }
 
-html {
+body {
   accent-color: var(--color-primary);
   background: var(--color-bg--main);
   color: var(--color-text);
   font-family: $font-family;
 }
 
+@media (max-width: $breakpoint-md - 1) {
+  body { font-size: $text-sm; }
+}
+
 .btn {
   border-radius: $radius-primary;
   border-width: $border;
   display: inline-block;
-  padding: $size-2 $size-3;
+  padding: $size-1-5 $size-4;
+  font-weight: $font-medium;
   cursor: pointer;
 
   &--primary {
@@ -81,7 +86,7 @@ html {
   background-color: var(--color-bg--surface);
   border-radius: $radius-secondary;
   border-width: $border;
-  padding: $size-2 $size-3;
+  padding: $size-2-5;
   width: $w-full;
 
   &--select {
@@ -102,19 +107,19 @@ html {
 .dropdown {
   background-color: var(--color-bg--surface);
   border-width: $border; border-radius: $radius-primary;
-  padding: $size-3 $size-4;
+  padding: $size-6;
   box-shadow: $shadow-lg;
   position: absolute;
   z-index: $z-10;
 }
 
 [type="checkbox"], [type="radio"] {
-  transform: scale(1.2); margin: $size-1;
+  transform: scale(1.7); margin: $size-1;
 }
 
 blockquote {
   border-left-width: $border-4;
-  padding: $size-3 $size-4;
+  padding: $size-3;
 }
 
 code {
@@ -133,7 +138,7 @@ pre {
   > code {
     border-radius: $rounded-none;
     display: block;
-    padding: $size-2 $size-3;
+    padding: $size-3;
     white-space: pre;
   }
 }
@@ -158,7 +163,7 @@ hr {
 }
 
 menu, ul, ol {
-  padding-left: $size-10;
+  padding-left: $size-8;
 }
 
 menu, ul {
@@ -173,26 +178,22 @@ dt {
   font-weight: $font-bold;
 }
 
-label, legend, dt, dd, li {
-  margin-bottom: $size-1;
+fieldset, .input {
+  margin-bottom: $size-6;
 }
 
 h1, h2, h3, h4, h5, h6, .hdg {
-  margin-bottom: $size-4;
-}
-
-fieldset, .input {
   margin-bottom: $size-6;
 }
 
-table, progress, blockquote, figure, pre, menu, ul, ol, dl, p {
+table, progress, blockquote, pre, menu, ul, ol, dl, p {
   margin-bottom: $size-6;
 }
 
 dialog {
   background-color: var(--color-bg--surface);
   border-width: $border; border-radius: $radius-primary;
-  padding: $size-3 $size-4;
+  padding: $size-6;
   box-shadow: $shadow-lg;
   color: inherit;
 }
@@ -201,14 +202,6 @@ dialog::backdrop {
   background-color: rgba($gray-500, $opacity-75);
 }
 
-progress {
-  background-color: var(--color-bg--main);
-}
-
-@include progress-bar {
-  background-color: var(--color-primary);
-}
-
 details {
   display: inline-block;
 }
@@ -221,13 +214,13 @@ summary::-webkit-details-marker {
   display: none;
 }
 
-table, progress {
+table {
   width: $w-full;
 }
 
 td, th {
   border-bottom-width: $border;
-  padding: $size-3 $size-4;
+  padding: $size-4;
   text-align: left;
 }
 
@@ -236,26 +229,26 @@ h1, h2, h3, h4, h5, h6, .hdg {
   line-height: $leading-tight;
 }
 
-h1, .hdg--4xl {
+h1, .hdg--xx-large {
+  font-size: $text-5xl;
+}
+
+h2, .hdg--x-large {
   font-size: $text-4xl;
 }
 
-h2, .hdg--3xl {
+h3, .hdg--large {
   font-size: $text-3xl;
 }
 
-h3, .hdg--2xl {
+h4, .hdg--medium {
   font-size: $text-2xl;
 }
 
-h4, .hdg--xl {
+h5, .hdg--small {
   font-size: $text-xl;
 }
 
-h5, .hdg--lg {
+h6, .hdg--x-small {
   font-size: $text-lg;
 }
-
-h6, .hdg--base {
-  font-size: $text-base;
-}

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

@@ -1,3 +1,5 @@
+@import "../variables/sizing";
+
 // *******************************************************************
 // Pad Utilities
 // .pad-[xs|sm|md|lg|xl]--top
@@ -6,8 +8,6 @@
 // .pad-[xs|sm|md|lg|xl]--left
 // *******************************************************************
 
-@import "../variables/sizing";
-
 @each $scale, $size in $size-map {
   .pad-#{$scale}--top {
     padding-top: $size !important;

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

@@ -1,3 +1,5 @@
+@import "../variables/sizing";
+
 // *******************************************************************
 // Pull Utilities
 // .pull-[xs|sm|md|lg|xl]--top
@@ -6,8 +8,6 @@
 // .pull-[xs|sm|md|lg|xl]--left
 // *******************************************************************
 
-@import "../variables/sizing";
-
 @each $scale, $size in $size-map {
   .pull-#{$scale}--top {
     margin-top: $size * -1 !important;

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

@@ -1,3 +1,5 @@
+@import "../variables/sizing";
+
 // *******************************************************************
 // Push Utilities
 // .push-[xs|sm|md|lg|xl]
@@ -9,8 +11,6 @@
 // .push-[xs|sm|md|lg|xl]--sides
 // *******************************************************************
 
-@import "../variables/sizing";
-
 @each $scale, $size in $size-map {
   .push-#{$scale} {
     margin: $size !important;

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

@@ -98,22 +98,6 @@
   font-size: $text-5xl;
 }
 
-.txt--6xl {
-  font-size: $text-6xl;
-}
-
-.txt--7xl {
-  font-size: $text-7xl;
-}
-
-.txt--8xl {
-  font-size: $text-8xl;
-}
-
-.txt--9xl {
-  font-size: $text-9xl;
-}
-
 .undecorated {
   color: inherit;
   text-decoration: none;

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

@@ -1,3 +1,14 @@
+// *******************************************************************
+// Border Width
+// Variables for controlling the width of an element's borders.
+// border-width: $border;
+// *******************************************************************
+$border-0: 0;
+$border:   1px;
+$border-2: 2px;
+$border-4: 4px;
+$border-8: 8px;
+
 // *******************************************************************
 // Border Style
 // Variables for controlling the border radius of an element.
@@ -12,14 +23,3 @@ $rounded-xl:   0.75rem;
 $rounded-2xl:  1rem;
 $rounded-3xl:  1.5rem;
 $rounded-full: 9999px;
-
-// *******************************************************************
-// Border Width
-// Variables for controlling the width of an element's borders.
-// border-width: $border;
-// *******************************************************************
-$border-0: 0;
-$border:   1px;
-$border-2: 2px;
-$border-4: 4px;
-$border-8: 8px;

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

@@ -2,42 +2,46 @@
 // Default sizing scale
 // By default, SASS-ZERO includes a generous and comprehensive numeric sizing scale.
 // *******************************************************************
-$size-px: 1px;
-$size-0:  0;
-$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-px:  1px;
+$size-0:   0;
+$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-2,
-  "sm": $size-4,
-  "md": $size-8,
-  "lg": $size-16,
-  "xl": $size-32
+  "xs":  $size-1-5,
+  "sm":  $size-3,
+  "md":  $size-6,
+  "lg":  $size-9,
+  "xl":  $size-12
 );

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

@@ -1,12 +1,3 @@
-// *******************************************************************
-// Font Family
-// Variables for controlling the font family of an element.
-// font-family: $font-sans;
-// *******************************************************************
-$font-sans:  ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
-$font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !default;
-$font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
-
 // *******************************************************************
 // Font Size
 // Variables for controlling the font size of an element.
@@ -61,6 +52,15 @@ $leading-8:       2rem;
 $leading-9:       2.25rem;
 $leading-10:      2.5rem;
 
+// *******************************************************************
+// Font Family
+// Variables for controlling the font family of an element.
+// font-family: $font-sans;
+// *******************************************************************
+$font-sans:  ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif !default;
+$font-mono:  ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+
 // *******************************************************************
 // Letter Spacing
 // Variables for controlling the tracking (letter spacing) of an element.

data/example.html

@@ -1,4 +1,4 @@
-<main class="container container--lg" style="background-color: var(--color-bg--surface);">
+<main class="container container--lg" style="background: var(--color-bg--surface);">
   <div class="push-md--bottom">
     <div class="push-sm--bottom">
       <p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
@@ -33,7 +33,7 @@
     <details class="u-position-context">
       <summary class="btn btn--secondary">Dropdown Button</summary>
       <div class="dropdown push-xs--top u-position--right">
-        <ul class="list--unindented u-nowrap flush">
+        <ul class="list--unbulleted u-nowrap flush">
           <li>Unordered list item 1</li>
           <li>Unordered list item 2</li>
           <li>Unordered list item 3</li>
@@ -46,10 +46,10 @@
   </div>
 
   <form class="push-md--bottom">
-    <label for="nameField" class="u-display-b txt--bold">Name</label>
-    <input type="text" placeholder="CJ Patoilo" id="nameField" class="input">
+    <label for="nameField" class="u-display-b txt--bold push-xs--bottom">Name</label>
+    <input type="text" placeholder="Lázaro Nixon" id="nameField" class="input">
 
-    <label for="iceCreamField" class="u-display-b txt--bold">Choose a flavor:</label>
+    <label for="iceCreamField" class="u-display-b txt--bold push-xs--bottom">Choose a flavor:</label>
     <input list="iceCreamFlavors" id="iceCreamField" class="input" />
     <datalist id="iceCreamFlavors">
         <option value="Chocolate">
@@ -59,7 +59,7 @@
         <option value="Vanilla">
     </datalist>
 
-    <label for="ageRangeField" class="u-display-b txt--bold">Age Range</label>
+    <label for="ageRangeField" class="u-display-b txt--bold push-xs--bottom">Age Range</label>
     <select id="ageRangeField" class="input input--select">
       <option value="0-13">0-13</option>
       <option value="14-17">14-17</option>
@@ -67,17 +67,17 @@
       <option value="24+">24+</option>
     </select>
 
-    <label for="commentField" class="u-display-b txt--bold">Comment</label>
-    <textarea placeholder="Hi CJ …" id="commentField" rows="3" class="input"></textarea>
+    <label for="commentField" class="u-display-b txt--bold  push-xs--bottom">Comment</label>
+    <textarea placeholder="Hi Nixon …" id="commentField" rows="3" class="input"></textarea>
 
     <fieldset>
-      <legend class="txt--bold">Choose your options</legend>
+      <legend class="txt--bold push-xs--bottom">Choose your options</legend>
 
-      <div>
+      <div class="push-xs--bottom">
         <input type="checkbox" id="option1" name="option1" value="1" checked>
         <label for="option1" class="u-display-ib">Option 1</label>
       </div>
-      <div>
+      <div class="push-xs--bottom">
         <input type="checkbox" id="option2" name="option2" value="2">
         <label for="option2" class="u-display-ib">Option 2</label>
       </div>
@@ -88,13 +88,13 @@
     </fieldset>
 
     <fieldset>
-      <legend class="txt--bold">Choose your option</legend>
+      <legend class="txt--bold push-xs--bottom">Choose your option</legend>
 
-      <div>
+      <div class="push-xs--bottom">
         <input type="radio" id="radio1" name="radio" value="1" checked>
         <label for="radio1" class="u-display-ib">Option 1</label>
       </div>
-      <div>
+      <div class="push-xs--bottom">
         <input type="radio" id="radio2" name="radio" value="2">
         <label for="radio2" class="u-display-ib">Option 2</label>
       </div>
@@ -107,7 +107,7 @@
     <input type="submit" value="Send" class="btn btn--primary">
   </form>
 
-  <table class="push-md--bottom">
+  <table>
     <thead>
       <tr>
         <th>Name</th>
@@ -132,24 +132,23 @@
     </tbody>
   </table>
 
-  <div class="push-md--bottom">
-    <ul class="list--unindented">
-      <li>Unordered list item 1</li>
-      <li>Unordered list item 2</li>
-      <li>Unordered list item 3</li>
-    </ul>
-
-    <ol class="list--unindented">
-      <li>Ordered list item 1</li>
-      <li>Ordered list item 2</li>
-      <li>Ordered list item 3</li>
-    </ol>
-
-    <dl>
-      <dd>A description list is perfect for defining terms.</dd>
-      <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
-    </dl>
-  </div>
+  <ul class="list--unindented">
+    <li>Unordered list item 1</li>
+    <li>Unordered list item 2</li>
+    <li>Unordered list item 3</li>
+  </ul>
+
+  <ol class="list--unindented">
+    <li>Ordered list item 1</li>
+    <li>Ordered list item 2</li>
+    <li>Ordered list item 3</li>
+  </ol>
+
+  <dl>
+    <dt>Description lists</dt>
+    <dd>A description list is perfect for defining terms.</dd>
+    <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
+  </dl>
 
   <div class="push-md--bottom">
     <code>.block { color: #9b4dca; }</code>
@@ -158,16 +157,13 @@
   <pre><code>.block { color: #9b4dca; }</code></pre>
 
   <blockquote>
-    <p class="flush--bottom">Friends don’t spy; true friendship is about privacy, too.</p>
+    <p class="flush">Friends don’t spy; true friendship is about privacy, too.</p>
     <cite class="txt--sm">– Stephen King</cite>
   </blockquote>
 
-  <div>
-    <label for="progress" class="u-display-b txt--bold">Progress</label>
-    <progress id="progress" max="100" value="70">70%</progress>
-  </div>
+  <hr>
 
-  <div style="height: 55px;">
+  <div style="height: 85px;">
     <dialog open>
       <form method="dialog">
         <span>This is a native dialog with a close button.</span>

data/lib/sass_zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "1.3.2"
+    VERSION = "1.4.0"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sass-zero
 version: !ruby/object:Gem::Version
-  version: 1.3.2
+  version: 1.4.0
 platform: ruby
 authors:
 - lazaronixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-07-11 00:00:00.000000000 Z
+date: 2023-07-13 00:00:00.000000000 Z
 dependencies: []
 description:
 email:
@@ -25,11 +25,11 @@ files:
 - Gemfile.lock
 - README.md
 - Rakefile
-- app/assets/stylesheets/sass-zero/_animations.scss
 - app/assets/stylesheets/sass-zero/_mixins.scss
 - app/assets/stylesheets/sass-zero/_variables.scss
 - app/assets/stylesheets/sass-zero/base.scss
 - app/assets/stylesheets/sass-zero/breadboard.scss
+- app/assets/stylesheets/sass-zero/keyframes.scss
 - app/assets/stylesheets/sass-zero/utilities.scss
 - app/assets/stylesheets/sass-zero/utilities/_align.scss
 - app/assets/stylesheets/sass-zero/utilities/_border.scss