1
1
mirror of https://github.com/primer/css.git synced 2024-12-12 10:47:14 +03:00

Alias SASS variables

This commit is contained in:
simurai 2020-09-19 15:42:39 +09:00
parent ffbfe842eb
commit 89ccbbd470
4 changed files with 219 additions and 215 deletions

View File

@ -15,81 +15,82 @@ In `v16` we're moving all colors to [primer/primitives](https://github.com/prime
### Functional colors
For variables that don't have a replacement, for now you can use a CSS variable from the color scale. Eventually we would like to remove these though.
`v15` | `v16`
--- | ---
**Text** |
`$text-black` | `var(--color-text-primary)` gray-900
`$text-gray-dark` | `var(--color-text-primary)` gray-900
`$text-gray` | `var(--color-text-secondary)` gray-600
`$text-gray-light` | `var(--color-text-tertiary)` gray-500
`$text-white` | `var(--color-text-inverse)` white
`$text-blue` | `var(--color-text-link-primary)` blue-500
`$text-green` | `var(--color-text-success)` green-600
`$text-red` | `var(--color-text-danger)` red-500
`$text-orange` | n/a
`$text-orange-light` | n/a
`$text-yellow` | n/a
`$text-purple` | n/a
`$text-pink` | n/a
`$text-gray-dark` (`$gray-900`) | `var(--color-text-primary)`
`$text-gray` (`$gray-600`) | `var(--color-text-secondary)`
`$text-gray-light` (`$gray-500`) | `var(--color-text-tertiary)`
`$text-white` (`$white`) | `var(--color-text-inverse)`
`$text-blue` (`$blue-500`) | `var(--color-text-link-primary)`
`$text-green` (`$green-600`) | `var(--color-text-success)`
`$text-red` (`$red-600`) | `var(--color-text-danger)`
`$text-yellow` (`$yellow-800`) | `var(--color-text-warning)`
n/a | `var(--color-text-placeholder)` (`$gray-300`)
n/a | `var(--color-text-disabled)` (`$gray-300`)
n/a | `var(--color-text-link-secondary)` (`$gray-900`)
n/a | `var(--color-text-link-tertiary)` (`$gray-600`)
`$text-black` (`$black`) | n/a
`$text-orange` (`$orange-900`) | n/a
`$text-orange-light` (`$orange-600`) | n/a
`$text-purple` (`$purple-500`) | n/a
`$text-pink` (`$pink-500`) | n/a
**Icon** |
n/a | `var(--color-icon-primary)` (`$gray-900`)
n/a | `var(--color-icon-secondary)` (`$gray-600`)
n/a | `var(--color-icon-tertiary)` (`$gray-400`)
n/a | `var(--color-icon-info)` (`$blue-500`)
n/a | `var(--color-icon-danger)` (`$red-500`)
n/a | `var(--color-icon-success)` (`$green-600`)
n/a | `var(--color-icon-warning)` (`$yellow-800`)
**Border** |
`$border-color` | `var(--color-border-primary)` gray-200
`$border` | `$border-width $border-style var(--color-border-primary)` gray-200
`$border-white` | `var(--color-border-inverse)` white
`$border-black-fade` | n/a
`$border-white-fade` | n/a
`$border-gray` | `var(--color-border-primary)` gray-200
`$border-gray-dark` | `var(--color-border-secondary)` $gray-300
`$border-gray-darker` | n/a
`$border-gray-light` | `var(--color-border-primary-light)` lighten($gray-200, 3%)
`$border-blue` | `var(--color-border-info)` blue-500
`$border-blue-light` | n/a
`$border-green` | `var(--color-border-success)` green-500
`$border-green-light` | n/a
`$border-purple` | n/a
`$border-red` | `var(--color-border-danger)` red-500
`$border-red-light` | `var(--color-border-danger)` red-500
`$border-yellow` | `var(--color-border-warning)` yellow-700
`$border-color` (`$gray-200`) | `var(--color-border-primary)`
`$border-gray` (`$gray-200`) | `var(--color-border-primary)`
`$border-gray-light` (`lighten($gray-200, 3%)`) | `var(--color-border-primary-light)`
`$border-gray-dark` (`$gray-300`) | `var(--color-border-secondary)`
`$border-white` (`$white`) | `var(--color-border-inverse)`
`$border-blue` (`$blue-500`) | `var(--color-border-info)`
`$border-green` (`$green-400`) | `var(--color-border-success)`
`$border-red` (`$red-500`) | `var(--color-border-danger)`
`$border-yellow` (`$yellow-600`) | `var(--color-border-warning)`
`$border-gray-darker` (`$gray-700`) | n/a
`$border-blue-light` (`$blue-200`) | n/a
`$border-red-light` (`$red-300`) | n/a
`$border-purple` (`$purple-500`) | n/a
`$border-black-fade` (`$black-fade-15`) | n/a
`$border-white-fade` (`$white-fade-15`) | n/a
`$border-green-light` (`desaturate($green-300, 40%)`) | n/a
**Background** |
`$bg-black` | n/a
`$bg-black-fade` | n/a
`$bg-white` | `var(--color-bg-primary)` white
`$bg-gray` | `var(--color-bg-secondary)` gray-100
`$bg-gray-light` | `var(--color-bg-tertiary)` gray-000
`$bg-gray-dark` | `var(--color-bg-canvas-inverse)` gray-900
`$bg-red-light` | `var(--color-bg-danger)` red-100
`$bg-red` | `var(--color-bg-danger-inverse)` red-500
`$bg-green-light` | `var(--color-bg-success)` green-100
`$bg-green` | `var(--color-bg-success-inverse)` green-500
`$bg-blue-light` | `var(--color-bg-info)` blue-100
`$bg-blue` | `var(--color-bg-info-inverse)` blue-500
`$bg-orange` | n/a
`$bg-purple` | n/a
`$bg-purple-light` | n/a
`$bg-pink` | n/a
`$bg-yellow` | n/a
`$bg-yellow-light` | n/a
`$bg-yellow-dark` | n/a
`$bg-white` (`$white`) | `var(--color-bg-primary)` or `var(--color-bg-canvas-inverse)`
`$bg-gray` (`$gray-100`) | `var(--color-bg-secondary)`
`$bg-gray-light` (`$gray-000`) | `var(--color-bg-tertiary)`
`$bg-gray-dark` (`$gray-900`) | `var(--color-bg-canvas-inverse)`
`$bg-red` (`$red-500`) | `var(--color-bg-danger-inverse)`
`$bg-red-light` (`$red-000`) | `var(--color-bg-danger)`
`$bg-green` (`$green-500`) | `var(--color-bg-success-inverse)`
`$bg-green-light` (`$green-100`) | `var(--color-bg-success)`
`$bg-blue` (`$blue-500`) | `var(--color-bg-info-inverse)`
`$bg-blue-light` (`$blue-000`) | `var(--color-bg-info)`
`$bg-yellow` (`$yellow-500`) | `var(--color-bg-warning-inverse)`
`$bg-yellow-light` (`$yellow-200`) | `var(--color-bg-warning)`
n/a | `var(--color-bg-canvas)` (`$white`)
`$bg-black` (`$black`) | n/a
`$bg-black-fade` (`$black-fade-50`) | n/a
`$bg-orange` (`$orange-700`) | n/a
`$bg-purple` (`$purple-500`) | n/a
`$bg-purple-light` (`$purple-000`) | n/a
`$bg-pink` (`$pink-500`) | n/a
`$bg-yellow-dark` (`$yellow-700`) | n/a
**Box Shadow** |
`$box-shadow` | `var(--color-shadow-small)`
`$box-shadow-medium` | `var(--color-shadow-medium)`
`$box-shadow-large` | `var(--color-shadow-large)`
`$box-shadow-extra-large` | `var(--color-shadow-extra-large)`
`$box-shadow-highlight` | `var(--color-shadow-highlight)`
`$box-shadow-inset` | `var(--color-shadow-inset)`
`$box-shadow-focus` | `var(--color-shadow-focus)`
**Buttons** |
`$border-color-button` | `var(--color-btn-border)`
`$btn-active-shadow` | n/a
**Forms** |
`$form-control-shadow` | `var(--color-input-shadow)`
`$btn-input-focus-shadow` | `var(--color-input-shadow-focus)`
**Tooltips** |
`$tooltip-background-color` | n/a
`$tooltip-text-color` | n/a
**Diffstat** |
`$bg-diffstat-added` | `var(--color-diff-addition-bg)`
`$bg-diffstat-deleted` | `var(--color-diff-deletion-bg)`
`$bg-diffstat-neutral` | `var(--color-diff-neutral-bg)`
`$box-shadow` | `var(--color-shadow-small)`
`$box-shadow-medium` | `var(--color-shadow-medium)`
`$box-shadow-large` | `var(--color-shadow-large)`
`$box-shadow-extra-large` | `var(--color-shadow-extra-large)`
`$box-shadow-highlight` | `var(--color-shadow-highlight)`
`$box-shadow-inset` | `var(--color-shadow-inset)`
`$box-shadow-focus` | `var(--color-shadow-focus)`
# 12.0.0
The v12 release marks a major transition from small, single-purpose npm packages (`primer-core`, `primer-marketing`, `primer-utilities`, etc.) to a single package — `@primer/css` — which contains all of the SCSS source files in subdirectories. Here's what you need to do to migrate different parts of your app:

