Skip to content
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

Convert stylesheet colors to use css vars #2755

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

Convert stylesheet colors to use css vars #2755

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
bed611a
WIP Bunch variables
edwardloveall Jan 5, 2025
6bc55b5
Remove $blue
edwardloveall Jan 5, 2025
da797e4
$red and the $light-* colors
edwardloveall Jan 5, 2025
1448db7
$base-background-color
edwardloveall Jan 5, 2025
e68c51a
$base-border-color
edwardloveall Jan 5, 2025
6d019d2
All the $grey-N
edwardloveall Jan 5, 2025
e58ebe3
Font family
edwardloveall Jan 5, 2025
4675c88
base-font-size
edwardloveall Jan 5, 2025
070f7f3
bold-font-weight
edwardloveall Jan 5, 2025
aaae1f2
base-duration & base-timing
edwardloveall Jan 5, 2025
f82ba77
base-border
edwardloveall Jan 5, 2025
42070c5
Move flashes to bottom
edwardloveall Jan 5, 2025
f5fff4d
Use better transparency function
edwardloveall Jan 12, 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
215 changes: 125 additions & 90 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.

6,503 changes: 3,197 additions & 3,306 deletions app/assets/builds/administrate/application.js
View file
Open in desktop

Large diffs are not rendered by default.

6 changes: 3 additions & 3 deletions app/assets/builds/administrate/application.js.map
View file
Open in desktop

Large diffs are not rendered by default.

28 changes: 14 additions & 14 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;
background-color: var(--white);
border: var(--base-border);
border-radius: $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: color-mix(in srgb, var(--black) 20%, var(--base-border-color));
}

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

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

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

Expand Down Expand Up @@ -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
2 changes: 1 addition & 1 deletion app/assets/stylesheets/administrate/base/_lists.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ dl {
margin-bottom: $small-spacing;

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

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: var(--focus-outline-inset);
}
}

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

Expand All @@ -11,8 +11,8 @@ h3,
h4,
h5,
h6 {
font-family: $heading-font-family;
font-size: $base-font-size;
font-family: var(--heading-font-family);
font-size: var(--base-font-size);
line-height: $heading-line-height;
margin: 0;
}
Expand All @@ -28,27 +28,27 @@ 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);

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

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

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

hr {
border-bottom: $base-border;
border-bottom: var(--base-border);
border-left: 0;
border-right: 0;
border-top: 0;
Expand Down
2 changes: 1 addition & 1 deletion app/assets/stylesheets/administrate/components/_attributes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,6 @@
}

.attribute--nested {
border: $base-border;
border: var(--base-border);
padding: $small-spacing;
}
34 changes: 17 additions & 17 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;
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;
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,33 +28,33 @@ button,
}

&:not(.link):hover {
background-color: mix($black, $action-color, 20%);
color: $white;
background-color: color-mix(in srgb, var(--black) 20%, var(--action-color));
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);
}
}

.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(--red);

&:hover {
background-color: mix($black, $red, 20%);
color: $white;
background-color: color-mix(in srgb, var(--black) 20%, var(--red));
color: var(--white);
}
}

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 {
fill: $hint-grey;
fill: 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
6 changes: 3 additions & 3 deletions app/assets/stylesheets/administrate/components/_field-unit.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@
margin-left: 2rem;

.optgroup-header {
font-weight: $bold-font-weight;
font-weight: var(--bold-font-weight);
}
}

Expand All @@ -33,7 +33,7 @@
}

.field-unit--nested {
border: $base-border;
border: var(--base-border);
margin-left: 7.5%;
max-width: 60rem;
padding: $small-spacing;
Expand All @@ -50,7 +50,7 @@

.field-unit--required {
label::after {
color: $red;
color: var(--red);
content: " *";
}
}
6 changes: 3 additions & 3 deletions app/assets/stylesheets/administrate/components/_flashes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,19 @@
@each $flash-type, $color in $flashes {
.flash-#{$flash-type} {
background-color: $color;
color: mix($black, $color, 60%);
color: color-mix(var(--black) 60%, $color);
Copy link
Author

Choose a reason for hiding this comment

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

These are technically the only css vars left. CSS (as far as I know) does not have any type of map equivalent. Even so, these get replaced with normal CSS vars in the end.

display: block;
margin-bottom: $base-spacing * 0.5;
padding: $base-spacing * 0.5;
text-align: center;

a {
color: mix($black, $color, 70%);
color: color-mix(var(--black) 70%, $color);
text-decoration: underline;

&:focus,
&:hover {
color: mix($black, $color, 90%);
color: color-mix(var(--black) 90%, $color);
}
}
}
Expand Down
8 changes: 4 additions & 4 deletions app/assets/stylesheets/administrate/components/_main-content.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
.main-content {
background-color: $white;
background-color: var(--white);
border-radius: $base-border-radius;
box-shadow: 0 0 6px 0 rgba($black, 0.12),
0 2px 2px rgba($black, 0.2);
box-shadow: 0 0 6px 0 rgb(from var(--black) r g b / 0.12),
0 2px 2px rgb(from var(--black) r g b / 0.2);
flex: 1 1 100%;
min-width: 800px;
padding-bottom: 10vh;
Expand All @@ -20,7 +20,7 @@

.main-content__header {
align-items: center;
border-bottom: $base-border;
border-bottom: var(--base-border);
display: flex;
}

Expand Down
Loading
Loading