Skip to content

Convert stylesheets to use css custom properties #2755

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
edwardloveall wants to merge 40 commits into
base: main
Choose a base branch
from
Open

Convert stylesheets to use css custom properties #2755

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
5fa19db
Convert $base-timing to css custom property
edwardloveall Feb 27, 2025
cbf37df
Convert $base-duration to css custom property
edwardloveall Feb 27, 2025
5085fd7
Introduce base-border-color-hover to avoid scss' color.mix
edwardloveall Mar 11, 2025
e757e0a
Convert $grey-1 to css custom property
edwardloveall Mar 12, 2025
5cb4c4d
Convert $base-border-color to css custom property
edwardloveall Mar 12, 2025
e5fad83
Convert $base-border to css custom property
edwardloveall Mar 12, 2025
1284c92
Convert flash colors to css custom properties
edwardloveall Mar 13, 2025
8c6e768
Convert $focus-outline-offset to css custom property
edwardloveall Mar 15, 2025
53c1346
Convert $focus-outline-color to css custom property
edwardloveall Mar 15, 2025
f6e9f70
Convert $focus-outline-width to css custom property
edwardloveall Mar 15, 2025
0bf1be9
Convert $focus-outline to css custom property
edwardloveall Mar 15, 2025
9765fd1
Introduce base-background-color-alt
edwardloveall Mar 15, 2025
e893cd7
Convert $grey-0 to css custom property
edwardloveall Mar 15, 2025
e8eb385
Convert $base-background-color to css custom property
edwardloveall Mar 15, 2025
7ed4836
Introduce --action-color-active to avoid color-mix
edwardloveall Mar 15, 2025
a922f5c
Convert $action-color to css custom property
edwardloveall Mar 16, 2025
c456ccb
Convert $grey-7 to css custom property
edwardloveall Mar 16, 2025
d1513bf
Convert $base-font-color to css custom property
edwardloveall Mar 16, 2025
c3b440c
Convert $hint-grey to css custom property
edwardloveall Mar 16, 2025
036323c
Convert $grey-5 to css custom property
edwardloveall Mar 16, 2025
18ad946
Remove unused $grey-2 sass variable
edwardloveall Mar 16, 2025
d112b96
Introduce --danger-color-active to avoid color-mix
edwardloveall Mar 16, 2025
5960ae8
Convert $red to css custom property, introduce --danger-color
edwardloveall Mar 16, 2025
f4c935c
Convert $blue to css custom property
edwardloveall Mar 16, 2025
35bf9e1
Introduce --main-content-shadow to work around sass
edwardloveall Mar 16, 2025
c2d1fae
Rename grey-1 to grey-2
edwardloveall Mar 16, 2025
9b05d1c
Reintroduce grey-1 to avoid color-mix
edwardloveall Mar 16, 2025
79c5df9
Remove $black sass var
edwardloveall Mar 16, 2025
eb7244d
Convert $white to css custom property
edwardloveall Mar 16, 2025
9311fc4
Convert $base-font-family to css custom property
edwardloveall Mar 16, 2025
8b98efc
Convert $heading-font-family to css custom property
edwardloveall Mar 16, 2025
d3ac48c
Convert $base-font-size to css custom property
edwardloveall Mar 16, 2025
f987fb9
Convert $bold-font-weight to css custom property
edwardloveall Mar 16, 2025
c55a182
Convert (most of) $base-spacing to css custom property
edwardloveall Mar 17, 2025
b1ef87e
Convert $small-spacing to css custom property
edwardloveall Mar 17, 2025
b8a78b7
Convert $base-line-height to css custom property
edwardloveall Mar 17, 2025
bb8ea91
Convert $base-border-radius to css custom property
edwardloveall Mar 17, 2025
ab3dee4
Convert $heading-line-height to css custom property
edwardloveall Mar 17, 2025
3630491
Convert $search-icon-size to css custom property
edwardloveall Mar 18, 2025
d94ecf2
Convert $navigation-link-padding to css custom property
edwardloveall Mar 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
352 changes: 210 additions & 142 deletions app/assets/builds/administrate/application.css
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion app/assets/builds/administrate/application.css.map
View file
Open in desktop

Large diffs are not rendered by default.

32 changes: 16 additions & 16 deletions app/assets/stylesheets/administrate/base/_forms.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,29 +6,29 @@ fieldset {
}

legend {
font-weight: $bold-font-weight;
font-weight: var(--bold-font-weight);
margin: 0;
padding: 0;
}

label {
display: block;
font-weight: $bold-font-weight;
font-weight: var(--bold-font-weight);
margin: 0;
}