View File

@ -4,119 +4,119 @@
//
// Black based on same hue as $gray-900
$black: #1b1f23 !default;
$white: #fff !default;
$black: var(--color-scale-black) !default;
$white: var(--color-scale-white) !default;
//
//
// -------- Grays --------
$gray-000: #fafbfc !default;
$gray-100: #f6f8fa !default;
$gray-200: #e1e4e8 !default;
$gray-300: #d1d5da !default;
$gray-400: #959da5 !default;
$gray-500: #6a737d !default;
$gray-600: #586069 !default;
$gray-700: #444d56 !default;
$gray-800: #2f363d !default;
$gray-900: #24292e !default; // body font color
$gray-000: var(--color-scale-grey-0) !default;
$gray-100: var(--color-scale-grey-1) !default;
$gray-200: var(--color-scale-grey-2) !default;
$gray-300: var(--color-scale-grey-3) !default;
$gray-400: var(--color-scale-grey-4) !default;
$gray-500: var(--color-scale-grey-5) !default;
$gray-600: var(--color-scale-grey-6) !default;
$gray-700: var(--color-scale-grey-7) !default;
$gray-800: var(--color-scale-grey-8) !default;
$gray-900: var(--color-scale-grey-9) !default;
// -------- Blue --------
$blue-000: #f1f8ff !default;
$blue-100: #dbedff !default;
$blue-200: #c8e1ff !default;
$blue-300: #79b8ff !default;
$blue-400: #2188ff !default;
$blue-500: #0366d6 !default; // Default: Passes AA with #fff
$blue-600: #005cc5 !default;
$blue-700: #044289 !default;
$blue-800: #032f62 !default;
$blue-900: #05264c !default; // Passes with 1/2/300 blues
$blue-000: var(--color-scale-blue-0) !default;
$blue-100: var(--color-scale-blue-1) !default;
$blue-200: var(--color-scale-blue-2) !default;
$blue-300: var(--color-scale-blue-3) !default;
$blue-400: var(--color-scale-blue-4) !default;
$blue-500: var(--color-scale-blue-5) !default;
$blue-600: var(--color-scale-blue-6) !default;
$blue-700: var(--color-scale-blue-7) !default;
$blue-800: var(--color-scale-blue-8) !default;
$blue-900: var(--color-scale-blue-9) !default;
// -------- Green --------
$green-000: #f0fff4 !default;
$green-100: #dcffe4 !default;
$green-200: #bef5cb !default;
$green-300: #85e89d !default;
$green-400: #34d058 !default;
$green-500: #28a745 !default; // Default. passes AA Large
$green-600: #22863a !default; // Text green, passes AA on #fff
$green-700: #176f2c !default;
$green-800: #165c26 !default;
$green-900: #144620 !default;
$green-000: var(--color-scale-green-0) !default;
$green-100: var(--color-scale-green-1) !default;
$green-200: var(--color-scale-green-2) !default;
$green-300: var(--color-scale-green-3) !default;
$green-400: var(--color-scale-green-4) !default;
$green-500: var(--color-scale-green-5) !default;
$green-600: var(--color-scale-green-6) !default;
$green-700: var(--color-scale-green-7) !default;
$green-800: var(--color-scale-green-8) !default;
$green-900: var(--color-scale-green-9) !default;
// -------- Yellow --------
$yellow-000: #fffdef !default;
$yellow-100: #fffbdd !default;
$yellow-200: #fff5b1 !default;
$yellow-300: #ffea7f !default;
$yellow-400: #ffdf5d !default;
$yellow-500: #ffd33d !default;
$yellow-600: #f9c513 !default;
$yellow-700: #dbab09 !default;
$yellow-800: #b08800 !default;
$yellow-900: #735c0f !default;
$yellow-000: var(--color-scale-yellow-0) !default;
$yellow-100: var(--color-scale-yellow-1) !default;
$yellow-200: var(--color-scale-yellow-2) !default;
$yellow-300: var(--color-scale-yellow-3) !default;
$yellow-400: var(--color-scale-yellow-4) !default;
$yellow-500: var(--color-scale-yellow-5) !default;
$yellow-600: var(--color-scale-yellow-6) !default;
$yellow-700: var(--color-scale-yellow-7) !default;
$yellow-800: var(--color-scale-yellow-8) !default;
$yellow-900: var(--color-scale-yellow-9) !default;
// -------- Orange --------
$orange-000: #fff8f2 !default;
$orange-100: #ffebda !default;
$orange-200: #ffd1ac !default;
$orange-300: #ffab70 !default;
$orange-400: #fb8532 !default;
$orange-500: #f66a0a !default; // Default. passes AA Large with #fff
$orange-600: #e36209 !default;
$orange-700: #d15704 !default;
$orange-800: #c24e00 !default;
$orange-900: #a04100 !default;
$orange-000: var(--color-scale-orange-0) !default;
$orange-100: var(--color-scale-orange-1) !default;
$orange-200: var(--color-scale-orange-2) !default;
$orange-300: var(--color-scale-orange-3) !default;
$orange-400: var(--color-scale-orange-4) !default;
$orange-500: var(--color-scale-orange-5) !default;
$orange-600: var(--color-scale-orange-6) !default;
$orange-700: var(--color-scale-orange-7) !default;
$orange-800: var(--color-scale-orange-8) !default;
$orange-900: var(--color-scale-orange-9) !default;
// -------- Red --------
$red-000: #ffeef0 !default;
$red-100: #ffdce0 !default;
$red-200: #fdaeb7 !default;
$red-300: #f97583 !default;
$red-400: #ea4a5a !default;
$red-500: #d73a49 !default; // Default. passes AA
$red-600: #cb2431 !default;
$red-700: #b31d28 !default;
$red-800: #9e1c23 !default;
$red-900: #86181d !default;
$red-000: var(--color-scale-red-0) !default;
$red-100: var(--color-scale-red-1) !default;
$red-200: var(--color-scale-red-2) !default;
$red-300: var(--color-scale-red-3) !default;
$red-400: var(--color-scale-red-4) !default;
$red-500: var(--color-scale-red-5) !default;
$red-600: var(--color-scale-red-6) !default;
$red-700: var(--color-scale-red-7) !default;
$red-800: var(--color-scale-red-8) !default;
$red-900: var(--color-scale-red-9) !default;
// -------- Purple --------
$purple-000: #f5f0ff !default;
$purple-100: #e6dcfd !default;
$purple-200: #d1bcf9 !default;
$purple-300: #b392f0 !default;
$purple-400: #8a63d2 !default;
$purple-500: #6f42c1 !default; // passes AA with #fff
$purple-600: #5a32a3 !default;
$purple-700: #4c2889 !default;
$purple-800: #3a1d6e !default;
$purple-900: #29134e !default;
$purple-000: var(--color-scale-purple-0) !default;
$purple-100: var(--color-scale-purple-1) !default;
$purple-200: var(--color-scale-purple-2) !default;
$purple-300: var(--color-scale-purple-3) !default;
$purple-400: var(--color-scale-purple-4) !default;
$purple-500: var(--color-scale-purple-5) !default;
$purple-600: var(--color-scale-purple-6) !default;
$purple-700: var(--color-scale-purple-7) !default;
$purple-800: var(--color-scale-purple-8) !default;
$purple-900: var(--color-scale-purple-9) !default;
// -------- Pink --------
$pink-000: #ffeef8 !default;
$pink-100: #fedbf0 !default;
$pink-200: #f9b3dd !default;
$pink-300: #f692ce !default;
$pink-400: #ec6cb9 !default;
$pink-500: #ea4aaa !default;
$pink-600: #d03592 !default;
$pink-700: #b93a86 !default;
$pink-800: #99306f !default;
$pink-900: #6d224f !default;
$pink-000: var(--color-scale-pink-0) !default;
$pink-100: var(--color-scale-pink-1) !default;
$pink-200: var(--color-scale-pink-2) !default;
$pink-300: var(--color-scale-pink-3) !default;
$pink-400: var(--color-scale-pink-4) !default;
$pink-500: var(--color-scale-pink-5) !default;
$pink-600: var(--color-scale-pink-6) !default;
$pink-700: var(--color-scale-pink-7) !default;
$pink-800: var(--color-scale-pink-8) !default;
$pink-900: var(--color-scale-pink-9) !default;
// -------- Fades --------
$black-fade-15: rgba($black, 0.15) !default;
$black-fade-30: rgba($black, 0.3) !default;
$black-fade-50: rgba($black, 0.5) !default;
$black-fade-70: rgba($black, 0.7) !default;
$black-fade-85: rgba($black, 0.85) !default;
$black-fade-15: var(--color-fade-black-15) !default;
$black-fade-30: var(--color-fade-black-30) !default;
$black-fade-50: var(--color-fade-black-50) !default;
$black-fade-70: var(--color-fade-black-70) !default;
$black-fade-85: var(--color-fade-black-85) !default;
$white-fade-15: rgba($white, 0.15) !default;
$white-fade-30: rgba($white, 0.3) !default;
$white-fade-50: rgba($white, 0.5) !default;
$white-fade-70: rgba($white, 0.7) !default;
$white-fade-85: rgba($white, 0.85) !default;
$white-fade-15: var(--color-fade-white-15) !default;
$white-fade-30: var(--color-fade-white-30) !default;
$white-fade-50: var(--color-fade-white-50) !default;
$white-fade-70: var(--color-fade-white-70) !default;
$white-fade-85: var(--color-fade-white-85) !default;
// -------- Color defaults --------
$red: $red-500 !default;

