primer/css
1
1
Fork 0
mirror of https://github.com/primer/css.git synced 2025-01-05 21:22:57 +03:00
Code Issues Projects Releases Wiki Activity

Put back some utilities for view_components

Browse Source
This commit is contained in:
Jon Rohan 2021-03-04 09:16:40 -08:00
parent 89d022be41
commit 376e0d4106
No known key found for this signature in database
GPG Key ID: B0BBE304A9A0AECB
2 changed files with 49 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/utilities/box-shadow.scss
View File

@ -18,6 +18,28 @@
box-shadow: var(--color-shadow-extra-large) !important;
}
// Deprecated ---------------------------------------
// TODO: Remove once not used anymore.
.box-shadow {
box-shadow: var(--color-shadow-small) !important;
}
.box-shadow-medium {
box-shadow: var(--color-shadow-medium) !important;
}
.box-shadow-large {
box-shadow: var(--color-shadow-large) !important;
}
.box-shadow-extra-large {
box-shadow: var(--color-shadow-extra-large) !important;
}
// Keep .box-shadow-none
// End of deprecation ---------------------------------------
// Turn off box shadow
.box-shadow-none {

27
src/utilities/colors.scss
View File

@ -56,6 +56,18 @@
// Color utilities
// background colors
.bg-white { background-color: var(--color-bg-primary) !important; }
.bg-blue { background-color: var(--color-bg-info-inverse) !important; }
.bg-blue-light { background-color: var(--color-bg-info) !important; }
.bg-gray-dark { background-color: var(--color-bg-canvas-inverse) !important; }
.bg-gray { background-color: var(--color-bg-tertiary) !important; }
.bg-gray-light { background-color: var(--color-bg-secondary) !important; }
.bg-green { background-color: var(--color-bg-success-inverse) !important; }
.bg-green-light { background-color: var(--color-bg-success) !important; }
.bg-red { background-color: var(--color-bg-danger-inverse) !important; }
.bg-red-light { background-color: var(--color-bg-danger) !important; }
.bg-yellow { background-color: var(--color-bg-warning-inverse) !important; }
.bg-yellow-light { background-color: var(--color-bg-warning) !important; }
.bg-yellow-dark { background-color: $bg-yellow-dark !important; }
.bg-purple { background-color: $bg-purple !important; }
.bg-pink { background-color: $bg-pink !important; }
@ -71,17 +83,32 @@
}
// text colors
.text-blue { color: var(--color-text-link) !important; }
.text-red { color: var(--color-text-danger) !important; }
.text-gray-light { color: var(--color-text-tertiary) !important; }
.text-gray { color: var(--color-text-secondary) !important; }
.text-gray-dark { color: var(--color-text-primary) !important; }
.text-green { color: var(--color-text-success) !important; }
.text-yellow { color: var(--color-text-warning) !important; }
.text-orange { color: $text-orange !important; }
.text-orange-light { color: $text-orange-light !important; }
.text-purple { color: $text-purple !important; }
.text-pink { color: $text-pink !important; }
.text-white { color: var(--color-text-white) !important; }
.text-inherit { color: inherit !important; } // TODO: Should this be moved to primer/primitives
// Border colors
.border-blue { border-color: var(--color-border-info) !important; }
.border-blue-light { border-color: $border-blue-light !important; }
.border-green { border-color: var(--color-border-success) !important; }
.border-green-light { border-color: var(--color-discussion-border) !important; }
.border-red { border-color: var(--color-border-danger) !important; }
.border-red-light { border-color: $border-red-light !important; }
.border-purple { border-color: $border-purple !important; }
.border-yellow { border-color: var(--color-border-warning) !important; }
.border-gray-light { border-color: var(--color-border-secondary) !important; }
.border-gray-dark { border-color: var(--color-border-tertiary) !important; }
.border-black-fade { border-color: $border-black-fade !important; }
.border-white-fade { border-color: $border-white-fade !important; }