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:
parent
ffbfe842eb
commit
89ccbbd470
139
MIGRATING.md
139
MIGRATING.md
@ -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:
|
||||
|
@ -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;
|
||||
|
@ -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?
|
||||
|
@ -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;
|
||||
|
Loading…
Reference in New Issue
Block a user