Skip to content

Commit

Permalink
Release v0.6.0
Browse files Browse the repository at this point in the history
  • Loading branch information
@adamlaki
adamlaki committed Apr 18, 2022
1 parent fd105ba commit a47cdf6
Show file tree
Hide file tree
Showing 4 changed files with 83 additions and 61 deletions.
11 changes: 11 additions & 0 deletions CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,16 @@
# Spruce CSS Changelog

## v0.7.0 (2022-04-18)

### Improvements
- Add smaller `line-height` to `.form-description`, `.field-feedback` and `.form-label`.
- Update `transition` properties to use new function.
- Update `.form-control`’s `transition` properties.
- Stylelint: enable underscores in class names and placeholders (BEM).

### Bugfix
- Fix $font-family-* quotes.

## v0.6.0 (2022-04-05)

### New features
Expand Down
129 changes: 70 additions & 59 deletions css/spruce.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -339,79 +339,79 @@ template {
}

:root {
--spruce-base-color-primary: #8660cd;
--spruce-base-color-secondary: #2350f6;
--spruce-base-color-background: white;
--spruce-base-color-heading: #00060a;
--spruce-base-color-text: #474d52;
--spruce-base-color-link: #8660cd;
--spruce-base-color-primary: hsl(261deg, 52%, 59%);
--spruce-base-color-secondary: hsl(227deg, 92%, 55%);
--spruce-base-color-background: hsl(0deg, 0%, 100%);
--spruce-base-color-heading: hsl(205deg, 100%, 2%);
--spruce-base-color-text: hsl(208deg, 7%, 30%);
--spruce-base-color-link: hsl(261deg, 52%, 59%);
--spruce-base-color-link-hover: #663ab7;
--spruce-base-color-border: #e6e6e6;
--spruce-base-color-mark-background: #ffee99;
--spruce-base-color-mark-foreground: #00060a;
--spruce-base-color-code-background: #f0ecf9;
--spruce-base-color-code-foreground: #00060a;
--spruce-base-color-blockquote-border: #8660cd;
--spruce-base-color-border: hsl(0deg, 0%, 90%);
--spruce-base-color-mark-background: hsl(50deg, 100%, 80%);
--spruce-base-color-mark-foreground: hsl(205deg, 100%, 2%);
--spruce-base-color-code-background: hsl(261deg, 52%, 95%);
--spruce-base-color-code-foreground: hsl(205deg, 100%, 2%);
--spruce-base-color-blockquote-border: hsl(261deg, 52%, 59%);
}

:root {
--spruce-selection-color-foreground: white;
--spruce-selection-color-background: #8660cd;
--spruce-selection-color-foreground: hsl(0deg, 0%, 100%);
--spruce-selection-color-background: hsl(261deg, 52%, 59%);
}

:root {
--spruce-alert-color-danger: #db2929;
--spruce-alert-color-info: #00a1d6;
--spruce-alert-color-success: #00a854;
--spruce-alert-color-warning: #f2ca26;
--spruce-alert-color-danger: hsl(0deg, 71%, 51%);
--spruce-alert-color-info: hsl(195deg, 100%, 42%);
--spruce-alert-color-success: hsl(150deg, 100%, 33%);
--spruce-alert-color-warning: hsl(48deg, 89%, 55%);
}

:root {
--spruce-btn-color-primary-background: #8660cd;
--spruce-btn-color-primary-background: hsl(261deg, 52%, 59%);
--spruce-btn-color-primary-background-hover: #543097;
--spruce-btn-color-primary-foreground: white;
--spruce-btn-color-primary-foreground-hover: white;
--spruce-btn-color-primary-foreground: hsl(0deg, 0%, 100%);
--spruce-btn-color-primary-foreground-hover: hsl(0deg, 0%, 100%);
--spruce-btn-color-primary-shadow-focus: rgba(134, 96, 205, 0.25);
--spruce-btn-color-secondary-background: #2350f6;
--spruce-btn-color-secondary-background: hsl(227deg, 92%, 55%);
--spruce-btn-color-secondary-background-hover: #072bab;
--spruce-btn-color-secondary-foreground: white;
--spruce-btn-color-secondary-foreground-hover: white;
--spruce-btn-color-secondary-foreground: hsl(0deg, 0%, 100%);
--spruce-btn-color-secondary-foreground-hover: hsl(0deg, 0%, 100%);
--spruce-btn-color-secondary-shadow-focus: rgba(35, 80, 246, 0.25);
}

