sass-zero 0.0.57 → 1.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1d59dcac8d72f42763e08239e15c235964dac127c94acf45f09964919f01cfa9
-  data.tar.gz: ce884ee7a8cf2612e37852f294be33be241d62c3a7c3f77e250a4aec47ec3e0b
+  metadata.gz: 1a233cf6a266b03c3639d31c8055d766cbe473e66ad48eff4d3df9599763b538
+  data.tar.gz: f2c7067732a97a31b7c48eb276dcd5c8e600d84ed648e199d93c7ce40406d8f7
 SHA512:
-  metadata.gz: d632a79c4cf523755d8e7059887c9f16074261de72c9bddec8dbec10bd2054c9cd72e86b52eaa1592806be40e9cad5b74acdb751b13ca738460a8a0b50092009
-  data.tar.gz: 441fe39c8be344a7cf6e433ec5f8cb410eca2fb03d70e2372df8b792e513974ffce9209cfca94ee85fce8d76cd66b82b75b5e7dee8911c9a07620401b5f656ff
+  metadata.gz: 78bcb353879ee97d6490927bf5922a7ea8ce0e296fee8d478f943bb3c6629e3710a48db167dec9f8945e04ef78709d4413014b90cc4ef35e9462179d88f013d6
+  data.tar.gz: 2fa2121cff849f96a68fd49c45775d75b31b3858fc0833fa3a7db75f50832701da917fa7362b3c7003c34283ff00e33ed81bfc20065e119181a8b3fd71a7b3e2

data/README.md

@@ -39,6 +39,7 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
 - [Breakpoint](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/breakpoints.scss)
 - [Colors](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/colors.scss)
 - [Effects](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/effects.scss)
+- [Filters](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/filters.scss)
 - [Flex](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/flex.scss)
 - [Grid](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/grid.scss)
 - [Spacing](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/variables/spacing.scss)
@@ -71,7 +72,6 @@ Add this to your application's Gemfile:
 
 ```ruby
 gem "sass-zero"
-gem "autoprefixer-rails"
 ```
 
 ## Usage

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

@@ -12,7 +12,18 @@ $radius-button: $rounded;
   --color-bg--highlight: #{$gray-200};
   --color-primary:       #{$gray-900};
   --color-text:          #{$gray-900};
