sass-zero 0.0.45 → 0.0.46

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 90335efa16cb09716e4c31bd9cb7df2469d9e586ce409ac5db752ef195f367a5
-  data.tar.gz: 867fd4aec244f7886f26d438734e92d3e7511d9be443983632d673a12a4296b3
+  metadata.gz: a70d79a12adc6f8ce1f1e8cb6010376853a05f3811220d802bdba66807af5f73
+  data.tar.gz: 468f771702b25513dd37bfb8fc80e3ebbc61816db3680b3bc3839976676eaafb
 SHA512:
-  metadata.gz: 14ac230bce5200038c588cbca45e565931061251a1e401ccf3699a1c326ef55eb0caf3806b6c29124a6641847567891d69e3d43c0b0280cf8ba26f4d7ac66ee3
-  data.tar.gz: b525273b68b1538a8102dbeb0ccd9abeaa9bcb5f60e1fea95829613fdcdfcdb354b991e228e22c6fd915fb4c515374cedac40d775c233ac8b5289ef3735948d9
+  metadata.gz: d1b54a51fe3aff5ca9203f97ac299afbef75c7fc823d6809ef33c8157856d253126d215bf635eb34ffd53e70387b682cc4b4f9db942ca7a21d8450302127d199
+  data.tar.gz: dc64fedbee094996ad563e765e3edbd70e53a659d653437e26baea00abe691b925e564929c1932c22e0d3411d0e7855b5e6806103a13b302eb4213b592a490e7

data/Example.html

@@ -1,6 +1,6 @@
 <main class="container">
   <p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
-  <a href="#">Anchor</a>
+  <a href="#" class="txt--underline">Anchor</a>
   <em>Emphasis</em>
   <small>Small</small>
   <strong>Strong</strong>

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-txt:         #{$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-txt);
   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;
@@ -38,7 +34,7 @@ blockquote {
   cursor: pointer;
 
   &:focus {
-    outline: 2px dotted $color-primary;
+    outline: 2px dotted var(--color-primary);
     outline-offset: 2px;
   }
 
@@ -48,14 +44,14 @@ blockquote {
   }
 
   &--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);
   }
 
   &--tertiary {
@@ -64,33 +60,6 @@ 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 {
   appearance: none;
   background-color: $transparent;
@@ -100,7 +69,7 @@ hr {
   width: $size-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 +77,70 @@ 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);
+  overflow-y: hidden;
+
+  & > code {
+    display: block;
+    padding: $size-2 $size-3;
+    white-space: pre;
+  }
+}
+
+hr {
+  margin: $size-6 $size-0;
+}
+
 a {
   font-weight: $font-bold;
 }
@@ -182,7 +180,7 @@ table {
 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/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/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/lib/sass/zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "0.0.45"
+    VERSION = "0.0.46"
   end
 end

data/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sass-zero",
-	"version": "0.0.45",
+	"version": "0.0.46",
 	"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.45
+  version: 0.0.46
 platform: ruby
 authors:
 - lazaronixon
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-12-18 00:00:00.000000000 Z
+date: 2020-12-19 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: autoprefixer-rails
@@ -24,7 +24,7 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 9.7.4
-description: 
+description:
 email:
 - lazaronixon@hotmail.com
 executables: []
@@ -75,7 +75,7 @@ homepage: http://github.com/lazaronixon/sass-zero
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -91,7 +91,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubygems_version: 3.1.4
-signing_key: 
+signing_key:
 specification_version: 4
 summary: A CSS framework for rapid UI development based on tailwindcss, miligram and
   BEM.