View File

@ -1,93 +1,95 @@
//
// ------------------------ Deprecated ------------------------
// ------------- Replaced with primer/primitives --------------
// Some might get replaced at some point.
// If possible, use functional CSS variables from primer/primitives
//
@import "color-system.scss";
// Color variables
// Border colors
$border-white: $white !default;
$border-color: var(--color-border-primary) !default;
$border-gray: var(--color-border-primary) !default;
$border-gray-light: var(--color-border-primary-light) !default;
$border-gray-dark: var(--color-border-secondary) !default;
$border-white: var(--color-border-inverse) !default;
$border-blue: var(--color-border-info) !default;
$border-green: var(--color-border-success) !default;
$border-red: var(--color-border-danger) !default;
$border-yellow: var(--color-border-warning) !default;
$border-gray-darker: $gray-700 !default;
$border-blue-light: $blue-200 !default;
$border-red-light: $red-300 !default;
$border-purple: $purple-500 !default;
$border-black-fade: $black-fade-15 !default;
$border-white-fade: $white-fade-15 !default;
$border-gray-dark: $gray-300 !default;
$border-gray-darker: $gray-700 !default;
$border-gray-light: lighten($gray-200, 3%) !default;
$border-gray: $gray-200 !default;
$border-blue: $blue-500 !default;
$border-blue-light: $blue-200 !default;
$border-green: $green-400 !default;
$border-green-light: desaturate($green-300, 40%) !default;
$border-purple: $purple !default;
$border-red: $red !default;
$border-red-light: $red-300 !default;
$border-yellow: $yellow-600 !default;
$border-green-light: var(--color-discussion-border) !default; // TODO: Move to dotcom
// Background colors
$bg-white: $white !default;
$bg-white: var(--color-bg-primary) !default;
$bg-gray: var(--color-bg-secondary) !default;
$bg-gray-light: var(--color-bg-tertiary) !default;
$bg-gray-dark: var(--color-bg-canvas-inverse) !default;
$bg-red: var(--color-bg-danger-inverse) !default;
$bg-red-light: var(--color-bg-danger) !default;
$bg-green: var(--color-bg-success-inverse) !default;
$bg-green-light: var(--color-bg-success) !default;
$bg-blue: var(--color-bg-info-inverse) !default;
$bg-blue-light: var(--color-bg-info) !default;
$bg-yellow: var(--color-bg-warning-inverse) !default;
$bg-yellow-light: var(--color-bg-warning) !default;
$bg-black: $black !default;
$bg-black-fade: $black-fade-50 !default;
$bg-gray: $gray-100 !default;
$bg-gray-dark: $gray-900 !default;
$bg-gray-light: $gray-000 !default;
$bg-red: $red-500 !default;
$bg-red-light: $red-000 !default;
$bg-green: $green-500 !default;
$bg-green-light: $green-100 !default;
$bg-blue: $blue-500 !default;
$bg-blue-light: $blue-000 !default;
$bg-orange: $orange-700 !default;
$bg-purple: $purple-500 !default;
$bg-purple-light: $purple-000 !default;
$bg-pink: $pink-500 !default;
$bg-yellow: $yellow-500 !default;
$bg-yellow-light: $yellow-200 !default;
$bg-yellow-dark: $yellow-700 !default;
// Text colors
$text-gray-dark: var(--color-text-primary) !default;
$text-gray: var(--color-text-secondary) !default;
$text-gray-light: var(--color-text-tertiary) !default;
$text-white: var(--color-text-inverse) !default;
$text-blue: var(--color-text-link-primary) !default;
$text-green: var(--color-text-success) !default;
$text-red: var(--color-text-danger) !default;
$text-yellow: var(--color-text-warning) !default;
$text-black: $black !default;
$text-gray-dark: $gray-900 !default;
$text-gray: $gray-600 !default;
$text-gray-light: $gray-500 !default;
$text-white: $white !default;
$text-blue: $blue-500 !default;
$text-green: $green-600 !default;
$text-red: $red-600 !default;
$text-orange: $orange-900 !default;
$text-orange-light: $orange-600 !default;
$text-yellow: $yellow-800 !default;
$text-purple: $purple !default;
$text-pink: $pink-500 !default;
// Misc ------------------------------------
// Border
$border-color: $border-gray !default;
$border: 1px solid $border-color !default; // TODO: Deprecate
// Box shadow
$box-shadow: 0 1px 0 rgba($black, 0.04) !default;
$box-shadow-medium: 0 3px 6px rgba($gray-400, 0.15) !default;
$box-shadow-large: 0 8px 24px rgba($gray-400, 0.2) !default;
$box-shadow-extra-large: 0 12px 48px rgba($gray-400, 0.3) !default;
$box-shadow: var(--color-shadow-small) !default;
$box-shadow-medium: var(--color-shadow-medium) !default;
$box-shadow-large: var(--color-shadow-large) !default;
$box-shadow-extra-large: var(--color-shadow-extra-large) !default;
$box-shadow-highlight: inset 0 1px 0 rgba($white, 0.25) !default; // top highlight
$box-shadow-inset: inset 0 1px 0 rgba($border-color, 0.2) !default; // top inner shadow
$box-shadow-focus: 0 0 0 3px rgba($border-blue, 0.3) !default; // blue focus ring
$box-shadow-highlight: var(--color-shadow-highlight) !default; // top highlight
$box-shadow-inset: var(--color-shadow-inset) !default; // top inner shadow
$box-shadow-focus: var(--color-shadow-focus) !default; // blue focus ring
// Button variables
$border-color-button: $black-fade-15 !default;
$btn-active-shadow: inset 0 0.15em 0.3em $black-fade-15 !default; // TODO: Deprecate?
$border-color-button: var(--color-btn-border) !default;
$btn-active-shadow: var(--color-btn-shadow-active) !default; // TODO: Deprecate?
$btn-input-focus-shadow: var(--color-btn-shadow-input-focus) !default; // TODO: Deprecate?
// Form variables
$form-control-shadow: inset 0 1px 2px rgba($black, 0.075) !default; // TODO: Deprecate?
$btn-input-focus-shadow: 0 0 0 0.2em rgba($blue, 0.3) !default; // TODO: Deprecate? Replaced by $box-shadow-focus
$form-control-shadow: var(--color-input-shadow) !default; // TODO: Deprecate?
// Tooltips
$tooltip-background-color: $black !default;
$tooltip-text-color: $white !default;
$tooltip-background-color: var(--color-bg-canvas-inverse) !default; // TODO: Deprecate?
$tooltip-text-color: var(--color-text-inverse) !default; // TODO: Deprecate?
// diffstat background colors
$bg-diffstat-added: darken($green-400, 5%) !default;
$bg-diffstat-deleted: $red-600 !default;
$bg-diffstat-neutral: $gray-300 !default;
$bg-diffstat-added: var(--color-diff-addition-bg) !default; // TODO: Deprecate?
$bg-diffstat-deleted: var(--color-diff-deletion-bg) !default; // TODO: Deprecate?
$bg-diffstat-neutral: var(--color-diff-neutral-bg) !default; // TODO: Deprecate?

View File

@ -3,6 +3,7 @@
// Border
$border-width: 1px !default;
$border-style: solid !default;
$border: $border-width $border-style var(--color-border-primary) !default;
// Border Radius
$border-radius-1: 4px !default;