sass-zero 1.5.0 → 1.5.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 5c4b768049ccd8c213c5ca63128311ee2afa78c32eb83cfd0ef25bff68b6553e
-  data.tar.gz: 83a405188b5420197fdba4ca1b4f59e399d8f9b4bc08e2fa0534390aaf9f9359
+  metadata.gz: 8bc213583ce001df4c88be706ea16d332a291f581ca7b63431637a4f91e9fc64
+  data.tar.gz: 586de3aeab20ffcec0e88c6755a5cde96f07e67fb2c0fcfbdd7d0de9c08d3b28
 SHA512:
-  metadata.gz: 57c801d83311e6d027d4a5bcb67df919626e2a820984d10bc7c53326d0ee65568bedea99d29dc86d3d627a78cb4318df2828f0a82e7be0531ccdd5078ea31670
-  data.tar.gz: 2a1483d90af547c934411ac8767bb772e096858d862ccc7ab7ef55adbbe7dd1cd50f77104cbea505d9f31cec45259debb84cac2b97fc5519e94a328909108b8c
+  metadata.gz: 076bbe11c3481cd60b2f162c5413c07ba8e8950afbc291f10f83231160885418efff017dbd977562a703b7fd69a82014d14cb130b0b0990a436390c0eacd7635
+  data.tar.gz: 2fd687eded1f6a05d791d48b7e71fda06bcede3eae647db354bfb80bc91f1649d3b356d64f4884af72fb5c130a551f2232071e3fb51e9bf68967028791388020

data/Gemfile.lock

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

data/README.md

@@ -16,7 +16,6 @@ Add these lines to your application.css:
 ```css
 *= require sass-zero/base
 *= require sass-zero/utilities
-*= require sass-zero/keyframes
 *= require sass-zero/breadboard
 ```
 
@@ -65,12 +64,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 optional default styles ensure that even without custom styling, the content is usable and understandable, also you can use it as the baseline or your design. It is responsive (mobile), accessible (dark mode), customizable(--var), and very slim.
 
 - [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/images/select-arrow.svg

@@ -0,0 +1 @@
+<svg fill="#a1a1aa" height="15" width="10" xmlns="http://www.w3.org/2000/svg"><path d="m0 5 5-5 5 5z"/><path d="m0 10 5 5 5-5z"/></svg>

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

@@ -27,6 +27,7 @@
 
 // *******************************************************************
 // Animations
+// You will need to add keyframes.scss to your application.
 // *******************************************************************
 
 @mixin animate-spin {

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

@@ -10,19 +10,19 @@ $radius-secondary: $rounded;
   --color-bg--main:      #{$gray-100};
   --color-bg--surface:   #{$white};
   --color-bg--highlight: #{$gray-200};
-  --color-border:        #{$gray-300};
-  --color-primary:       #{$gray-800};
-  --color-text:          #{$gray-900};
+  --color-border:        #{$gray-200};
+  --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-600};
+    --color-primary:       #{$blue-gray-400};
+    --color-text:          #{$blue-gray-200};
   }
 }
 
@@ -90,12 +90,7 @@ html {
   width: $w-full;
 
   &--select {
-    background-image:
-      linear-gradient(45deg, transparent 49%, var(--color-text) 51%),
-      linear-gradient(135deg, var(--color-text) 51%, transparent 49%);
-    background-position: calc(100% - 20px), calc(100% - 15px);
-    background-repeat: no-repeat;
-    background-size: 5px 5px, 5px 5px;
+    background: image-url("select-arrow.svg") right $size-3-5 center no-repeat;
   }
 
   &:disabled {

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

@@ -70,6 +70,16 @@
   left: -9999em;
 }
 
+.u-for-screen-reader {
+  position: absolute;
+  height: 1px;
+  width: 1px;
+  clip: rect(1px, 1px, 1px, 1px);
+  overflow: hidden;
+  text-transform: none;
+  white-space: nowrap
+}
+
 .u-overflow-auto {
   overflow: auto;
 }

data/lib/sass_zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "1.5.0"
+    VERSION = "1.5.2"
   end
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: sass-zero
 version: !ruby/object:Gem::Version
-  version: 1.5.0
+  version: 1.5.2
 platform: ruby
 authors:
 - lazaronixon
@@ -25,6 +25,7 @@ files:
 - Gemfile.lock
 - README.md
 - Rakefile
+- app/assets/images/select-arrow.svg
 - app/assets/stylesheets/sass-zero/_mixins.scss
 - app/assets/stylesheets/sass-zero/_variables.scss
 - app/assets/stylesheets/sass-zero/base.scss
@@ -63,7 +64,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