sass-zero 1.2.0 → 1.2.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: ba90537c1863378335ab5d75f4bbec2b40cadfbfe9a411ef8e9eecea7cd61b05
-  data.tar.gz: 60bd88b0235a72815efabf572dcd74e84d80e89e76cf62d8c11b22a9745aeee7
+  metadata.gz: 1a26aefa62e61441b5d4fee85a87cb5f84f46cabca144bf8f23f40005c20e9e3
+  data.tar.gz: caafc10d6e32d80c05a1e9aac2cb39925d080d254a3b672e1be5cf3c71d5d333
 SHA512:
-  metadata.gz: aa3f62f922ef34285d8e76a20dd36ee5b5efedcda713bed5fce70781fc3e7007adc1ba32bdd487285ea09ae602c6691edb1d1338f01dfcb82b8cd66f597e6611
-  data.tar.gz: 9f72e0f2ef60bccdf82009276a423ede2c88be2ba3a9e238a05060bd82e47c8e168a382977230644f7616c125ddd6145913cc967b9f738407034db0f1bcabdb9
+  metadata.gz: dc6970b49c3917c35673b82496b8a962502dac89ae655c9e1e41a28198067c8989b8fc6c50209036cfedc1e85b3dee90e0d178111fa2e0f32e1750a5076fa0d7
+  data.tar.gz: 0752702cc2605c8c830eb58065e096a0043bc0139e76af7c11101f575bf93a622bd3f80e9a0a5a04f552d68894eae2d346d459f14db37a8b2766637995dafc52

data/.sass-zero-references.scss

@@ -280,6 +280,8 @@ $blue-gray-700: #334155;
 $blue-gray-800: #1e293b;
 $blue-gray-900: #0f172a;
 
+@function gradient($direction, $from, $to: transparent, $via: null) {}
+
 // *******************************************************************
 // Effects
 // *******************************************************************
@@ -724,4 +726,3 @@ $z-50:   50;
 @mixin outline-none {}
 @mixin progress-bar {}
 @mixin make-container($padding-x: $size-4) {}
-@mixin gradient($direction, $from, $to: transparent, $via: null) {}

data/Gemfile.lock

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

data/README.md

@@ -65,10 +65,10 @@ This can be useful for dealing with similar components, and positioning.
 
 ## Breadboard
 
-This is an optional grayscale theme that you can use as design foundation.
+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.
 
 - [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/breadboard.scss)
