sass-zero 0.0.42 → 0.0.43

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. checksums.yaml +4 -4
  2. data/README.md +2 -2
  3. data/app/assets/stylesheets/sass-zero/breadboard.scss +45 -22
  4. data/app/assets/stylesheets/sass-zero/utilities/text.scss +0 -4
  5. data/app/assets/stylesheets/sass-zero/variables/effects.scss +3 -5
  6. data/lib/sass/zero/version.rb +1 -1
  7. data/package.json +1 -1
  8. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 4fc89d490e508588c32e7a8d2f24e710cbc47797e677b2f0f882a7de040f78c5
4
- data.tar.gz: 5af7f7563084b499eae3695a8a10e49cda92339c3fb1f1a42d779250c5741a40
3
+ metadata.gz: 06e133db6d4914987dbc2d77f08bcdd1671ad91fd57debe8c720330bfb708cb0
4
+ data.tar.gz: def1eda7c32c8f426ebb2b0bd43608e3b15ff917e88abb5056c67e07d8633004
5
5
  SHA512:
6
- metadata.gz: a8dc51d7f79fdaca2cddb60a27b736ad3d63b88a42bf6335e9616f3c838643bcbbac42b2cb8bd76e15459e4757ad53e458e58a1d3038c5b68abe739bd744facb
7
- data.tar.gz: 2fea0ea3d5ad4206e2c982a1c0dc8cba68c852b359406bfaee4746ff932697172f6f1e33aead8ffb2ab3e881a06818c80d773c417146c631704617095ca5fe51
6
+ metadata.gz: 4ad3cb7aad00280da0c4777c1fb10308c77dee3b58855c17aaa193215c320768cfec6906bbd1eb988dd5c498431eb29b46f0223cc4902f643803d9b0470b6861
7
+ data.tar.gz: 8544b5ce046ca7f5742c1e1212fb41d1c65d58829341f741f2d3db3305313f9644df84403299dc59aafcae3240c7f3764136f4eb2bf2a4ca47145b1f399f0e1f
data/README.md CHANGED
@@ -31,7 +31,7 @@ Developers should be able to produce your own design, [Refactoring UI](https://r
31
31
  ### Breadboard Theme
32
32
 
33
33
  - [Example](https://github.com/lazaronixon/sass-zero/blob/master/Example.html)
34
- - [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/base/breadboard.scss)
34
+ - [Breadboard](https://github.com/lazaronixon/sass-zero/blob/master/app/assets/stylesheets/sass-zero/breadboard.scss)
35
35
 
36
36
  ### Variables
37
37
 
@@ -78,7 +78,7 @@ Add this line to your application.css:
78
78
  ```css
79
79
  *= require sass-zero/base
80
80
  *= require sass-zero/utilities
81
- *= require sass-zero/breadboard
81
+ *= require sass-zero/breadboard
82
82
  ```
83
83
 
84
84
  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 CHANGED
@@ -1,10 +1,20 @@
1
1
  @import "sass-zero/variables";
2
2
  @import "sass-zero/mixins";
3
3
 
4
- $breadboard-primary: $gray-900;
5
- $breadboard-background: $gray-100;
4
+ :root {
5
+ --color-bg--main: #{$white};
6
+ --color-bg--surface: #{$gray-100};
7
+ --color-primary: #{$gray-900};
8
+ --color-txt: #{$gray-900};
9
+ --color-focus-ring: #{rgba($gray-900, 0.5)};
10
+ --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>');
11
+ --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>');
12
+ --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>');
13
+ }
6
14
 
7
15
  html {
16
+ background: var(--color-bg--main);
17
+ color: var(--color-txt);
8
18
  font-size: 14px;
9
19
  }
10
20
 
@@ -14,23 +24,22 @@ main {
14
24
  }
15
25
 
16
26
  blockquote {
17
- border-color: $breadboard-primary;
27
+ border-color: var(--color-primary);
18
28
  border-left-width: $border-4;
19
29
  padding: $size-3 $size-4;
20
30
  }
21
31
 
22
32
  .btn {
23
- background-color: $white;
24
33
  border-radius: $rounded;
25
34
  border-width: $border;
26
- color: $breadboard-primary;
27
35
  display: inline-block;
28
36
  font-weight: $font-bold;
29
37
  padding: $size-2 $size-4;
30
38
  cursor: pointer;
31
39
 
32
40
  &:focus {
33
- @include outline-black;
41
+ outline: 2px dotted var(--color-primary);
42
+ outline-offset: 2px;
34
43
  }
35
44
 
36
45
  &:disabled {
@@ -39,14 +48,14 @@ blockquote {
39
48
  }
40
49
 
41
50
  &--primary {
42
- background-color: $breadboard-primary;
43
- border-color: $breadboard-primary;
44
- color: $white;
51
+ background-color: var(--color-primary);
52
+ border-color: var(--color-primary);
53
+ color: var(--color-bg--main);
45
54
  }
46
55
 
47
56
  &--secondary {
48
- border-color: $breadboard-primary;
49
- background-color: $white;
57
+ background-color: var(--color-bg--main);
58
+ border-color: var(--color-primary);
50
59
  }
51
60
 
52
61
  &--tertiary {
@@ -56,7 +65,7 @@ blockquote {
56
65
  }
57
66
 
58
67
  code {
59
- background-color: $breadboard-background;
68
+ background-color: var(--color-bg--surface);
60
69
  border-radius: $rounded;
61
70
  font-size: $text-sm;
62
71
  margin: $size-0 $size-1;
@@ -65,8 +74,8 @@ code {
65
74
  }
66
75
 
67
76
  pre {
68
- background-color: $breadboard-background;
69
- border-color: $breadboard-primary;
77
+ background-color: var(--color-bg--surface);
78
+ border-color: var(--color-primary);
70
79
  border-left-width: $border-4;
71
80
  overflow-y: hidden;
72
81
 
@@ -84,13 +93,14 @@ hr {
84
93
 
85
94
  .input {
86
95
  appearance: none;
96
+ background-color: $transparent;
87
97
  border-radius: $rounded;
88
98
  border-width: $border;
89
99
  padding: $size-2 $size-3;
90
100
  width: $size-full;
91
101
 
92
102
  &--select {
93
- 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>');
103
+ background-image: var(--image-bg-select);
94
104
  background-position: right $size-2 center;
95
105
  background-repeat: no-repeat;
96
106
  background-size: auto $size-5;
@@ -98,37 +108,37 @@ hr {
98
108
  }
99
109
 
100
110
  &:focus {
101
- box-shadow: ring($color: $breadboard-primary);
111
+ box-shadow: ring($color: var(--color-focus-ring));
102
112
  @include outline-none;
103
113
  }
104
114
  }
105
115
 
106
116
  .checkbox {
107
117
  border-radius: $rounded;
108
- @include input-selection($breadboard-primary);
118
+ @include input-selection(var(--color-primary));
109
119
 
110
120
  &:checked {
111
- 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>');
121
+ background-image: var(--image-checked-checkbox);
112
122
  @include checked;
113
123
  }
114
124
 
115
125
  &:focus {
116
- box-shadow: ring($color: $breadboard-primary);
126
+ box-shadow: ring($color: var(--color-focus-ring));
117
127
  @include outline-none;
118
128
  }
119
129
  }
120
130
 
121
131
  .radio {
122
132
  border-radius: $rounded-full;
123
- @include input-selection($breadboard-primary);
133
+ @include input-selection(var(--color-primary));
124
134
 
125
135
  &:checked {
126
- 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>');
136
+ background-image: var(--image-checked-radio);
127
137
  @include checked;
128
138
  }
129
139
 
130
140
  &:focus {
131
- box-shadow: ring($color: $breadboard-primary);
141
+ box-shadow: ring($color: var(--color-focus-ring));
132
142
  @include outline-none;
133
143
  }
134
144
  }
@@ -201,6 +211,19 @@ h6, .hdg--base {
201
211
  font-size: $text-base;
202
212
  }
203
213
 
214
+ @media (prefers-color-scheme: dark) {
215
+ :root {
216
+ --color-bg--main: #{$gray-900};
217
+ --color-bg--surface: #{$gray-800};
218
+ --color-primary: #{$white};
219
+ --color-txt: #{$white};
220
+ --color-focus-ring: #{rgba($gray-100, 0.5)};
221
+ --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>');
222
+ --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>');
223
+ --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>');
224
+ }
225
+ }
226
+
204
227
  @media (min-width: $breakpoint-md) {
205
228
  html { font-size: 16px; }
206
229
  main { @include make-container($size-10, $breakpoint-xl); }
data/app/assets/stylesheets/sass-zero/utilities/text.scss CHANGED
@@ -101,10 +101,6 @@
101
101
  color: $gray-700;
102
102
  }
103
103
 
104
- .txt--very-subtle {
105
- color: $gray-600;
106
- }
107
-
108
104
  .txt--underline {
109
105
  text-decoration: underline;
110
106
  }
data/app/assets/stylesheets/sass-zero/variables/effects.scss CHANGED
@@ -38,16 +38,14 @@ $opacity-100: 1;
38
38
  // Utilities for creating outline rings with box-shadows.
39
39
  // box-shadow: ring($width: 4px);
40
40
  // *******************************************************************
41
- @function ring($width: 3px, $color: $blue-500, $offset-width: 0px, $offset-color: $white, $opacity: 0.5, $inset: false) {
42
- $ring-color: rgba($color, $opacity);
43
-
41
+ @function ring($width: 3px, $color: rgba($blue-500, 0.5), $offset-width: 0px, $offset-color: $white, $inset: false) {
44
42
  @if $inset {
45
43
  $ring-offset-shadow: inset 0 0 0 $offset-width $offset-color;
46
- $ring-shadow: inset 0 0 0 ($width + $offset-width) $ring-color;
44
+ $ring-shadow: inset 0 0 0 ($width + $offset-width) $color;
47
45
  @return $ring-offset-shadow, $ring-shadow, 0 0 #0000;
48
46
  } @else {
49
47
  $ring-offset-shadow: 0 0 0 $offset-width $offset-color;
50
- $ring-shadow: 0 0 0 ($width + $offset-width) $ring-color;
48
+ $ring-shadow: 0 0 0 ($width + $offset-width) $color;
51
49
  @return $ring-offset-shadow, $ring-shadow, 0 0 #0000;
52
50
  }
53
51
  }
data/lib/sass/zero/version.rb CHANGED
@@ -1,5 +1,5 @@
1
1
  module Sass
2
2
  module Zero
3
- VERSION = "0.0.42"
3
+ VERSION = "0.0.43"
4
4
  end
5
5
  end
data/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "sass-zero",
3
- "version": "0.0.42",
3
+ "version": "0.0.43",
4
4
  "description": "A CSS framework for rapid UI development based on tailwindcss, miligram and BEM.",
5
5
  "homepage": "https://github.com/lazaronixon/sass-zero",
6
6
  "repository": "lazaronixon/sass-zero",
metadata CHANGED
@@ -1,14 +1,14 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: sass-zero
3
3
  version: !ruby/object:Gem::Version
4
- version: 0.0.42
4
+ version: 0.0.43
5
5
  platform: ruby
6
6
  authors:
7
7
  - lazaronixon
8
8
  autorequire:
9
9
  bindir: bin
10
10
  cert_chain: []
11
- date: 2020-12-13 00:00:00.000000000 Z
11
+ date: 2020-12-15 00:00:00.000000000 Z
12
12
  dependencies:
13
13
  - !ruby/object:Gem::Dependency
14
14
  name: autoprefixer-rails