:root {
--spruce-form-color-background: white;
--spruce-form-color-background-disabled: #f2f2f2;
--spruce-form-color-border: #e6e6e6;
--spruce-form-color-border-disabled: #e6e6e6;
--spruce-form-color-border-focus: #8660cd;
--spruce-form-color-background: hsl(0deg, 0%, 100%);
--spruce-form-color-background-disabled: hsl(0deg, 0%, 95%);
--spruce-form-color-border: hsl(0deg, 0%, 90%);
--spruce-form-color-border-disabled: hsl(0deg, 0%, 90%);
--spruce-form-color-border-focus: hsl(261deg, 52%, 59%);
--spruce-form-color-shadow-focus: rgba(134, 96, 205, 0.25);
--spruce-form-color-check-foreground: white;
--spruce-form-color-check-background: #8660cd;
--spruce-form-color-invalid: #db2929;
--spruce-form-color-check-foreground: hsl(0deg, 0%, 100%);
--spruce-form-color-check-background: hsl(261deg, 52%, 59%);
--spruce-form-color-invalid: hsl(0deg, 71%, 51%);
--spruce-form-color-invalid-shadow: rgba(219, 41, 41, 0.25);
--spruce-form-color-label: #00060a;
--spruce-form-color-legend: #00060a;
--spruce-form-color-placeholder: #5f666d;
--spruce-form-color-text: #474d52;
--spruce-form-color-select-foreground: #8660cd;
--spruce-form-color-valid: #00a854;
--spruce-form-color-label: hsl(205deg, 100%, 2%);
--spruce-form-color-legend: hsl(205deg, 100%, 2%);
--spruce-form-color-placeholder: hsl(208deg, 7%, 40%);
--spruce-form-color-text: hsl(208deg, 7%, 30%);
--spruce-form-color-select-foreground: hsl(261deg, 52%, 59%);
--spruce-form-color-valid: hsl(150deg, 100%, 33%);
--spruce-form-color-valid-shadow: rgba(0, 168, 84, 0.25);
}

:root {
--spruce-table-color-border: #e6e6e6;
--spruce-table-color-caption: #474d52;
--spruce-table-color-heading: #00060a;
--spruce-table-color-hover: rgba(0, 0, 0, 0.05);
--spruce-table-color-text: #474d52;
--spruce-table-color-stripe: rgba(0, 0, 0, 0.025);
--spruce-table-color-border: hsl(0deg, 0%, 90%);
--spruce-table-color-caption: hsl(208deg, 7%, 30%);
--spruce-table-color-heading: hsl(205deg, 100%, 2%);
--spruce-table-color-hover: hsla(0deg, 0%, 0%, 0.05);
--spruce-table-color-text: hsl(208deg, 7%, 30%);
--spruce-table-color-stripe: hsla(0deg, 0%, 0%, 0.025);
}

:root {
--spruce-scrollbar-color-thumb-background: rgba(0, 0, 0, 0.15);
--spruce-scrollbar-color-thumb-background-hover: rgba(0, 0, 0, 0.25);
--spruce-scrollbar-color-track-background: rgba(0, 0, 0, 0.05);
--spruce-scrollbar-color-thumb-background: hsla(0deg, 0%, 0%, 0.15);
--spruce-scrollbar-color-thumb-background-hover: hsla(0deg, 0%, 0%, 0.25);
--spruce-scrollbar-color-track-background: hsla(0deg, 0%, 0%, 0.05);
}

