sass-zero 1.4.1 → 1.5.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 43fba23c8010823b3278387a11cfc2db218044e4cc61cf6219beeaaf060a6940
-  data.tar.gz: 03e0c3a1c4fbc02616943b771985c7ed27c56fcceaa80fdd83d1e970304477b7
+  metadata.gz: d4f28268eed433b49ce2faf6cbf821f4b3639d8e0073bb43a5f95219bda912ef
+  data.tar.gz: 1899f21bad13617b8f7becd4e662de8dec0980b6cf3cdb3b3c9299b182a069f7
 SHA512:
-  metadata.gz: a586b446208ff8e53a49b7672d5b4200307e62bbd535de22f4ea420c76232f8b958f17f177c923fa616cfd1d4319528951cbc936bced755e414c35668f5d4884
-  data.tar.gz: cbaadf48fc3f0d2a2dd1044c58d57da8304faf0662c435aa9cc356ecaf9776b6086455fee9b486c1d779d8466eb25a44249614d8e856a74be2b698fd6f2e5e42
+  metadata.gz: 47b92d5ca3f467dc9fba7b92c443e6c3a77b0d1a8a01748b430c2bc5f8ba3e9eb686640fe0f86a47f41845b09060c4c138fbc48b3f54ebde275a36712a9d365e
+  data.tar.gz: d1ac0b359e459df0dccef494a7c17ee56ddc99ccebc577235f7b901d27585f5acc6b8a3f6911b34c4b822ebd24b262fab038f0778db3824ee030fed7910afb1c

data/Gemfile.lock

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

data/README.md

@@ -65,12 +65,19 @@ This can be useful for dealing with similar components, and positioning.
 
 ## Breadboard
 
-These default styles ensure that even without custom styling, the content is usable and understandable, if your development process is mostly reproducing Figma designs, you might don't need it.
+These default styles ensure that even without custom styling, the content is usable and understandable, also you can use it as the baseline.
 
 - [Breadboard](app/assets/stylesheets/sass-zero/breadboard.scss)
-- [Screenshot](screenshot.png)
 - [Example](example.html)
 
+### Desktop
+
+![Screenshot Desktop](screenshot-desktop.png)
+
+### Dark mode
+
+![Screenshot Dark](screenshot-dark.png)
+
 ## Using variables
 
 Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Variables](app/assets/stylesheets/sass-zero/_variables.scss):

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

@@ -28,7 +28,7 @@
 */
 
 html {
-  line-height: 1.5; /* 1 */
+  line-height: 1.4; /* 1 */
   -webkit-text-size-adjust: 100%; /* 2 */
   -moz-tab-size: 4; /* 3 */
   tab-size: 4; /* 3 */

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

@@ -11,18 +11,18 @@ $radius-secondary: $rounded;
   --color-bg--surface:   #{$white};
   --color-bg--highlight: #{$gray-200};
   --color-border:        #{$gray-300};
-  --color-primary:       #{$gray-800};
-  --color-text:          #{$gray-900};
+  --color-primary:       #{$gray-600};
+  --color-text:          #{$gray-700};
 }
 
 @media (prefers-color-scheme: dark) {
   :root {
-    --color-bg--main:      #{$gray-900};
-    --color-bg--surface:   #{$gray-800};
-    --color-bg--highlight: #{$gray-700};
-    --color-border:        #{$gray-600};
-    --color-primary:       #{$white};
-    --color-text:          #{$white};
+    --color-bg--main:      #{$blue-gray-900};
+    --color-bg--surface:   #{$blue-gray-800};
+    --color-bg--highlight: #{$blue-gray-700};
+    --color-border:        #{$blue-gray-300};
+    --color-primary:       #{$blue-gray-200};
+    --color-text:          #{$blue-gray-200};
   }
 }
 