-- [Screenshot](https://nixo-etc.s3-sa-east-1.amazonaws.com/sass-zero-screenshot-3.png)
+- [Screenshot](screenshot.png)
 - [Example](https://github.com/lazaronixon/sass-zero/blob/master/example.html)
 
 ## Using variables
@@ -124,11 +124,12 @@ Create some stylesheet using [BEM](http://getbem.com/naming) and [SASS-ZERO Vari
 
 When you are sure about the style of your application you should make a copy of `breadboard.scss` and customize fonts, borders, and colors.
 
-You will need to remove the original breadboard from application.css:
+You will need to replace the original breadboard in application.css:
 
 ```css
 *= require sass-zero/base
 *= require sass-zero/utilities
+*= require design-system/breadboard
 ```
 
 ### Variables
@@ -142,6 +143,10 @@ Instead of using the default variables you can add more or change the existents,
 ...
 ```
 
+## References
+
+[The 35 CSS properties you must know to do 80% of the work](https://github.com/lazaronixon/css-properties-counter)
+
 ## Development
 
 To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and the created tag, and push the `.gem` file to [rubygems.org](https://rubygems.org).

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

@@ -38,11 +38,3 @@
   margin-right: auto;
   margin-left: auto;
 }
-
-@mixin gradient($direction, $from, $to: transparent, $via: null) {
-  @if $via {
-    background-image: linear-gradient($direction, $from, $via, $to);
-  } @else {
-    background-image: linear-gradient($direction, $from, $to);
-  }
-}

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

@@ -7,10 +7,11 @@ $radius-primary:   $rounded;
 $radius-secondary: $rounded;
 
 :root {
-  --color-bg--main:      #{$white};
-  --color-bg--surface:   #{$gray-100};
+  --color-bg--main:      #{$gray-100};
+  --color-bg--surface:   #{$white};
   --color-bg--highlight: #{$gray-200};
-  --color-primary:       #{$gray-900};
+  --color-border:        #{$gray-300};
+  --color-primary:       #{$gray-800};
   --color-text:          #{$gray-900};
 }
 
@@ -19,11 +20,16 @@ $radius-secondary: $rounded;
     --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};
   }
 }
 
+*, ::before, ::after {
+  border-color: var(--color-border);
+}
+
 html {
   accent-color: var(--color-primary);
   background: var(--color-bg--main);
@@ -35,18 +41,17 @@ html {
   border-radius: $radius-primary;
   border-width: $border;
   display: inline-block;
-  font-weight: $font-bold;
   padding: $size-2 $size-3;
   cursor: pointer;
 
   &--primary {
     background-color: var(--color-primary);
     border-color: var(--color-primary);
-    color: var(--color-bg--main);
+    color: var(--color-bg--surface);
   }
 
   &--secondary {
-    background-color: var(--color-bg--main);
+    background-color: var(--color-bg--surface);
     border-color: var(--color-primary);
   }
 
@@ -73,7 +78,7 @@ html {
 .input {
   appearance: none;
   resize: none;
-  background-color: var(--color-bg--main);
+  background-color: var(--color-bg--surface);
   border-radius: $radius-secondary;
   border-width: $border;
   padding: $size-2 $size-3;
@@ -94,8 +99,8 @@ html {
   }
 }
 
-.popup-menu {
-  background-color: var(--color-bg--main);
+.dropdown {
+  background-color: var(--color-bg--surface);
   border-width: $border; border-radius: $radius-primary;
   padding: $size-3 $size-4;
   box-shadow: $shadow-lg;
@@ -113,7 +118,7 @@ blockquote {
 }
 
 code {
-  background-color: var(--color-bg--surface);
+  background-color: var(--color-bg--main);
   border-radius: $rounded;
   font-size: $text-sm;
   padding: $size-1;
@@ -121,7 +126,7 @@ code {
 }
 
 pre {
-  background-color: var(--color-bg--surface);
+  background-color: var(--color-bg--main);
   border-left-width: $border-4;
   overflow-y: hidden;
 
@@ -152,10 +157,6 @@ hr {
   margin: $size-6 $size-0;
 }
 
-a {
-  font-weight: $font-bold;
-}
-
 menu, ul, ol {
   padding-left: $size-10;
 }
@@ -189,7 +190,7 @@ table, progress, blockquote, figure, pre, menu, ul, ol, dl, p {
 }
 
 dialog {
-  background-color: var(--color-bg--main);
+  background-color: var(--color-bg--surface);
   border-width: $border; border-radius: $radius-primary;
   padding: $size-3 $size-4;
   box-shadow: $shadow-lg;
@@ -201,7 +202,7 @@ dialog::backdrop {
 }
 
 progress {
-  background-color: var(--color-bg--surface);
+  background-color: var(--color-bg--main);
 }
 
 @include progress-bar {

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

@@ -6,31 +6,31 @@
 }
 
 @media (min-width: $breakpoint-sm) {
-  .container {
+  .container--sm {
     max-width: $breakpoint-sm;
   }
 }
 
 @media (min-width: $breakpoint-md) {
-  .container {
+  .container--md {
     max-width: $breakpoint-md;
   }
 }
 
 @media (min-width: $breakpoint-lg) {
-  .container {
+  .container--lg {
     max-width: $breakpoint-lg;
   }
 }
 
 @media (min-width: $breakpoint-xl) {
-  .container {
+  .container--xl {
     max-width: $breakpoint-xl;
   }
 }
 
 @media (min-width: $breakpoint-2xl) {
-  .container {
+  .container--2xl {
     max-width: $breakpoint-2xl;
   }
 }

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

@@ -1,6 +1,6 @@
 // *******************************************************************
-// Default color palette
-// Sass-zero includes an expertly-crafted default color palette
+// Default Color Palette
+// SASS-ZERO includes an expertly-crafted default color palette
 // out-of-the-box that is a great starting point if you don’t
 // have your own specific branding in mind.
 // *******************************************************************
@@ -251,3 +251,16 @@ $blue-gray-600: #475569;
 $blue-gray-700: #334155;
 $blue-gray-800: #1e293b;
 $blue-gray-900: #0f172a;
+
+// *******************************************************************
+// Gradient function
+// Function for creating gradient colors.
+// background: gradient(to right, $indigo-500);
+// *******************************************************************
+@function gradient($direction, $from, $to: transparent, $via: null) {
+  @if $via {
+    @return linear-gradient($direction, $from, $via, $to);
+  } @else {
+    @return linear-gradient($direction, $from, $to);
+  }
+}

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

@@ -1,6 +1,6 @@
 // *******************************************************************
 // Default sizing scale
-// By default, sass-zero includes a generous and comprehensive numeric sizing scale.
+// By default, SASS-ZERO includes a generous and comprehensive numeric sizing scale.
 // *******************************************************************
 $size-px: 1px;
 $size-0:  0;

data/example.html

@@ -1,42 +1,49 @@
-<main class="container">
-  <p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
-  <a href="#" class="txt--underline">Anchor</a>
-  <em>Emphasis</em>
-  <small>Small</small>
-  <strong>Strong</strong>
-  <u>Underline</u>
-  <kbd>CTRL+C</kbd>
-  <mark>Highlighted text</mark>
-  <h1>Heading</h1>
-  <h2>Heading</h2>
-  <h3>Heading</h3>
-  <h4>Heading</h4>
-  <h5>Heading</h5>
-  <h6>Heading</h6>
-
-  <button class="btn btn--primary">Button Primary</button>
-  <button class="btn btn--secondary">Button Secondary</button>
-  <button class="btn btn--tertiary">Button Tertiary</button>
-
-  <a href="#" class="btn btn--secondary">Link Button</a>
-
-  <input type="submit" value="Submit Button" class="btn btn--secondary" />
-
-  <details class="u-position-context">
-    <summary class="btn btn--secondary">Popup Button</summary>
-    <div class="popup-menu push-xs--top u-position--right">
-      <ul class="list--unindented u-nowrap flush">
-        <li>Unordered list item 1</li>
-        <li>Unordered list item 2</li>
-        <li>Unordered list item 3</li>
-      </ul>
+<main class="container container--lg" style="background-color: var(--color-bg--surface);">
+  <div class="push-md--bottom">
+    <div class="push-sm--bottom">
+      <p>The base type is 1.6rem (16px) over 1.6 line height (24px)</p>
+      <a href="#" class="txt--underline">Anchor</a>
+      <em>Emphasis</em>
+      <small>Small</small>
+      <strong>Strong</strong>
+      <u>Underline</u>
+      <kbd>CTRL+C</kbd>
+      <mark>Highlighted text</mark>
+    </div>
+
+    <h1>Heading</h1>
+    <h2>Heading</h2>
+    <h3>Heading</h3>
+    <h4>Heading</h4>
+    <h5>Heading</h5>
+    <h6>Heading</h6>
+  </div>
+
+  <div class="push-md--bottom">
+    <div class="push-xs--bottom">
+      <button class="btn btn--primary">Button Primary</button>
+      <button class="btn btn--secondary">Button Secondary</button>
+      <button class="btn btn--tertiary">Button Tertiary</button>
     </div>
-  </details>
 
-  <button class="btn btn--secondary"><span class="btn__icon bx bx-plus"></span> Icon Button</button>
-  <button class="btn btn--secondary btn--small">Small Button</button>
+    <a href="#" class="btn btn--secondary">Link Button</a>
 
-  <hr>
+    <input type="submit" value="Submit Button" class="btn btn--secondary" />
+
+    <details class="u-position-context">
+      <summary class="btn btn--secondary">Dropdown Button</summary>
+      <div class="dropdown push-xs--top u-position--right">
+        <ul class="list--unindented u-nowrap flush">
+          <li>Unordered list item 1</li>
+          <li>Unordered list item 2</li>
+          <li>Unordered list item 3</li>
+        </ul>
+      </div>
+    </details>
+
+    <button class="btn btn--secondary"><span class="btn__icon bx bx-plus"></span> Icon Button</button>
+    <button class="btn btn--secondary btn--small">Small Button</button>
+  </div>
 
   <form class="push-md--bottom">
     <label for="nameField" class="u-display-b txt--bold">Name</label>
@@ -100,9 +107,7 @@
     <input type="submit" value="Send" class="btn btn--primary">
   </form>
 
-  <hr>
-
-  <table>
+  <table class="push-md--bottom">
     <thead>
       <tr>
         <th>Name</th>
@@ -127,54 +132,47 @@
     </tbody>
   </table>
 
+  <div class="push-md--bottom">
+    <ul class="list--unindented">
+      <li>Unordered list item 1</li>
+      <li>Unordered list item 2</li>
+      <li>Unordered list item 3</li>
+    </ul>
+
+    <ol class="list--unindented">
+      <li>Ordered list item 1</li>
+      <li>Ordered list item 2</li>
+      <li>Ordered list item 3</li>
+    </ol>
+
+    <dl>
+      <dd>A description list is perfect for defining terms.</dd>
+      <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem.</dd>
+    </dl>
+  </div>
+
+  <div class="push-md--bottom">
+    <code>.block { color: #9b4dca; }</code>
+  </div>
+
+  <pre><code>.block { color: #9b4dca; }</code></pre>
+
   <blockquote>
     <p class="flush--bottom">Friends don’t spy; true friendship is about privacy, too.</p>
     <cite class="txt--sm">– Stephen King</cite>
   </blockquote>
 
-  <pre><code>.milligram {
-  color: #9b4dca;
-}</code></pre>
-
-  <div class="push-md--bottom">
-    <code>
-    .milligram {
-      color: #9b4dca;
-    }
-    </code>
+  <div>
+    <label for="progress" class="u-display-b txt--bold">Progress</label>
+    <progress id="progress" max="100" value="70">70%</progress>
   </div>
 
-  <div class="push-md--bottom" style="height: 55px;">
+  <div style="height: 55px;">
     <dialog open>
       <form method="dialog">
-        <span>User was successfully created.</span>
+        <span>This is a native dialog with a close button.</span>
         <button type="submit" value="dismiss" class="push-xs--left txt--lg">&times;</button>
       </form>
     </dialog>
   </div>
-
-  <div class="push-md--bottom">
-    <label for="progres" class="u-display-b txt--bold">Progress</label>
-    <progress id="progres" max="100" value="70">70%</progress>
-  </div>
-
-  <hr>
-
-  <ul class="list--unindented">
-    <li>Unordered list item 1</li>
-    <li>Unordered list item 2</li>
-    <li>Unordered list item 3</li>
-  </ul>
-
-  <ol class="list--unindented">
-    <li>Ordered list item 1</li>
-    <li>Ordered list item 2</li>
-    <li>Ordered list item 3</li>
-  </ol>
-
-  <dl>
-    <dt>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>
 </main>

data/lib/sass_zero/version.rb

@@ -1,5 +1,5 @@
 module Sass
   module Zero
-    VERSION = "1.2.0"
+    VERSION = "1.2.2"
   end
 end

metadata

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