sass-zero 0.0.42 → 0.0.43

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4fc89d490e508588c32e7a8d2f24e710cbc47797e677b2f0f882a7de040f78c5
-  data.tar.gz: 5af7f7563084b499eae3695a8a10e49cda92339c3fb1f1a42d779250c5741a40
+  metadata.gz: 06e133db6d4914987dbc2d77f08bcdd1671ad91fd57debe8c720330bfb708cb0
+  data.tar.gz: def1eda7c32c8f426ebb2b0bd43608e3b15ff917e88abb5056c67e07d8633004
 SHA512:
-  metadata.gz: a8dc51d7f79fdaca2cddb60a27b736ad3d63b88a42bf6335e9616f3c838643bcbbac42b2cb8bd76e15459e4757ad53e458e58a1d3038c5b68abe739bd744facb
-  data.tar.gz: 2fea0ea3d5ad4206e2c982a1c0dc8cba68c852b359406bfaee4746ff932697172f6f1e33aead8ffb2ab3e881a06818c80d773c417146c631704617095ca5fe51
+  metadata.gz: 4ad3cb7aad00280da0c4777c1fb10308c77dee3b58855c17aaa193215c320768cfec6906bbd1eb988dd5c498431eb29b46f0223cc4902f643803d9b0470b6861
+  data.tar.gz: 8544b5ce046ca7f5742c1e1212fb41d1c65d58829341f741f2d3db3305313f9644df84403299dc59aafcae3240c7f3764136f4eb2bf2a4ca47145b1f399f0e1f

data/README.md