@@ -45,7 +45,7 @@ html {
   border-radius: $radius-primary;
   border-width: $border;
   display: inline-block;
-  padding: $size-1 $size-3;
+  padding: $size-1-5 $size-3;
   font-weight: $font-medium;
   cursor: pointer;
 
@@ -113,7 +113,7 @@ html {
 }
 
 [type="checkbox"], [type="radio"] {
-  transform: scale(1.35); margin: $size-1;
+  transform: scale(1.36); margin: $size-1;
 }
 
 blockquote {
@@ -146,20 +146,20 @@ kbd {
   background-color: var(--color-primary);
   border-radius: $rounded;
   font-size: $text-sm;
-  padding: $size-1;
+  padding: $size-0-5;
   color: var(--color-bg--main);
 }
 
 mark {
   background-color: var(--color-bg--highlight);
   border-radius: $rounded;
-  padding: $size-1;
+  padding: $size-0-5;
   color: inherit;
 }
 
 hr {
   border-color: var(--color-primary);
-  margin: $size-5 $size-0;
+  margin: $size-8 $size-0;
 }
 
 menu, ul, ol {
@@ -220,7 +220,7 @@ table {
 
 td, th {
   border-bottom-width: $border;
-  padding: $size-2-5;
+  padding: $size-3;
   text-align: left;
 }
 
@@ -233,21 +233,21 @@ h1, .hdg--xx-large {
 }
 
 h2, .hdg--x-large {
-  font-size: $text-3xl;
+  font-size: $text-2xl;
 }
 
 h3, .hdg--large {
-  font-size: $text-2xl;
+  font-size: $text-lg;
 }
 
 h4, .hdg--medium {
-  font-size: $text-xl;
+  font-size: $text-base;
 }
 
 h5, .hdg--small {
-  font-size: $text-lg;
+  font-size: $text-sm;
 }
 
 h6, .hdg--x-small {
-  font-size: $text-base;
+  font-size: $text-xs;
 }

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

@@ -30,7 +30,7 @@
 }
 
 .flex--gap {
-  gap: $size-3;
+  gap: $size-2-5;
 }
 
 .i-flex {
@@ -72,7 +72,7 @@
 
   .flex--column\@md {
     flex-direction: column;
-  }  
+  }
 
   .flex--centered\@md {
     justify-content: center;

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

@@ -42,6 +42,6 @@ $size-map: (
   "xs":  $size-1,
   "sm":  $size-2-5,
   "md":  $size-5,
-  "lg":  $size-9,
+  "lg":  $size-8,
   "xl":  $size-10
 );

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

@@ -40,7 +40,7 @@ $font-black:      900;
 $leading-none:    1;
 $leading-tight:   1.25;
 $leading-snug:    1.375;
-$leading-normal:  1.5;
+$leading-normal:  1.4;
 $leading-relaxed: 1.625;
 $leading-loose:   2;
 $leading-3:       .75rem;

data/example.html

@@ -1,7 +1,7 @@
 <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 1rem (16px) over 1.5 line height (24px)</p>
+      <p>The base type is 1rem (16px) over 1.4 line height</p>
       <a href="#" class="txt--underline">Anchor</a>
       <em>Emphasis</em>
       <small>Small</small>
@@ -104,7 +104,7 @@
       </div>
     </fieldset>
 
-    <input type="submit" value="Send" class="btn btn--primary">
+    <input type="submit" value="Save changes" class="btn btn--primary">
   </form>
 
   <table>
@@ -145,7 +145,7 @@
   </ol>
 
   <dl>
-    <dt>Description lists</dt>
+    <dt class="push-xs--bottom">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>

data/lib/sass_zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "1.4.1"
+    VERSION = "1.5.1"
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sass-zero
 version: !ruby/object:Gem::Version
-  version: 1.4.1
+  version: 1.5.1
 platform: ruby
 authors:
 - lazaronixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-07-14 00:00:00.000000000 Z
+date: 2023-07-15 00:00:00.000000000 Z
 dependencies: []
 description:
 email:
@@ -63,7 +63,8 @@ files:
 - lib/sass_zero.rb
 - lib/sass_zero/version.rb
 - sass-zero.gemspec
-- screenshot.png
+- screenshot-dark.png
+- screenshot-desktop.png
 homepage: http://github.com/lazaronixon/sass-zero
 licenses:
 - MIT