app/assets/stylesheets/sass-zero/breadboard.scss in sass-zero-0.0.42 vs app/assets/stylesheets/sass-zero/breadboard.scss in sass-zero-0.0.43
- old
+ new
@@ -1,74 +1,83 @@
@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;
}
main {
padding-right: $size-2;
padding-left: $size-2;
}
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 {
pointer-events: none;
opacity: $opacity-50;
}
&--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 {
background-color: $transparent;
border-color: $transparent;
}
}
code {
- background-color: $breadboard-background;
+ 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: $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;
& > code {
border-radius: $rounded-none;
@@ -82,55 +91,56 @@
margin: $size-6 $size-0;
}
.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;
padding-right: $size-8;
}
&: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;
}
}
label, legend, dt {
@@ -197,9 +207,22 @@
font-size: $text-lg;
}
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); }