input,
select {
display: block;
font-family: $base-font-family;
font-size: $base-font-size;
font-family: var(--base-font-family);
font-size: var(--base-font-size);
}

input,
select,
textarea {
display: block;
font-family: $base-font-family;
font-family: var(--base-font-family);
font-size: 16px;
}

Expand All @@ -52,28 +52,28 @@ textarea {
input:not([type]),
textarea {
appearance: none;
background-color: $white;
border: $base-border;
border-radius: $base-border-radius;
background-color: var(--white);
border: var(--base-border);
border-radius: var(--base-border-radius);
padding: 0.5em;
transition: border-color $base-duration $base-timing;
transition: border-color var(--base-duration) var(--base-timing);
width: 100%;

&:hover {
border-color: mix($black, $base-border-color, 20%);
border-color: var(--base-border-color-hover);
}

&:focus {
border-color: $action-color;
border-color: var(--action-color);
outline: none;
}

&:disabled {
background-color: mix($black, $white, 5%);
background-color: var(--grey-1);
cursor: not-allowed;

&:hover {
border: $base-border;
border: var(--base-border);
}
}

Expand All @@ -85,7 +85,7 @@ textarea {
[type="checkbox"],
[type="radio"] {
display: inline;
margin-right: $small-spacing * 0.5;
margin-right: calc(var(--small-spacing) * 0.5);
}

[type="file"] {
Expand All @@ -101,7 +101,7 @@ select {
[type="file"],
select {
&:focus {
outline: $focus-outline;
outline-offset: $focus-outline-offset;
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
}
2 changes: 1 addition & 1 deletion app/assets/stylesheets/administrate/base/_layout.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
html {
background-color: $base-background-color;
background-color: var(--base-background-color);
box-sizing: border-box;
}

Expand Down
6 changes: 3 additions & 3 deletions app/assets/stylesheets/administrate/base/_lists.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,11 @@ ol {
}

dl {
margin-bottom: $small-spacing;
margin-bottom: var(--small-spacing);

dt {
font-weight: $bold-font-weight;
margin-top: $small-spacing;
font-weight: var(--bold-font-weight);
margin-top: var(--small-spacing);
}

dd {
Expand Down
10 changes: 5 additions & 5 deletions app/assets/stylesheets/administrate/base/_tables.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,25 +11,25 @@ table {
}

thead {
font-weight: $bold-font-weight;
font-weight: var(--bold-font-weight);
}

tr {
border-bottom: $base-border;
border-bottom: var(--base-border);
}

tbody tr {
&:hover {
background-color: $base-background-color;
background-color: var(--base-background-color);
}

[role="link"] {
cursor: pointer;
}

&:focus {
outline: $focus-outline;
outline-offset: -($focus-outline-width);
outline: var(--focus-outline);
outline-offset: calc(-1 * var(--focus-outline-width));
}
}

Expand Down
34 changes: 17 additions & 17 deletions app/assets/stylesheets/administrate/base/_typography.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
body {
color: $base-font-color;
font-family: $base-font-family;
font-size: $base-font-size;
line-height: $base-line-height;
color: var(--base-font-color);
font-family: var(--base-font-family);
font-size: var(--base-font-size);
line-height: var(--base-line-height);
}

h1,
Expand All @@ -11,14 +11,14 @@ h3,
h4,
h5,
h6 {
font-family: $heading-font-family;
font-size: $base-font-size;
line-height: $heading-line-height;
font-family: var(--heading-font-family);
font-size: var(--base-font-size);
line-height: var(--heading-line-height);
margin: 0;
}

p {
margin: 0 0 $small-spacing;
margin: 0 0 var(--small-spacing);
}

a,
Expand All @@ -28,32 +28,32 @@ a,
[type="reset"],
[type="submit"]
) {
color: $action-color;
color: var(--action-color);
text-decoration-skip-ink: auto;
transition: color $base-duration $base-timing;
transition: color var(--base-duration) var(--base-timing);

&:hover {
color: mix($black, $action-color, 25%);
color: var(--action-color-active);

@edwardloveall edwardloveall Mar 16, 2025

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This changed ever so slightly. There were two selectors that used $action-color as their base. This one mixes in 25% $black and &:not(.link):hover in buttons.scss mixes in 20% $black. I went with the 20% in both places so we only had one "it's like $action-color but tinted" variable because button backgrounds are more prominant than text hovers.

}

&:focus {
outline: $focus-outline;
outline-offset: $focus-outline-offset;
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}
/* stylelint-disable selector-no-qualifying-type */
&.link--danger {
color: $red;
color: var(--danger-color);
}

&.link--danger:hover {
color: mix($black, $red, 20%);
color: var(--danger-color-active);
}
}

hr {
border-bottom: $base-border;
border-bottom: var(--base-border);
border-left: 0;
border-right: 0;
border-top: 0;
margin: $base-spacing 0;
margin: var(--base-spacing) 0;
}
2 changes: 1 addition & 1 deletion app/assets/stylesheets/administrate/components/_app-container.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,5 +5,5 @@
margin-right: auto;
max-width: 100rem;
min-height: 100vh;
padding: $base-spacing;
padding: var(--base-spacing);
}
8 changes: 4 additions & 4 deletions app/assets/stylesheets/administrate/components/_attributes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@

clear: left;
float: left;
margin-bottom: $base-spacing;
margin-bottom: var(--base-spacing);
margin-top: 0.25em;
text-align: right;
width: calc(20% - 1rem);
Expand All @@ -16,13 +16,13 @@

.attribute-data {
float: left;
margin-bottom: $base-spacing;
margin-bottom: var(--base-spacing);
margin-left: 2rem;
width: calc(80% - 1rem);
word-break: break-word;
}

.attribute--nested {
border: $base-border;
padding: $small-spacing;
border: var(--base-border);
padding: var(--small-spacing);
}
42 changes: 21 additions & 21 deletions app/assets/stylesheets/administrate/components/_buttons.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,20 @@ button,
[type="submit"],
.button {
appearance: none;
background-color: $action-color;
background-color: var(--action-color);
border: 0;
border-radius: $base-border-radius;
color: $white;
border-radius: var(--base-border-radius);
color: var(--white);
cursor: pointer;
display: inline-block;
font-family: $base-font-family;
font-size: $base-font-size;
font-family: var(--base-font-family);
font-size: var(--base-font-size);
-webkit-font-smoothing: antialiased;
font-weight: $bold-font-weight;
font-weight: var(--bold-font-weight);
line-height: 1;
padding: $small-spacing $base-spacing;
padding: var(--small-spacing) var(--base-spacing);
text-decoration: none;
transition: background-color $base-duration $base-timing;
transition: background-color var(--base-duration) var(--base-timing);
user-select: none;
vertical-align: middle;
white-space: nowrap;
Expand All @@ -28,17 +28,17 @@ button,
}

&:not(.link):hover {
background-color: mix($black, $action-color, 20%);
color: $white;
background-color: var(--action-color-active);
color: var(--white);
}

&:not(.link):focus {
outline: $focus-outline;
outline-offset: $focus-outline-offset;
outline: var(--focus-outline);
outline-offset: var(--focus-outline-offset);
}

&:not(.link):disabled:hover {
background-color: $action-color;
background-color: var(--action-color);
}
}

Expand All @@ -52,26 +52,26 @@ form.button_to { /* stylelint-disable selector-no-qualifying-type, selector-clas

.button--alt {
background-color: transparent;
border: $base-border;
border-color: $blue;
color: $blue;
border: var(--base-border);
border-color: var(--action-color);
color: var(--action-color);
}

.button--danger {
background-color: $red;
background-color: var(--danger-color);

&:not(.link):hover {
background-color: mix($black, $red, 20%);
color: $white;
background-color: var(--danger-color-active);
color: var(--white);
}

&:not(.link):disabled:hover {
background-color: mix($black, $red, 20%);
background-color: var(--danger-color-active);
}
}

.button--nav {
margin-bottom: $base-spacing;
margin-bottom: var(--base-spacing);
}

.button--tooltip {
Expand Down
12 changes: 6 additions & 6 deletions app/assets/stylesheets/administrate/components/_cells.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@
margin-left: 5px;

svg {
color: $hint-grey;
color: var(--hint-grey);
height: 13px;
transition: transform $base-duration $base-timing;
transition: transform var(--base-duration) var(--base-timing);
width: 13px;
}
}
Expand All @@ -16,25 +16,25 @@
a {
color: inherit;
display: inline-block;
transition: color $base-duration $base-timing;
transition: color var(--base-duration) var(--base-timing);
width: 100%;
}

&:hover {
a {
color: $action-color;
color: var(--action-color);
}

svg {
fill: $action-color;
fill: var(--action-color);
transform: rotate(180deg);
}
}
}

.cell-label--asc,
.cell-label--desc {
font-weight: $bold-font-weight;
font-weight: var(--bold-font-weight);
}

.cell-label__sort-indicator--desc {
Expand Down
Loading
Loading