-  --color-focus-ring:    #{rgba($gray-900, $opacity-50)};
+  --color-focus-ring:    #{rgba($black, $opacity-60)};
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --color-bg--main:      #{$gray-900};
+    --color-bg--surface:   #{$gray-800};
+    --color-bg--highlight: #{$gray-700};
+    --color-primary:       #{$white};
+    --color-text:          #{$white};
+    --color-focus-ring:    #{rgba($white, $opacity-60)};
+  }
 }
 
 html {
@@ -59,16 +70,20 @@ html {
 }
 
 .input {
+  -webkit-appearance: none;
+
   resize: none;
   appearance: none;
-  background-color: $transparent;
+  background-color: var(--color-bg--main);
   border-radius: $radius-input;
   border-width: $border;
   padding: $size-2 $size-3;
   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-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;
@@ -103,7 +118,7 @@ code {
   background-color: var(--color-bg--surface);
   border-radius: $rounded;
   font-size: $text-sm;
-  padding: $size-1 $size-2;
+  padding: $size-1;
   white-space: nowrap;
 }
 
@@ -124,14 +139,15 @@ kbd {
   background-color: var(--color-primary);
   border-radius: $rounded;
   font-size: $text-sm;
-  padding: $size-1 $size-2;
+  padding: $size-1;
   color: var(--color-bg--main);
 }
 
 mark {
   background-color: var(--color-bg--highlight);
   border-radius: $rounded;
-  padding: $size-1 $size-2;
+  padding: $size-1;
+  color: inherit;
 }
 
 hr {

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

@@ -7,11 +7,11 @@
 }
 
 .animate-ping {
-  animation: ping 1s cubic-bezier(0, 0, .2, 1) infinite;
+  animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
 }
 
 .animate-pulse {
-  animation: pulse 2s cubic-bezier(.4, 0, .6, 1) infinite;
+  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
 }
 
 .animate-bounce {
@@ -43,7 +43,7 @@
     opacity: 1;
   }
   50% {
-    opacity: .5;
+    opacity: 0.5;
   }
 }
 

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

@@ -2,7 +2,11 @@
 
 // *******************************************************************
 // Pull Utilities
-// $size-map: ("xs": $size-1, "sm": $size-2, "md": $size-4, "lg": $size-6, "xl": $size-8, "2xl": $size-10, "3xl": $size-12);
+// .pull-[xs|md|lg|xl|2xl|3xl]--top
+// .pull-[xs|md|lg|xl|2xl|3xl]--right
+// .pull-[xs|md|lg|xl|2xl|3xl]--bottom
+// .pull-[xs|md|lg|xl|2xl|3xl]--left
+// .pull-[xs|md|lg|xl|2xl|3xl]--sides
 // *******************************************************************
 @each $scale, $size in $size-map {
   .pull-#{$scale}--top {

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

@@ -2,7 +2,13 @@
 
 // *******************************************************************
 // Push Utilities
-// $size-map: ("xs": $size-1, "sm": $size-2, "md": $size-4, "lg": $size-6, "xl": $size-8, "2xl": $size-10, "3xl": $size-12);
+// .push-[xs|md|lg|xl|2xl|3xl]
+// .push-[xs|md|lg|xl|2xl|3xl]--top
+// .push-[xs|md|lg|xl|2xl|3xl]--right
+// .push-[xs|md|lg|xl|2xl|3xl]--bottom
+// .push-[xs|md|lg|xl|2xl|3xl]--left
+// .push-[xs|md|lg|xl|2xl|3xl]--ends
+// .push-[xs|md|lg|xl|2xl|3xl]--sides
 // *******************************************************************
 @each $scale, $size in $size-map {
   .push-#{$scale} {

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

@@ -3,14 +3,14 @@
 // Variables for controlling the box shadow of an element.
 // box-shadow: $shadow;
 // *******************************************************************
-$shadow-sm:      0 1px 2px 0 rgba(0, 0, 0, 0.05);
-$shadow:         0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
-$shadow-md:      0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
-$shadow-lg:      0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-$shadow-xl:      0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
-$shadow-2xl:     0 25px 50px -12px rgba(0, 0, 0, 0.25);
-$shadow-inner:   inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
-$shadow-none:    none;
+$shadow-sm:    0 1px 2px 0 rgba(0, 0, 0, 0.05);
+$shadow:       0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+$shadow-md:    0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+$shadow-lg:    0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+$shadow-xl:    0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
+$shadow-2xl:   0 25px 50px -12px rgba(0, 0, 0, 0.25);
+$shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
+$shadow-none:  none;
 
 // *******************************************************************
 // Opacity

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

@@ -0,0 +1,103 @@
+// *******************************************************************
+// Blur
+// Variables for applying blur filters to an element.
+// filter: $blur; backdrop-filter: $blur;
+// *******************************************************************
+$blur-none: blur(0);
+$blur-sm:   blur(4px);
+$blur:      blur(8px);
+$blur-md:   blur(12px);
+$blur-lg:   blur(16px);
+$blur-xl:   blur(24px);
+$blur-2xl:  blur(40px);
+$blur-3xl:  blur(64px);
+
+// *******************************************************************
+// Brightness
+// Variables for applying brightness filters to an element.
+// filter: $brightness-50; backdrop-filter: $brightness-50;
+// *******************************************************************
+$brightness-0:   brightness(0);
+$brightness-50:  brightness(0.5);
+$brightness-75:  brightness(0.75);
+$brightness-90:  brightness(0.9);
+$brightness-95:  brightness(0.95);
+$brightness-100: brightness(1);
+$brightness-105: brightness(1.05);
+$brightness-110: brightness(1.1);
+$brightness-125: brightness(1.25);
+$brightness-150: brightness(1.5);
+$brightness-200: brightness(2);
+
+// *******************************************************************
+// Contrast
+// Variables for applying brightness filters to an element.
+// filter: $contrast-50; backdrop-filter: $contrast-50;
+// *******************************************************************
+$contrast-0:   contrast(0);
+$contrast-50:  contrast(0.5);
+$contrast-75:  contrast(0.75);
+$contrast-100: contrast(1);
+$contrast-125: contrast(1.25);
+$contrast-150: contrast(1.5);
+$contrast-200: contrast(2);
+
+// *******************************************************************
+// Drop Shadow
+// Variables for applying drop-shadow filters to an element.
+// filter: $drop-shadow; backdrop-filter: $drop-shadow;
+// *******************************************************************
+$drop-shadow-none: drop-shadow(0 0 #0000);
+$drop-shadow-sm:   drop-shadow(0 1px 1px rgba(0, 0, 0, 0.05));
+$drop-shadow:      drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.06));
+$drop-shadow-md:   drop-shadow(0 4px 3px rgba(0, 0, 0, 0.07)) drop-shadow(0 2px 2px rgba(0, 0, 0, 0.06));
+$drop-shadow-lg:   drop-shadow(0 10px 8px rgba(0, 0, 0, 0.04)) drop-shadow(0 4px 3px rgba(0, 0, 0, 0.1));
+$drop-shadow-xl:   drop-shadow(0 20px 13px rgba(0, 0, 0, 0.03)) drop-shadow(0 8px 5px rgba(0, 0, 0, 0.08));
+$drop-shadow-2xl:  drop-shadow(0 25px 25px rgba(0, 0, 0, 0.15));
+
+// *******************************************************************
+// Grayscale
+// Variables for applying grayscale filters to an element.
+// filter: $grayscale; backdrop-filter: $grayscale;
+// *******************************************************************
+$grayscale-0: grayscale(0);
+$grayscale:   grayscale(100%);
+
+// *******************************************************************
+// Hue Rotate
+// Variables for applying hue-rotate filters to an element.
+// filter: $hue-rotate-30; backdrop-filter: $hue-rotate-30;
+// *******************************************************************
+$hue-rotate-0:   hue-rotate(0deg);
+$hue-rotate-15:  hue-rotate(15deg);
+$hue-rotate-30:  hue-rotate(30deg);
+$hue-rotate-60:  hue-rotate(60deg);
+$hue-rotate-90:  hue-rotate(90deg);
+$hue-rotate-180: hue-rotate(180deg);
+
+// *******************************************************************
+// Invert
+// Variables for applying invert filters to an element.
+// filter: $invert; backdrop-filter: $invert;
+// *******************************************************************
+$invert-0: invert(0);
+$invert:   invert(100%);
+
+// *******************************************************************
+// Saturate
+// Variables for applying saturation filters to an element.
+// filter: $saturate-50; backdrop-filter: $saturate-50;
+// *******************************************************************
+$saturate-0:   saturate(0);
+$saturate-50:  saturate(0.5);
+$saturate-100: saturate(1);
+$saturate-150: saturate(1.5);
+$saturate-200: saturate(2);
+
+// *******************************************************************
+// Sepia
+// Variables for applying sepia filters to an element.
+// filter: $sepia; backdrop-filter: $sepia;
+// *******************************************************************
+$sepia-0: sepia(0);
+$sepia:   sepia(100%);

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

@@ -35,4 +35,12 @@ $size-72:  18rem;
 $size-80:  20rem;
 $size-96:  24rem;
 
-$size-map: ("xs": $size-1, "sm": $size-2, "md": $size-4, "lg": $size-6, "xl": $size-8, "2xl": $size-10, "3xl": $size-12);
+$size-map: (
+  "xs":  $size-2,
+  "sm":  $size-4,
+  "md":  $size-6,
+  "lg":  $size-12,
+  "xl":  $size-16,
+  "2xl": $size-24,
+  "3xl": $size-32
+);

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

@@ -2,6 +2,7 @@
 @import "variables/breakpoints";
 @import "variables/colors";
 @import "variables/effects";
+@import "variables/filters";
 @import "variables/flex";
 @import "variables/grid";
 @import "variables/spacing";

data/lib/sass/zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "0.0.57"
+    VERSION = "1.0.2"
   end
 end

data/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "sass-zero",
-	"version": "0.0.57",
+	"version": "1.0.2",
 	"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.57
+  version: 1.0.2
 platform: ruby
 authors:
 - lazaronixon
 autorequire: 
 bindir: bin
 cert_chain: []
-date: 2022-01-12 00:00:00.000000000 Z
+date: 2022-01-31 00:00:00.000000000 Z
 dependencies: []
 description: 
 email:
@@ -45,6 +45,7 @@ files:
 - app/assets/stylesheets/sass-zero/variables/breakpoints.scss
 - app/assets/stylesheets/sass-zero/variables/colors.scss
 - app/assets/stylesheets/sass-zero/variables/effects.scss
+- app/assets/stylesheets/sass-zero/variables/filters.scss
 - app/assets/stylesheets/sass-zero/variables/flex.scss
 - app/assets/stylesheets/sass-zero/variables/grid.scss
 - app/assets/stylesheets/sass-zero/variables/height.scss