:root {
Expand Down Expand Up @@ -471,7 +471,9 @@ body {
a {
color: var(--spruce-base-color-link);
text-decoration: underline;
transition: color var(--spruce-transition-duration) var(--spruce-transition-timing-function);
transition-duration: var(--spruce-transition-duration);
transition-property: color;
transition-timing-function: var(--spruce-transition-timing-function);
}
a:hover {
color: var(--spruce-base-color-link-hover);
Expand Down Expand Up @@ -580,7 +582,7 @@ figure figcaption {
}

body {
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-size: 1rem;
line-height: 1.8;
}
Expand All @@ -606,7 +608,7 @@ h4,
h5,
h6 {
color: var(--spruce-base-color-heading);
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica Neue, Arial, Noto Sans, Liberation Sans, sans-serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol, Noto Color Emoji;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
font-weight: 700;
line-height: calc(2px + 2ex + 2px);
}
Expand Down Expand Up @@ -741,7 +743,9 @@ samp {
padding: 0.75em 1em;
text-align: start;
text-decoration: none;
transition: all var(--spruce-transition-duration) var(--spruce-transition-timing-function);
transition-duration: var(--spruce-transition-duration);
transition-property: background-color, box-shadow, color;
transition-timing-function: var(--spruce-transition-timing-function);
}
.btn:focus {
outline-color: transparent;
Expand Down Expand Up @@ -840,7 +844,9 @@ samp {
margin-bottom: -0.1em;
-webkit-margin-end: 0.5rem;
margin-inline-end: 0.5rem;
transition: all var(--spruce-transition-duration) var(--spruce-transition-timing-function);
transition-duration: var(--spruce-transition-duration);
transition-property: background-color, border, box-shadow;
transition-timing-function: var(--spruce-transition-timing-function);
width: 1em;
}
.form-check__control[type=radio] {
Expand All @@ -859,13 +865,13 @@ samp {
border-color: var(--spruce-form-color-check-background);
}
.form-check__control:checked[type=radio] {
background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="12" cy="12" r="6" style="fill:white;"/%3e%3c/svg%3e');
background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3ccircle cx="12" cy="12" r="6" style="fill:hsl%280deg, 0%, 100%%29;"/%3e%3c/svg%3e');
}
.form-check__control:checked[type=checkbox] {
background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M9.525,13.777l-2.411,-2.412c-0.234,-0.233 -0.613,-0.233 -0.846,0l-1.27,1.27c-0.233,0.233 -0.233,0.612 0,0.846l4.104,4.103c0.116,0.117 0.269,0.175 0.422,0.175l0.003,0c0.152,0 0.305,-0.058 0.421,-0.175l9.054,-9.053c0.233,-0.234 0.233,-0.613 -0,-0.846l-1.27,-1.269c-0.233,-0.234 -0.612,-0.234 -0.846,-0l-7.361,7.361Z" style="fill:white;"/%3e%3c/svg%3e');
background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M9.525,13.777l-2.411,-2.412c-0.234,-0.233 -0.613,-0.233 -0.846,0l-1.27,1.27c-0.233,0.233 -0.233,0.612 0,0.846l4.104,4.103c0.116,0.117 0.269,0.175 0.422,0.175l0.003,0c0.152,0 0.305,-0.058 0.421,-0.175l9.054,-9.053c0.233,-0.234 0.233,-0.613 -0,-0.846l-1.27,-1.269c-0.233,-0.234 -0.612,-0.234 -0.846,-0l-7.361,7.361Z" style="fill:hsl%280deg, 0%, 100%%29;"/%3e%3c/svg%3e');
}
.form-check__control:indeterminate[type=checkbox] {
background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M19.5,11.1c-0,-0.331 -0.269,-0.6 -0.6,-0.6l-13.8,0c-0.331,0 -0.6,0.269 -0.6,0.6l0,1.8c0,0.331 0.269,0.6 0.6,0.6l13.8,0c0.331,0 0.6,-0.269 0.6,-0.6l-0,-1.8Z" style="fill:white;"/%3e%3c/svg%3e');
background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M19.5,11.1c-0,-0.331 -0.269,-0.6 -0.6,-0.6l-13.8,0c-0.331,0 -0.6,0.269 -0.6,0.6l0,1.8c0,0.331 0.269,0.6 0.6,0.6l13.8,0c0.331,0 0.6,-0.269 0.6,-0.6l-0,-1.8Z" style="fill:hsl%280deg, 0%, 100%%29;"/%3e%3c/svg%3e');
background-color: var(--spruce-form-color-check-background);
border-color: var(--spruce-form-color-check-background);
}
Expand Down Expand Up @@ -895,7 +901,9 @@ samp {
font-size: 1rem;
line-height: 1.5;
padding: 0.5em 0.75em;
transition: all var(--spruce-transition-duration) var(--spruce-transition-timing-function);
transition-duration: var(--spruce-transition-duration);
transition-property: border, box-shadow;
transition-timing-function: var(--spruce-transition-timing-function);
width: 100%;
}
.form-control::-moz-placeholder {
Expand Down Expand Up @@ -928,7 +936,7 @@ html[dir=rtl] .form-control--valid, html[dir=rtl] .form-control--invalid {
background-position: center left 0.5em;
}
.form-control--valid {
background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"%3e%3cpath d="M12,2c5.519,0 10,4.481 10,10c0,5.519 -4.481,10 -10,10c-5.519,0 -10,-4.481 -10,-10c0,-5.519 4.481,-10 10,-10Zm0,1.667c4.599,-0 8.333,3.734 8.333,8.333c0,4.599 -3.734,8.333 -8.333,8.333c-4.599,0 -8.333,-3.734 -8.333,-8.333c-0,-4.599 3.734,-8.333 8.333,-8.333Zm-1.476,10.182l-2.984,-2.984c-0.065,-0.065 -0.17,-0.065 -0.235,0l-0.943,0.943c-0.065,0.065 -0.065,0.171 -0,0.236l4.043,4.042c0.033,0.033 0.076,0.05 0.119,0.049c0.044,0.001 0.087,-0.016 0.12,-0.049l6.994,-6.994c0.065,-0.065 0.065,-0.17 0,-0.235l-0.943,-0.943c-0.065,-0.065 -0.17,-0.065 -0.235,-0l-5.936,5.935Z" style="fill:%2300a854;"/%3e%3c/svg%3e');
background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"%3e%3cpath d="M12,2c5.519,0 10,4.481 10,10c0,5.519 -4.481,10 -10,10c-5.519,0 -10,-4.481 -10,-10c0,-5.519 4.481,-10 10,-10Zm0,1.667c4.599,-0 8.333,3.734 8.333,8.333c0,4.599 -3.734,8.333 -8.333,8.333c-4.599,0 -8.333,-3.734 -8.333,-8.333c-0,-4.599 3.734,-8.333 8.333,-8.333Zm-1.476,10.182l-2.984,-2.984c-0.065,-0.065 -0.17,-0.065 -0.235,0l-0.943,0.943c-0.065,0.065 -0.065,0.171 -0,0.236l4.043,4.042c0.033,0.033 0.076,0.05 0.119,0.049c0.044,0.001 0.087,-0.016 0.12,-0.049l6.994,-6.994c0.065,-0.065 0.065,-0.17 0,-0.235l-0.943,-0.943c-0.065,-0.065 -0.17,-0.065 -0.235,-0l-5.936,5.935Z" style="fill:hsl%28150deg, 100%, 33%%29;"/%3e%3c/svg%3e');
border-color: var(--spruce-alert-color-success);
}
.form-control--valid:focus {
Expand All @@ -937,7 +945,7 @@ html[dir=rtl] .form-control--valid, html[dir=rtl] .form-control--invalid {
outline: 2px solid transparent;
}
.form-control--invalid {
background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"%3e%3cpath d="M12,2c5.519,0 10,4.481 10,10c0,5.519 -4.481,10 -10,10c-5.519,0 -10,-4.481 -10,-10c0,-5.519 4.481,-10 10,-10Zm0,1.667c4.599,-0 8.333,3.734 8.333,8.333c0,4.599 -3.734,8.333 -8.333,8.333c-4.599,0 -8.333,-3.734 -8.333,-8.333c-0,-4.599 3.734,-8.333 8.333,-8.333Zm0.813,11.649c-0,-0.081 -0.065,-0.146 -0.146,-0.146l-1.334,0c-0.081,0 -0.146,0.065 -0.146,0.146l0,1.169c0,0.08 0.065,0.146 0.146,0.146l1.334,-0c0.081,-0 0.146,-0.066 0.146,-0.146l-0,-1.169Zm-0,-7.784c-0,-0.09 -0.073,-0.163 -0.163,-0.163l-1.3,0c-0.09,0 -0.163,0.073 -0.163,0.163l0,6.351c0,0.09 0.073,0.163 0.163,0.163l1.3,-0c0.09,-0 0.163,-0.073 0.163,-0.163l-0,-6.351Z" style="fill:%23db2929;"/%3e%3c/svg%3e');
background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"%3e%3cpath d="M12,2c5.519,0 10,4.481 10,10c0,5.519 -4.481,10 -10,10c-5.519,0 -10,-4.481 -10,-10c0,-5.519 4.481,-10 10,-10Zm0,1.667c4.599,-0 8.333,3.734 8.333,8.333c0,4.599 -3.734,8.333 -8.333,8.333c-4.599,0 -8.333,-3.734 -8.333,-8.333c-0,-4.599 3.734,-8.333 8.333,-8.333Zm0.813,11.649c-0,-0.081 -0.065,-0.146 -0.146,-0.146l-1.334,0c-0.081,0 -0.146,0.065 -0.146,0.146l0,1.169c0,0.08 0.065,0.146 0.146,0.146l1.334,-0c0.081,-0 0.146,-0.066 0.146,-0.146l-0,-1.169Zm-0,-7.784c-0,-0.09 -0.073,-0.163 -0.163,-0.163l-1.3,0c-0.09,0 -0.163,0.073 -0.163,0.163l0,6.351c0,0.09 0.073,0.163 0.163,0.163l1.3,-0c0.09,-0 0.163,-0.073 0.163,-0.163l-0,-6.351Z" style="fill:hsl%280deg, 71%, 51%%29;"/%3e%3c/svg%3e');
border-color: var(--spruce-alert-color-danger);
}
.form-control--invalid:focus {
Expand All @@ -955,7 +963,7 @@ html[dir=rtl] .form-control--valid, html[dir=rtl] .form-control--invalid {
}

select.form-control:not([multiple]):not([size]) {
background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12,12.692l-5.203,-5.203c-0.234,-0.234 -0.614,-0.234 -0.849,0l-1.272,1.273c-0.235,0.234 -0.235,0.614 -0,0.849l6.9,6.9c0.234,0.234 0.614,0.234 0.848,-0l6.9,-6.9c0.235,-0.235 0.235,-0.615 0,-0.849l-1.272,-1.273c-0.235,-0.234 -0.615,-0.234 -0.849,0l-5.203,5.203Z" style="fill:%238660cd;"/%3e%3c/svg%3e');
background-image: url('data:image/svg+xml,%3csvg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"%3e%3cpath d="M12,12.692l-5.203,-5.203c-0.234,-0.234 -0.614,-0.234 -0.849,0l-1.272,1.273c-0.235,0.234 -0.235,0.614 -0,0.849l6.9,6.9c0.234,0.234 0.614,0.234 0.848,-0l6.9,-6.9c0.235,-0.235 0.235,-0.615 0,-0.849l-1.272,-1.273c-0.235,-0.234 -0.615,-0.234 -0.849,0l-5.203,5.203Z" style="fill:hsl%28261deg, 52%, 59%%29;"/%3e%3c/svg%3e');
background-position: center right 0.5em;
background-repeat: no-repeat;
background-size: 1.25em auto;
Expand All @@ -970,6 +978,7 @@ html[dir=rtl] select.form-control:not([multiple]):not([size]) {
color: var(--spruce-form-color-text);
display: block;
font-size: 1rem;
line-height: 1.5;
}

fieldset {
Expand Down Expand Up @@ -1031,6 +1040,7 @@ legend {

.form-label {
color: var(--spruce-form-color-label);
line-height: 1.5;
}
.form-label--sm {
font-size: 0.9rem;
Expand All @@ -1051,6 +1061,7 @@ legend {

.field-feedback {
display: block;
line-height: 1.5;
}
.field-feedback--valid {
color: var(--spruce-alert-color-success);
Expand Down
Loading

0 comments on commit a47cdf6

Please sign in to comment.