@@ -31,7 +31,7 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
 ### Breadboard Theme
 
 - [Example](https://github.com/lazaronixon/sass-zero/blob/master/Example.html)
-- [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/base/breadboard.scss)
+- [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/breadboard.scss)
 
 ### Variables
 
@@ -78,7 +78,7 @@ Add this line to your application.css:
 ```css
  *= require sass-zero/base
  *= require sass-zero/utilities
- *= require sass-zero/breadboard 
+ *= require sass-zero/breadboard
 ```
 
 Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Variables](https://github.com/lazaronixon/sass-zero/blob/master/vendor/assets/stylesheets/sass-zero/variables.scss):

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

@@ -1,10 +1,20 @@
 @import "sass-zero/variables";
 @import "sass-zero/mixins";
 
-$breadboard-primary:    $gray-900;
-$breadboard-background: $gray-100;
+:root {
+  --color-bg--main:         #{$white};
+  --color-bg--surface:      #{$gray-100};
+  --color-primary:          #{$gray-900};
+  --color-txt:              #{$gray-900};
+  --color-focus-ring:       #{rgba($gray-900, 0.5)};
+  --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: var(--color-bg--main);
+  color: var(--color-txt);
   font-size: 14px;
 }
 
@@ -14,23 +24,22 @@ main {
 }
 
 blockquote {
-  border-color: $breadboard-primary;
+  border-color: var(--color-primary);
   border-left-width: $border-4;
   padding: $size-3 $size-4;
 }
 
 .btn {
-  background-color: $white;
   border-radius: $rounded;
   border-width: $border;
-  color: $breadboard-primary;
   display: inline-block;
   font-weight: $font-bold;
   padding: $size-2 $size-4;
   cursor: pointer;
 
   &:focus {
-    @include outline-black;
+    outline: 2px dotted var(--color-primary);
+    outline-offset: 2px;
   }
 
   &:disabled {
@@ -39,14 +48,14 @@ blockquote {
   }
 
   &--primary {
-    background-color: $breadboard-primary;
-    border-color: $breadboard-primary;
-    color: $white;
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: var(--color-bg--main);
   }
 
   &--secondary {
-    border-color: $breadboard-primary;
-    background-color: $white;
+    background-color: var(--color-bg--main);
+    border-color: var(--color-primary);
   }
 
   &--tertiary {
@@ -56,7 +65,7 @@ blockquote {
 }
 
 code {
-  background-color: $breadboard-background;
+  background-color: var(--color-bg--surface);
   border-radius: $rounded;
   font-size: $text-sm;
   margin: $size-0 $size-1;
@@ -65,8 +74,8 @@ code {
 }
 
 pre {
-  background-color: $breadboard-background;
-  border-color: $breadboard-primary;
+  background-color: var(--color-bg--surface);
+  border-color: var(--color-primary);
   border-left-width: $border-4;
   overflow-y: hidden;
 
@@ -84,13 +93,14 @@ hr {
 
 .input {
   appearance: none;
+  background-color: $transparent;
   border-radius: $rounded;
   border-width: $border;
   padding: $size-2 $size-3;
   width: $size-full;
 
   &--select {
-    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path stroke="%236b7280" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M6 8l4 4 4-4"/></svg>');
+    background-image: var(--image-bg-select);
     background-position: right $size-2 center;
     background-repeat: no-repeat;
     background-size: auto $size-5;
@@ -98,37 +108,37 @@ hr {
   }
 
   &:focus {
-    box-shadow: ring($color: $breadboard-primary);
+    box-shadow: ring($color: var(--color-focus-ring));
     @include outline-none;
   }
 }
 
 .checkbox {
   border-radius: $rounded;
-  @include input-selection($breadboard-primary);
+  @include input-selection(var(--color-primary));
 
   &:checked {
-    background-image: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>');
+    background-image: var(--image-checked-checkbox);
     @include checked;
   }
 
   &:focus {
-    box-shadow: ring($color: $breadboard-primary);
+    box-shadow: ring($color: var(--color-focus-ring));
     @include outline-none;
   }
 }
 
 .radio {
   border-radius: $rounded-full;
-  @include input-selection($breadboard-primary);
+  @include input-selection(var(--color-primary));
 
   &:checked {
-    background-image: 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>');
+    background-image: var(--image-checked-radio);
     @include checked;
   }
 
   &:focus {
-    box-shadow: ring($color: $breadboard-primary);
+    box-shadow: ring($color: var(--color-focus-ring));
     @include outline-none;
   }
 }
@@ -201,6 +211,19 @@ h6, .hdg--base {
   font-size: $text-base;
 }
 
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg--main:         #{$gray-900};
+    --color-bg--surface:      #{$gray-800};
+    --color-primary:          #{$white};
+    --color-txt:              #{$white};
+    --color-focus-ring:       #{rgba($gray-100, 0.5)};
+    --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="white" 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="black" 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="black" xmlns="http://www.w3.org/2000/svg"><circle cx="8" cy="8" r="3"/></svg>');
+  }
+}
+
 @media (min-width: $breakpoint-md) {
   html { font-size: 16px; }
   main { @include make-container($size-10, $breakpoint-xl); }

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

@@ -101,10 +101,6 @@
   color: $gray-700;
 }
 
-.txt--very-subtle {
-  color: $gray-600;
-}
-
 .txt--underline {
   text-decoration: underline;
 }

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

@@ -38,16 +38,14 @@ $opacity-100: 1;
 // 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);
-
+@function ring($width: 3px, $color: rgba($blue-500, 0.5), $offset-width: 0px, $offset-color: $white, $inset: false)  {
   @if $inset {
     $ring-offset-shadow: inset 0 0 0 $offset-width $offset-color;
-    $ring-shadow: inset 0 0 0 ($width + $offset-width) $ring-color;
+    $ring-shadow: inset 0 0 0 ($width + $offset-width) $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;
+    $ring-shadow: 0 0 0 ($width + $offset-width) $color;
     @return $ring-offset-shadow, $ring-shadow, 0 0 #0000;
   }
 }

data/lib/sass/zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "0.0.42"
+    VERSION = "0.0.43"
   end
 end

data/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sass-zero",
-	"version": "0.0.42",
+	"version": "0.0.43",
 	"description": "A CSS framework for rapid UI development based on tailwindcss, miligram and BEM.",
 	"homepage": "https://github.com/lazaronixon/sass-zero",
 	"repository": "lazaronixon/sass-zero",

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: sass-zero
 version: !ruby/object:Gem::Version
-  version: 0.0.42
+  version: 0.0.43
 platform: ruby
 authors:
 - lazaronixon
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-12-13 00:00:00.000000000 Z
+date: 2020-12-15 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails