mirror of
https://github.com/primer/css.git
synced 2024-11-22 01:53:17 +03:00
Updating deprecations.js file to be more straightforward (#1581)
* Updating deprecations.js file to be more straightforward * Create poor-coins-fix.md * Remove tests * Adding more info about the deprecation to the doc * Title section * Moving data to deprecations.json * Moving data to deprecations.json * Lint only scss files
This commit is contained in:
Jon Rohan
GitHub
parent
c3b4a0c363
commit
be518b8023
5
.changeset/poor-coins-fix.md
Normal file
5
.changeset/poor-coins-fix.md
Normal file
@ -0,0 +1,5 @@
|
||||
---
|
||||
"@primer/css": minor
|
||||
---
|
||||
|
||||
Updating deprecations.js file to be more straightforward
|
||||
@ -1,7 +1,5 @@
|
||||
import {
|
||||
getCurrentVersion,
|
||||
getDeprecatedSelectors,
|
||||
getDeprecatedVariables,
|
||||
getPackageStats,
|
||||
getSelectorDiff,
|
||||
getVariableDiff
|
||||
@ -10,17 +8,6 @@ import semver from 'semver'
|
||||
|
||||
let selectorsDiff, variablesDiff, version
|
||||
|
||||
// Because of a change in analyzer this was incorrectly in the list
|
||||
const variableAllowList = ['$marketing-all-spacers']
|
||||
const selectorAllowList = [
|
||||
'.Truncate .Truncate-text',
|
||||
'.Truncate .Truncate-text+.Truncate-text',
|
||||
'.Truncate .Truncate-text.Truncate-text--expandable:active',
|
||||
'.Truncate .Truncate-text.Truncate-text--expandable:focus',
|
||||
'.Truncate .Truncate-text.Truncate-text--expandable:hover',
|
||||
'.Truncate .Truncate-text.Truncate-text--primary'
|
||||
]
|
||||
|
||||
beforeAll(async () => {
|
||||
selectorsDiff = getSelectorDiff()
|
||||
variablesDiff = getVariableDiff()
|
||||
@ -33,48 +20,3 @@ describe('css', () => {
|
||||
expect(supportStats.size).toEqual(0)
|
||||
})
|
||||
})
|
||||
|
||||
describe('deprecations', () => {
|
||||
it('A selector was marked as deprecated but not removed from the codebase', () => {
|
||||
const removed = selectorsDiff['removed']
|
||||
const deprecations = getDeprecatedSelectors(version.raw)
|
||||
if (deprecations.length) {
|
||||
// Selectors were marked to be deprecated in this version,
|
||||
// but were not removed from the codebase. Please remove these selectors.
|
||||
expect(deprecations.sort()).toEqual(removed.sort()) // eslint-disable-line jest/no-conditional-expect
|
||||
}
|
||||
})
|
||||
|
||||
it('A selector was removed from the codebase but not added to upcoming major release deprecations file.', () => {
|
||||
const removedSelectors = selectorsDiff['removed'].filter(v => !selectorAllowList.includes(v))
|
||||
|
||||
if (version.minor !== 0 && version.patch !== 0) {
|
||||
const nextMajor = semver.inc(version.raw, 'major')
|
||||
const deprecations = getDeprecatedSelectors(nextMajor)
|
||||
// Some classes were removed from the codebase, but not found
|
||||
// in the next upcoming major release deprecation.js
|
||||
expect(deprecations.sort()).toEqual(expect.arrayContaining(removedSelectors.sort())) // eslint-disable-line jest/no-conditional-expect
|
||||
}
|
||||
})
|
||||
|
||||
it('A variable was marked as deprecated but not removed from the codebase', () => {
|
||||
const removed = variablesDiff.removed
|
||||
const deprecations = getDeprecatedVariables(version.raw)
|
||||
if (deprecations.length) {
|
||||
// Variables were marked to be deprecated in this version,
|
||||
// but were not removed from the codebase. Please remove these variables.
|
||||
expect(deprecations.sort()).toEqual(removed.sort()) // eslint-disable-line jest/no-conditional-expect
|
||||
}
|
||||
})
|
||||
|
||||
it('A variable was removed from the codebase and added to upcoming major release deprecations file.', () => {
|
||||
const removed = variablesDiff.removed.filter(v => !variableAllowList.includes(v))
|
||||
if (version.minor !== 0 && version.patch !== 0) {
|
||||
const nextMajor = semver.inc(version.raw, 'major')
|
||||
const deprecations = getDeprecatedVariables(nextMajor)
|
||||
// Some variables were removed from the codebase, but not found
|
||||
// in the next upcoming major release deprecation.json
|
||||
expect(deprecations).toEqual(expect.arrayContaining(removed)) // eslint-disable-line jest/no-conditional-expect
|
||||
}
|
||||
})
|
||||
})
|
||||
|
||||
@ -33,20 +33,6 @@ export function getCurrentVersion() {
|
||||
return semver.parse(pkg.version)
|
||||
}
|
||||
|
||||
export function getDeprecatedSelectors(version) {
|
||||
if (getCurrentVersion().raw === version) return []
|
||||
let deprecations = JSON.parse(fs.readFileSync(join(currentPath, './dist/deprecations.json')))
|
||||
deprecations = deprecations.versions[version] || []
|
||||
return deprecations.reduce((list, deprecation) => list.concat(deprecation.selectors), []).filter(v => v)
|
||||
}
|
||||
|
||||
export function getDeprecatedVariables(version) {
|
||||
if (getCurrentVersion().raw === version) return []
|
||||
let deprecations = JSON.parse(fs.readFileSync(join(currentPath, './dist/deprecations.json')))
|
||||
deprecations = deprecations.versions[version] || []
|
||||
return deprecations.reduce((list, deprecation) => list.concat(deprecation.variables), []).filter(v => v)
|
||||
}
|
||||
|
||||
export function getPackageStats(packageName) {
|
||||
const stats = JSON.parse(fs.readFileSync(join(currentPath, './dist', `./stats/${packageName}.json`)))
|
||||
return stats
|
||||
|
||||
761
deprecations.js
761
deprecations.js
@ -1,749 +1,24 @@
|
||||
/**
|
||||
Deprecated Selectors
|
||||
-------------------------
|
||||
These are deprecated selectors and should not be used. They include a replacement value,
|
||||
which can be an array or null.
|
||||
|
||||
* 'deprecated-selector': 'replacement-selector' <-- Replace with this selector.
|
||||
* 'deprecated-selector': ['replacement-1', 'replacement-2'] <-- Replace with one of these selectors.
|
||||
* 'deprecated-selector': null <-- No option available, remove selector.
|
||||
*/
|
||||
|
||||
import fs from 'fs'
|
||||
|
||||
/*
|
||||
* This object's keys are (semver) version numbers, and the
|
||||
* values are arrays of objects each with a "selectors"
|
||||
* array and a "message" string.
|
||||
*/
|
||||
const versionDeprecations = {
|
||||
'17.6.1': [
|
||||
{
|
||||
selectors: [
|
||||
'.break-word'
|
||||
],
|
||||
message: 'The .break-word class has been deprecated, use .wb-break-word instead.'
|
||||
}
|
||||
],
|
||||
'17.0.0': [
|
||||
{
|
||||
variables: ['$h000-size', '$h000-size-mobile'],
|
||||
message: `This variable is deprecated, please refer to the Marketing Typography documentation.`
|
||||
},
|
||||
{
|
||||
selectors: ['.h000-mktg', '.h00-mktg', '.lead-mktg'],
|
||||
message: `This selector is deprecated, please refer to the Marketing Typography documentation.`
|
||||
},
|
||||
{
|
||||
selectors: [
|
||||
'.p-7',
|
||||
'.p-8',
|
||||
'.p-9',
|
||||
'.p-10',
|
||||
'.p-11',
|
||||
'.p-12',
|
||||
'.p-sm-7',
|
||||
'.p-sm-8',
|
||||
'.p-sm-9',
|
||||
'.p-sm-10',
|
||||
'.p-sm-11',
|
||||
'.p-sm-12',
|
||||
'.p-md-7',
|
||||
'.p-md-8',
|
||||
'.p-md-9',
|
||||
'.p-md-10',
|
||||
'.p-md-11',
|
||||
'.p-md-12',
|
||||
'.p-lg-7',
|
||||
'.p-lg-8',
|
||||
'.p-lg-9',
|
||||
'.p-lg-10',
|
||||
'.p-lg-11',
|
||||
'.p-lg-12',
|
||||
'.p-xl-7',
|
||||
'.p-xl-8',
|
||||
'.p-xl-9',
|
||||
'.p-xl-10',
|
||||
'.p-xl-11',
|
||||
'.p-xl-12'
|
||||
],
|
||||
message: `This selector is deprecated, please use pt-X, pr-X, pb-X, and pl-X to set paddings on all sides above spacing level 6.`
|
||||
},
|
||||
{
|
||||
selectors: [
|
||||
'.top-n0',
|
||||
'.right-n0',
|
||||
'.bottom-n0',
|
||||
'.left-n0',
|
||||
'.top-md-n0',
|
||||
'.right-md-n0',
|
||||
'.bottom-md-n0',
|
||||
'.left-md-n0',
|
||||
'.top-lg-n0',
|
||||
'.right-lg-n0',
|
||||
'.bottom-lg-n0',
|
||||
'.left-lg-n0',
|
||||
'.mt-n0',
|
||||
'.mb-n0',
|
||||
'.mt-sm-n0',
|
||||
'.mb-sm-n0',
|
||||
'.mt-md-n0',
|
||||
'.mb-md-n0',
|
||||
'.mt-lg-n0',
|
||||
'.mb-lg-n0',
|
||||
'.mt-xl-n0',
|
||||
'.mb-xl-n0'
|
||||
],
|
||||
message: `This selector is deprecated, please use a non-negative selector to set the value to 0 (e.g. top-md-0).`
|
||||
},
|
||||
{
|
||||
selectors: ['.bg-shade-gradient'],
|
||||
message: `This selector is deprecated, please use "color-bg-secondary" instead of "bg-shade-gradient".`
|
||||
},
|
||||
{
|
||||
selectors: ['.color-border-overlay'],
|
||||
message: `Please use the ".color-border-primary" class instead of ".color-border-overlay".`
|
||||
},
|
||||
{
|
||||
selectors: [':-ms-input-placeholder'],
|
||||
message: 'Browserslist update to match github has removed the need for this pseudoselector'
|
||||
}
|
||||
],
|
||||
'16.0.0': [
|
||||
{
|
||||
selectors: [
|
||||
'.btn-blue',
|
||||
'.btn-blue:focus',
|
||||
'.btn-blue.focus',
|
||||
'.btn-blue:hover',
|
||||
'.btn-blue.hover',
|
||||
'.btn-blue:active',
|
||||
'.btn-blue.selected',
|
||||
'.btn-blue[aria-selected=true]',
|
||||
'[open]>.btn-blue',
|
||||
'.btn-blue:disabled',
|
||||
'.btn-blue.disabled',
|
||||
'.btn-blue[aria-disabled=true]',
|
||||
'.btn-blue .Counter',
|
||||
'.markdown-body li',
|
||||
'.input-dark',
|
||||
'.input-dark:-ms-input-placeholder',
|
||||
'.input-dark::-ms-input-placeholder',
|
||||
'.input-dark::placeholder',
|
||||
'.input-dark.focus',
|
||||
'.input-dark:focus',
|
||||
'::-ms-input-placeholder',
|
||||
'.border-blue',
|
||||
'.border-blue-light',
|
||||
'.border-green',
|
||||
'.border-green-light',
|
||||
'.border-red',
|
||||
'.border-red-light',
|
||||
'.border-purple',
|
||||
'.border-yellow',
|
||||
'.border-gray-light',
|
||||
'.border-gray-dark',
|
||||
'.border-black-fade',
|
||||
'.border-white-fade',
|
||||
'.border-white-fade-15',
|
||||
'.border-white-fade-30',
|
||||
'.border-white-fade-50',
|
||||
'.border-white-fade-70',
|
||||
'.border-white-fade-85',
|
||||
'.box-shadow',
|
||||
'.box-shadow-medium',
|
||||
'.box-shadow-large',
|
||||
'.box-shadow-extra-large',
|
||||
'.bg-white',
|
||||
'.bg-blue',
|
||||
'.bg-blue-light',
|
||||
'.bg-gray-dark',
|
||||
'.bg-gray',
|
||||
'.bg-gray-light',
|
||||
'.bg-green',
|
||||
'.bg-green-light',
|
||||
'.bg-red',
|
||||
'.bg-red-light',
|
||||
'.bg-yellow',
|
||||
'.bg-yellow-light',
|
||||
'.bg-yellow-dark',
|
||||
'.bg-purple',
|
||||
'.bg-pink',
|
||||
'.bg-purple-light',
|
||||
'.bg-orange',
|
||||
'.color-gray-0',
|
||||
'.bg-gray-0',
|
||||
'.color-gray-1',
|
||||
'.bg-gray-1',
|
||||
'.color-gray-2',
|
||||
'.bg-gray-2',
|
||||
'.color-gray-3',
|
||||
'.bg-gray-3',
|
||||
'.color-gray-4',
|
||||
'.bg-gray-4',
|
||||
'.color-gray-5',
|
||||
'.bg-gray-5',
|
||||
'.color-gray-6',
|
||||
'.bg-gray-6',
|
||||
'.color-gray-7',
|
||||
'.bg-gray-7',
|
||||
'.color-gray-8',
|
||||
'.bg-gray-8',
|
||||
'.color-gray-9',
|
||||
'.bg-gray-9',
|
||||
'.color-blue-0',
|
||||
'.bg-blue-0',
|
||||
'.color-blue-1',
|
||||
'.bg-blue-1',
|
||||
'.color-blue-2',
|
||||
'.bg-blue-2',
|
||||
'.color-blue-3',
|
||||
'.bg-blue-3',
|
||||
'.color-blue-4',
|
||||
'.bg-blue-4',
|
||||
'.color-blue-5',
|
||||
'.bg-blue-5',
|
||||
'.color-blue-6',
|
||||
'.bg-blue-6',
|
||||
'.color-blue-7',
|
||||
'.bg-blue-7',
|
||||
'.color-blue-8',
|
||||
'.bg-blue-8',
|
||||
'.color-blue-9',
|
||||
'.bg-blue-9',
|
||||
'.color-green-0',
|
||||
'.bg-green-0',
|
||||
'.color-green-1',
|
||||
'.bg-green-1',
|
||||
'.color-green-2',
|
||||
'.bg-green-2',
|
||||
'.color-green-3',
|
||||
'.bg-green-3',
|
||||
'.color-green-4',
|
||||
'.bg-green-4',
|
||||
'.color-green-5',
|
||||
'.bg-green-5',
|
||||
'.color-green-6',
|
||||
'.bg-green-6',
|
||||
'.color-green-7',
|
||||
'.bg-green-7',
|
||||
'.color-green-8',
|
||||
'.bg-green-8',
|
||||
'.color-green-9',
|
||||
'.bg-green-9',
|
||||
'.color-yellow-0',
|
||||
'.bg-yellow-0',
|
||||
'.color-yellow-1',
|
||||
'.bg-yellow-1',
|
||||
'.color-yellow-2',
|
||||
'.bg-yellow-2',
|
||||
'.color-yellow-3',
|
||||
'.bg-yellow-3',
|
||||
'.color-yellow-4',
|
||||
'.bg-yellow-4',
|
||||
'.color-yellow-5',
|
||||
'.bg-yellow-5',
|
||||
'.color-yellow-6',
|
||||
'.bg-yellow-6',
|
||||
'.color-yellow-7',
|
||||
'.bg-yellow-7',
|
||||
'.color-yellow-8',
|
||||
'.bg-yellow-8',
|
||||
'.color-yellow-9',
|
||||
'.bg-yellow-9',
|
||||
'.color-orange-0',
|
||||
'.bg-orange-0',
|
||||
'.color-orange-1',
|
||||
'.bg-orange-1',
|
||||
'.color-orange-2',
|
||||
'.bg-orange-2',
|
||||
'.color-orange-3',
|
||||
'.bg-orange-3',
|
||||
'.color-orange-4',
|
||||
'.bg-orange-4',
|
||||
'.color-orange-5',
|
||||
'.bg-orange-5',
|
||||
'.color-orange-6',
|
||||
'.bg-orange-6',
|
||||
'.color-orange-7',
|
||||
'.bg-orange-7',
|
||||
'.color-orange-8',
|
||||
'.bg-orange-8',
|
||||
'.color-orange-9',
|
||||
'.bg-orange-9',
|
||||
'.color-red-0',
|
||||
'.bg-red-0',
|
||||
'.color-red-1',
|
||||
'.bg-red-1',
|
||||
'.color-red-2',
|
||||
'.bg-red-2',
|
||||
'.color-red-3',
|
||||
'.bg-red-3',
|
||||
'.color-red-4',
|
||||
'.bg-red-4',
|
||||
'.color-red-5',
|
||||
'.bg-red-5',
|
||||
'.color-red-6',
|
||||
'.bg-red-6',
|
||||
'.color-red-7',
|
||||
'.bg-red-7',
|
||||
'.color-red-8',
|
||||
'.bg-red-8',
|
||||
'.color-red-9',
|
||||
'.bg-red-9',
|
||||
'.color-purple-0',
|
||||
'.bg-purple-0',
|
||||
'.color-purple-1',
|
||||
'.bg-purple-1',
|
||||
'.color-purple-2',
|
||||
'.bg-purple-2',
|
||||
'.color-purple-3',
|
||||
'.bg-purple-3',
|
||||
'.color-purple-4',
|
||||
'.bg-purple-4',
|
||||
'.color-purple-5',
|
||||
'.bg-purple-5',
|
||||
'.color-purple-6',
|
||||
'.bg-purple-6',
|
||||
'.color-purple-7',
|
||||
'.bg-purple-7',
|
||||
'.color-purple-8',
|
||||
'.bg-purple-8',
|
||||
'.color-purple-9',
|
||||
'.bg-purple-9',
|
||||
'.color-pink-0',
|
||||
'.bg-pink-0',
|
||||
'.color-pink-1',
|
||||
'.bg-pink-1',
|
||||
'.color-pink-2',
|
||||
'.bg-pink-2',
|
||||
'.color-pink-3',
|
||||
'.bg-pink-3',
|
||||
'.color-pink-4',
|
||||
'.bg-pink-4',
|
||||
'.color-pink-5',
|
||||
'.bg-pink-5',
|
||||
'.color-pink-6',
|
||||
'.bg-pink-6',
|
||||
'.color-pink-7',
|
||||
'.bg-pink-7',
|
||||
'.color-pink-8',
|
||||
'.bg-pink-8',
|
||||
'.color-pink-9',
|
||||
'.bg-pink-9',
|
||||
'.text-blue',
|
||||
'.text-red',
|
||||
'.text-gray-light',
|
||||
'.text-gray',
|
||||
'.text-gray-dark',
|
||||
'.text-green',
|
||||
'.text-yellow',
|
||||
'.text-orange',
|
||||
'.text-orange-light',
|
||||
'.text-purple',
|
||||
'.text-pink',
|
||||
'.text-white',
|
||||
'.link-gray',
|
||||
'.link-gray:hover',
|
||||
'.link-gray-dark',
|
||||
'.link-gray-dark:hover',
|
||||
'.link-hover-blue:hover',
|
||||
'.muted-link',
|
||||
'.muted-link:hover',
|
||||
'.text-shadow-dark',
|
||||
'.text-shadow-light',
|
||||
'.dropdown-menu-dark',
|
||||
'.dropdown-menu-dark::before',
|
||||
'.dropdown-menu-dark::after',
|
||||
'.dropdown-menu-dark .dropdown-header',
|
||||
'.dropdown-menu-dark .dropdown-divider',
|
||||
'.dropdown-menu-dark .dropdown-item',
|
||||
'.dropdown-menu-dark.dropdown-menu-w::before',
|
||||
'.dropdown-menu-dark.dropdown-menu-w::after',
|
||||
'.dropdown-menu-dark.dropdown-menu-e::before',
|
||||
'.dropdown-menu-dark.dropdown-menu-e::after',
|
||||
'.dropdown-menu-dark.dropdown-menu-ne::before',
|
||||
'.dropdown-menu-dark.dropdown-menu-ne::after',
|
||||
'.Label--outline',
|
||||
'.Label--gray',
|
||||
'.Label--gray-darker',
|
||||
'.Label--yellow',
|
||||
'.Label--orange',
|
||||
'.Label--red',
|
||||
'.Label--outline-green',
|
||||
'.Label--green',
|
||||
'.Label--blue',
|
||||
'.Label--purple',
|
||||
'.Label--pink',
|
||||
'.State--green',
|
||||
'.State--red',
|
||||
'.State--purple',
|
||||
'.Counter--gray-light',
|
||||
'.Counter--gray',
|
||||
'.btn-transparent:active'
|
||||
],
|
||||
message: `This selector is not available in Primer CSS 16.0.0. Please refer to the documentation.`
|
||||
},
|
||||
{
|
||||
variables: [
|
||||
'$bg-black',
|
||||
'$bg-black-fade',
|
||||
'$bg-blue',
|
||||
'$bg-blue-light',
|
||||
'$bg-diffstat-added',
|
||||
'$bg-diffstat-deleted',
|
||||
'$bg-diffstat-neutral',
|
||||
'$bg-gray',
|
||||
'$bg-gray-dark',
|
||||
'$bg-gray-light',
|
||||
'$bg-green',
|
||||
'$bg-green-light',
|
||||
'$bg-orange',
|
||||
'$bg-pink',
|
||||
'$bg-purple',
|
||||
'$bg-purple-light',
|
||||
'$bg-red',
|
||||
'$bg-red-light',
|
||||
'$bg-white',
|
||||
'$bg-yellow',
|
||||
'$bg-yellow-dark',
|
||||
'$bg-yellow-light',
|
||||
'$black',
|
||||
'$black-fade-15',
|
||||
'$black-fade-30',
|
||||
'$black-fade-50',
|
||||
'$black-fade-70',
|
||||
'$black-fade-85',
|
||||
'$blue',
|
||||
'$blue-000',
|
||||
'$blue-100',
|
||||
'$blue-200',
|
||||
'$blue-300',
|
||||
'$blue-400',
|
||||
'$blue-500',
|
||||
'$blue-600',
|
||||
'$blue-700',
|
||||
'$blue-800',
|
||||
'$blue-900',
|
||||
'$border-black-fade',
|
||||
'$border-blue',
|
||||
'$border-blue-light',
|
||||
'$border-color',
|
||||
'$border-color-button',
|
||||
'$border-gray',
|
||||
'$border-gray-dark',
|
||||
'$border-gray-darker',
|
||||
'$border-gray-light',
|
||||
'$border-green',
|
||||
'$border-green-light',
|
||||
'$border-purple',
|
||||
'$border-red',
|
||||
'$border-red-light',
|
||||
'$border-white',
|
||||
'$border-white-fade',
|
||||
'$border-yellow',
|
||||
'$box-shadow',
|
||||
'$box-shadow-extra-large',
|
||||
'$box-shadow-focus',
|
||||
'$box-shadow-highlight',
|
||||
'$box-shadow-inset',
|
||||
'$box-shadow-large',
|
||||
'$box-shadow-medium',
|
||||
'$btn-active-shadow',
|
||||
'$btn-input-focus-shadow',
|
||||
'$form-control-shadow',
|
||||
'$gray',
|
||||
'$gray-000',
|
||||
'$gray-100',
|
||||
'$gray-200',
|
||||
'$gray-300',
|
||||
'$gray-400',
|
||||
'$gray-500',
|
||||
'$gray-600',
|
||||
'$gray-700',
|
||||
'$gray-800',
|
||||
'$gray-900',
|
||||
'$gray-dark',
|
||||
'$gray-light',
|
||||
'$green',
|
||||
'$green-000',
|
||||
'$green-100',
|
||||
'$green-200',
|
||||
'$green-300',
|
||||
'$green-400',
|
||||
'$green-500',
|
||||
'$green-600',
|
||||
'$green-700',
|
||||
'$green-800',
|
||||
'$green-900',
|
||||
'$orange',
|
||||
'$orange-000',
|
||||
'$orange-100',
|
||||
'$orange-200',
|
||||
'$orange-300',
|
||||
'$orange-400',
|
||||
'$orange-500',
|
||||
'$orange-600',
|
||||
'$orange-700',
|
||||
'$orange-800',
|
||||
'$orange-900',
|
||||
'$pink-000',
|
||||
'$pink-100',
|
||||
'$pink-200',
|
||||
'$pink-300',
|
||||
'$pink-400',
|
||||
'$pink-500',
|
||||
'$pink-600',
|
||||
'$pink-700',
|
||||
'$pink-800',
|
||||
'$pink-900',
|
||||
'$purple',
|
||||
'$purple-000',
|
||||
'$purple-100',
|
||||
'$purple-200',
|
||||
'$purple-300',
|
||||
'$purple-400',
|
||||
'$purple-500',
|
||||
'$purple-600',
|
||||
'$purple-700',
|
||||
'$purple-800',
|
||||
'$purple-900',
|
||||
'$red',
|
||||
'$red-000',
|
||||
'$red-100',
|
||||
'$red-200',
|
||||
'$red-300',
|
||||
'$red-400',
|
||||
'$red-500',
|
||||
'$red-600',
|
||||
'$red-700',
|
||||
'$red-800',
|
||||
'$red-900',
|
||||
'$text-black',
|
||||
'$text-blue',
|
||||
'$text-gray',
|
||||
'$text-gray-dark',
|
||||
'$text-gray-light',
|
||||
'$text-green',
|
||||
'$text-orange',
|
||||
'$text-orange-light',
|
||||
'$text-pink',
|
||||
'$text-purple',
|
||||
'$text-red',
|
||||
'$text-white',
|
||||
'$text-yellow',
|
||||
'$tooltip-background-color',
|
||||
'$tooltip-text-color',
|
||||
'$white',
|
||||
'$white-fade-15',
|
||||
'$white-fade-30',
|
||||
'$white-fade-50',
|
||||
'$white-fade-70',
|
||||
'$white-fade-85',
|
||||
'$yellow',
|
||||
'$yellow-000',
|
||||
'$yellow-100',
|
||||
'$yellow-200',
|
||||
'$yellow-300',
|
||||
'$yellow-400',
|
||||
'$yellow-500',
|
||||
'$yellow-600',
|
||||
'$yellow-700',
|
||||
'$yellow-800',
|
||||
'$yellow-900',
|
||||
'$blue-mktg',
|
||||
'$green-mktg'
|
||||
],
|
||||
message: `This variable is not available in Primer CSS 16.0.0. Please refer to the documentation.`
|
||||
}
|
||||
],
|
||||
'15.0.0': [
|
||||
{
|
||||
selectors: [
|
||||
'.btn-outline:active .Counter',
|
||||
'.btn-outline.selected .Counter',
|
||||
'.btn-outline[aria-selected=true] .Counter',
|
||||
'.tabnav .Counter',
|
||||
'.SideNav-item:hover::before',
|
||||
'.SideNav-item:focus::before',
|
||||
'.UnderlineNav-item:hover .UnderlineNav-octicon',
|
||||
'.UnderlineNav-item:focus .UnderlineNav-octicon',
|
||||
'.UnderlineNav--right .UnderlineNav-item',
|
||||
'.pagination::before',
|
||||
'.pagination::after',
|
||||
'.pagination a:first-child',
|
||||
'.pagination span:first-child',
|
||||
'.pagination em:first-child',
|
||||
'.pagination a:last-child',
|
||||
'.pagination span:last-child',
|
||||
'.pagination em:last-child',
|
||||
'.pagination .selected',
|
||||
'.IssueLabel--big .g-emoji',
|
||||
'.IssueLabel--big:hover',
|
||||
'.SelectMenu-item[aria-checked="true"]',
|
||||
'.SelectMenu-item[aria-checked="true"] .SelectMenu-icon--check',
|
||||
'.SelectMenu-tab:not([aria-checked="true"]):hover',
|
||||
'.SelectMenu-tab:not([aria-checked="true"]):active',
|
||||
'.SelectMenu-tab:not([aria-selected="true"]):hover'
|
||||
],
|
||||
message: `This selector is not available in Primer CSS 15.0.0. Please refer to the documentation.`
|
||||
}
|
||||
],
|
||||
'14.4.0': [
|
||||
{
|
||||
selectors: [
|
||||
'.breadcrumb-item[aria-current]',
|
||||
'.breadcrumb-item[aria-current]::after',
|
||||
'.menu-item[aria-current]',
|
||||
'.menu-item[aria-current]::before',
|
||||
'.tabnav-tab[aria-current]',
|
||||
'.filter-item[aria-current]',
|
||||
'.SideNav-item[aria-current="page"]',
|
||||
'.SideNav-item[aria-current="page"]::before',
|
||||
'.SideNav-subItem[aria-current="page"]',
|
||||
'.subnav-item[aria-current]',
|
||||
'.UnderlineNav-item[aria-current]',
|
||||
'.UnderlineNav-item[aria-current] .UnderlineNav-octicon',
|
||||
'.pagination [aria-current]',
|
||||
'.pagination [aria-current]:hover'
|
||||
],
|
||||
message: `These selectors are not needed anymore.`
|
||||
}
|
||||
],
|
||||
'14.0.0': [
|
||||
{
|
||||
selectors: [
|
||||
'.SelectMenu-item+.SelectMenu-item',
|
||||
'.SelectMenu-divider:first-child',
|
||||
'.SelectMenu-divider:last-child',
|
||||
'.SelectMenu--hasFilter .SelectMenu-item:last-child',
|
||||
'.SelectMenu-item[aria-checked="true"] .SelectMenu-icon'
|
||||
],
|
||||
message: `These selectors are deprecated and not used anymore.`
|
||||
},
|
||||
{
|
||||
selectors: [
|
||||
'.flex-item-equal',
|
||||
'.flex-sm-item-equal',
|
||||
'.flex-md-item-equal',
|
||||
'.flex-lg-item-equal',
|
||||
'.flex-xl-item-equal'
|
||||
],
|
||||
message: `This variable is deprecated. Use "flex-1" instead.`
|
||||
},
|
||||
{
|
||||
selectors: ['.UnderlineNav-item.selected', '.UnderlineNav-item.selected .UnderlineNav-octicon'],
|
||||
message: `Please use aria-selected="true" to indicate the selected state of an UnderlineNav item.`
|
||||
},
|
||||
{
|
||||
variables: ['$status-pending'],
|
||||
message: `This variable is deprecated.`
|
||||
},
|
||||
{
|
||||
variables: ['$highlight-yellow'],
|
||||
message: `This variable is deprecated.`
|
||||
},
|
||||
{
|
||||
variables: ['$repo-private-text', '$repo-private-bg', '$repo-private-icon'],
|
||||
message: `These variables are deprecated.`
|
||||
},
|
||||
{
|
||||
variables: ['$marketingSpacers', '$allSpacers'],
|
||||
message: `Please use the $marketing-spacers and $marketing-all-spacers variables.`
|
||||
},
|
||||
{
|
||||
variables: ['$exploregrid-item-border-radius'],
|
||||
message: `This variable is deprecated. Use "4px" instead.`
|
||||
},
|
||||
{
|
||||
variables: ['$stats-switcher-py', '$stats-viewport-height'],
|
||||
message: `These variables are deprecated.`
|
||||
},
|
||||
{
|
||||
variables: ['$min_tab_size', '$max_tab_size'],
|
||||
message: `These variables are deprecated.`
|
||||
}
|
||||
],
|
||||
'13.0.0': [
|
||||
{
|
||||
selectors: [
|
||||
'.btn-purple',
|
||||
'.btn-purple:focus',
|
||||
'.btn-purple.focus',
|
||||
'.btn-purple:hover',
|
||||
'.btn-purple.hover',
|
||||
'.btn-purple:active',
|
||||
'.btn-purple.selected',
|
||||
'[open]>.btn-purple',
|
||||
'.btn-purple:disabled',
|
||||
'.btn-purple.disabled',
|
||||
'.btn-purple .Counter'
|
||||
],
|
||||
message: `Please don't make purple buttons.`
|
||||
},
|
||||
{
|
||||
selectors: ['.text-pending'],
|
||||
message: `Please use the "text-yellow" class instead of "text-pending".`
|
||||
},
|
||||
{
|
||||
selectors: ['.bg-pending'],
|
||||
message: `Please use the "bg-yellow-dark" class instead of "bg-pending".`
|
||||
},
|
||||
{
|
||||
selectors: [
|
||||
'.container',
|
||||
'.container::before',
|
||||
'.container::after',
|
||||
'.columns',
|
||||
'.columns::before',
|
||||
'.columns::after',
|
||||
'.column',
|
||||
'.one-third',
|
||||
'.two-thirds',
|
||||
'.one-fourth',
|
||||
'.one-half',
|
||||
'.three-fourths',
|
||||
'.one-fifth',
|
||||
'.four-fifths'
|
||||
],
|
||||
message: `Please use [grid classes](https://primer.style/css/objects/grid).`
|
||||
},
|
||||
{
|
||||
selectors: ['.centered'],
|
||||
message: `You can use the "mx-auto" class to center any element.`
|
||||
},
|
||||
{
|
||||
selectors: [
|
||||
'.dropdown-menu-content',
|
||||
'.dropdown.active .dropdown-menu-content',
|
||||
'.dropdown-menu-content.anim-scale-in'
|
||||
],
|
||||
message: `The "dropdown-menu-content" class is unnecessary.`
|
||||
}
|
||||
]
|
||||
}
|
||||
const deprecations = JSON.parse(fs.readFileSync('./dist/deprecations.json'))
|
||||
|
||||
import semver from 'semver'
|
||||
const pkg = JSON.parse(fs.readFileSync('./package.json'))
|
||||
const {version: CURRENT_VERSION} = pkg
|
||||
|
||||
// map selectors to the version and message of their deprecation
|
||||
const selectorDeprecations = new Map()
|
||||
const variableDeprecations = new Map()
|
||||
for (const [version, deps] of Object.entries(versionDeprecations)) {
|
||||
for (const {selectors = [], variables = [], message} of deps) {
|
||||
for (const selector of selectors) {
|
||||
selectorDeprecations.set(selector, {version, message})
|
||||
}
|
||||
for (const variable of variables) {
|
||||
variableDeprecations.set(variable, {version, message})
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function isSelectorDeprecated(selector, version = CURRENT_VERSION) {
|
||||
const deprecation = selectorDeprecations.get(selector)
|
||||
return deprecation ? semver.gte(deprecation.version, version) : false
|
||||
}
|
||||
|
||||
function isVariableDeprecated(variable, version = CURRENT_VERSION) {
|
||||
const deprecation = variableDeprecations.get(variable)
|
||||
return deprecation ? semver.gte(deprecation.version, version) : false
|
||||
}
|
||||
const deprecatedSelectors = deprecations['selectors']
|
||||
const deprecatedSassVariables = deprecations['variables']
|
||||
const deprecatedSassMixins = deprecations['mixins']
|
||||
|
||||
export {
|
||||
versionDeprecations,
|
||||
selectorDeprecations,
|
||||
variableDeprecations,
|
||||
isSelectorDeprecated,
|
||||
isVariableDeprecated
|
||||
deprecatedSelectors,
|
||||
deprecatedSassVariables,
|
||||
deprecatedSassMixins
|
||||
}
|
||||
|
||||
@ -4,58 +4,63 @@ title: Deprecation data
|
||||
|
||||
As of version 12.7.0, we publish CSS selector and SCSS variable deprecation data (as of 14.0.0) with `@primer/css`. You can access the data via the [Node API](#node) or as [JSON](#json).
|
||||
|
||||
**Keep in mind that this data includes both active and _planned_ deprecations.** The [Node API](#node) is the best way to determine whether a selector or variable is deprecated for the version of `@primer/css` you've installed.
|
||||
To deprecate a class, variable, or mixin, add the element to the [deprecations.js](https://github.com/primer/css/blob/main/deprecations.js) file with it's replacement value.
|
||||
|
||||
The replacement can be:
|
||||
|
||||
* A `String` for a direct replacement.
|
||||
* An `Array` for multiple replacement options.
|
||||
* `null` to indicate there is no replacement.
|
||||
|
||||
This could look something like this:
|
||||
|
||||
```js
|
||||
const deprecations = {
|
||||
"deprecated-1": "replacement",
|
||||
"deprecated-2": ["replacement-1", "replacement-2"],
|
||||
"deprecated-3": null
|
||||
}
|
||||
```
|
||||
|
||||
## JSON
|
||||
|
||||
The JSON data is available in the unpacked node module's `dist/deprecations.json`, and is an object with the following structure:
|
||||
|
||||
* `versions` is an object whose keys are version numbers (e.g. `13.0.0`) and values are deprecation messages, each of which has a `message` string and a `selectors` and/or `variables` array:
|
||||
```json
|
||||
{
|
||||
"selectors" {...},
|
||||
"variables": {...},
|
||||
"mixins": {...}
|
||||
}
|
||||
```
|
||||
|
||||
```json
|
||||
{
|
||||
"versions": {
|
||||
"14.0.0": [
|
||||
{
|
||||
"variables": ["$min_tab_size", "$max_tab_size"],
|
||||
"message": "These variables have been deprecated."
|
||||
}
|
||||
],
|
||||
"13.0.0": [
|
||||
{
|
||||
"selectors": [".btn-purple"],
|
||||
"message": "Please don't make purple buttons."
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Deprecation messages strings may include Markdown so that they can be included in the [changelog].
|
||||
|
||||
* `selectors` is an object mapping CSS selectors (e.g. `.btn-purple`) to the version in which they are _or will be_ deprecated:
|
||||
* `selectors` is an object mapping CSS selectors to their replacements. If the replacement is an Array, then there's multiple options. If the replacement is null then there are no replacements.
|
||||
|
||||
```json
|
||||
{
|
||||
"selectors": {
|
||||
".btn-purple": {
|
||||
"version": "13.0.0",
|
||||
"message": "Please don't make purple buttons."
|
||||
}
|
||||
"deprecated-class": "replacement-class"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
* `variables` is an object mapping SCSS variables (including the leading `$`, e.g. `$status-pending`) to the version in which they are or will be deprecated:
|
||||
* `variables` is an object mapping SCSS variables to their replacement SCSS variable.
|
||||
|
||||
```json
|
||||
{
|
||||
"variables": {
|
||||
"$status-pending": {
|
||||
"version": "14.0.0",
|
||||
"message": "This variable is unused in Primer, and is deprecated."
|
||||
"$deprecated-variable": "$replacement-variable"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
* `mixins` is an object mapping SCSS mixins to their replacement SCSS mixins.
|
||||
|
||||
```json
|
||||
{
|
||||
"mixins": {
|
||||
"deprecated-mixin": "replacement-mixin"
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -65,65 +70,13 @@ The JSON data is available in the unpacked node module's `dist/deprecations.json
|
||||
The Node API for selector deprecations is available at
|
||||
`@primer/css/deprecations`.
|
||||
|
||||
**Note:** Because we have chosen not to bundle any runtime dependencies with
|
||||
`@primer/css`, you will need to install the [semver] dependency yourself:
|
||||
|
||||
```shell
|
||||
npm install semver
|
||||
```
|
||||
|
||||
### `versionDeprecations`
|
||||
This is the object literal form of the [JSON data's](#json) `versions` object.
|
||||
For instance, to list all of the deprecations:
|
||||
### Example:
|
||||
|
||||
```js
|
||||
const {versionDeprecations} = require('@primer/css/deprecations')
|
||||
for (const [version, deprecations] of Object.entries(versionDeprecations)) {
|
||||
console.log(`${version}: ${deprecations.length} deprecations`)
|
||||
}
|
||||
const {
|
||||
deprecatedSelectors,
|
||||
deprecatedSassVariables,
|
||||
deprecatedSassMixins
|
||||
} = require('@primer/css/deprecations')
|
||||
|
||||
```
|
||||
|
||||
### `selectorDeprecations`
|
||||
This is a [Map] object with keys for each CSS selector mapped to the deprecation info:
|
||||
|
||||
```js
|
||||
const {selectorDeprecations} = require('@primer/css/deprecations')
|
||||
console.log(`Purple buttons are going away? ${selectorDeprecations.has('.btn-purple')}`)
|
||||
// "Purple buttons are going away? true"
|
||||
```
|
||||
|
||||
### `isSelectorDeprecated(selector[, version])`
|
||||
Returns `true` if the CSS `selector` will have been deprecated (removed) _by_ the specified [semver] version.
|
||||
|
||||
```js
|
||||
const {isSelectorDeprecated} = require('@primer/css/deprecations')
|
||||
console.log(`Purple buttons are bad? ${isSelectorDeprecated('.btn-purple')}`)
|
||||
// "Purple buttons are bad? true"
|
||||
console.log(`Primary buttons are bad? ${isSelectorDeprecated('.btn-primary')}`)
|
||||
// "Primary buttons are bad? false"
|
||||
```
|
||||
|
||||
### `variableDeprecations`
|
||||
This is a [Map] object with keys for each SCSS variable mapped to the deprecation info:
|
||||
|
||||
```js
|
||||
const {selectorDeprecations} = require('@primer/css/deprecations')
|
||||
console.log(`Will $status-pending be deprecated? ${variableDeprecations.has('$status-pending')}`)
|
||||
// "Will $status-pending be deprecated? true"
|
||||
```
|
||||
|
||||
### `isVariableDeprecated(variable[, version])`
|
||||
Returns `true` if the named SCSS variable (including the leading `$`) will have been deprecated (removed) _by_ the specified [semver] version.
|
||||
|
||||
```js
|
||||
const {isVariableDeprecated} = require('@primer/css/deprecations')
|
||||
console.log(`$status-pending deprecated? ${isVariableDeprecated('$status-pending')}`)
|
||||
// "$status-pending deprecated? true"
|
||||
console.log(`$yellow-700 deprecated? ${isVariableDeprecated('$yellow-700')}`)
|
||||
// "$yellow-700 deprecated false"
|
||||
```
|
||||
|
||||
|
||||
[semver]: https://npm.im/semver
|
||||
[changelog]: https://github.com/primer/css/tree/main/CHANGELOG.md
|
||||
[Map]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Map
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
],
|
||||
"scripts": {
|
||||
"dist": "script/dist.js",
|
||||
"stylelint": "stylelint --quiet src",
|
||||
"stylelint": "stylelint --quiet src/**/*.scss",
|
||||
"eslint": "eslint deprecations.js __tests__ script",
|
||||
"prepublishOnly": "script/prepublish",
|
||||
"start": "yarn dev",
|
||||
|
||||
@ -93,5 +93,5 @@ export default analyzeVariables
|
||||
const args = process.argv.slice(2)
|
||||
const file = args.length ? args.shift() : 'src/support/index.scss'
|
||||
const variables = await analyzeVariables(file)
|
||||
console.log(JSON.stringify(variables, null, 2))
|
||||
JSON.stringify(variables, null, 2)
|
||||
})()
|
||||
|
||||
@ -5,11 +5,10 @@ import postcss from 'postcss'
|
||||
import loadConfig from 'postcss-load-config'
|
||||
import {dirname, join} from 'path'
|
||||
|
||||
import {versionDeprecations, selectorDeprecations, variableDeprecations} from '../deprecations.js'
|
||||
import analyzeVariables from './analyze-variables.js'
|
||||
|
||||
import fsExtra from 'fs-extra'
|
||||
const {remove, mkdirp, readFile, writeFile} = fsExtra
|
||||
const {copy, remove, mkdirp, readFile, writeFile} = fsExtra
|
||||
|
||||
const inDir = 'src'
|
||||
const outDir = 'dist'
|
||||
@ -69,7 +68,7 @@ async function dist() {
|
||||
const meta = {bundles}
|
||||
await writeFile(join(outDir, 'meta.json'), JSON.stringify(meta, null, 2), encoding)
|
||||
await writeVariableData()
|
||||
await writeDeprecationData()
|
||||
await copy(join(inDir, 'deprecations.json'), join(outDir, 'deprecations.json'))
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
process.exitCode = 1
|
||||
@ -91,22 +90,6 @@ function getPathName(path) {
|
||||
return path.replace(/\//g, '-')
|
||||
}
|
||||
|
||||
function writeDeprecationData() {
|
||||
const data = {
|
||||
versions: versionDeprecations,
|
||||
selectors: mapToObject(selectorDeprecations),
|
||||
variables: mapToObject(variableDeprecations)
|
||||
}
|
||||
return writeFile(join(outDir, 'deprecations.json'), JSON.stringify(data, null, 2))
|
||||
|
||||
function mapToObject(map) {
|
||||
return Array.from(map.entries()).reduce((obj, [key, value]) => {
|
||||
obj[key] = value
|
||||
return obj
|
||||
}, {})
|
||||
}
|
||||
}
|
||||
|
||||
dist()
|
||||
|
||||
async function writeVariableData() {
|
||||
|
||||
504
src/deprecations.json
Normal file
504
src/deprecations.json
Normal file
@ -0,0 +1,504 @@
|
||||
{
|
||||
"selectors": {
|
||||
"centered": "mx-auto",
|
||||
"dropdown-menu-content": null,
|
||||
"break-word": "wb-break-word",
|
||||
"h000-mktg": null,
|
||||
"h00-mktg": null,
|
||||
"lead-mktg": null,
|
||||
"p-7": "pt-7 pr-7 pb-7 pl-7",
|
||||
"p-8": "pt-8 pr-8 pb-8 pl-8",
|
||||
"p-9": "pt-9 pr-9 pb-9 pl-9",
|
||||
"p-10": "pt-10 pr-10 pb-10 pl-10",
|
||||
"p-11": "pt-11 pr-11 pb-11 pl-11",
|
||||
"p-12": "pt-12 pr-12 pb-12 pl-12",
|
||||
"p-sm-7": "pt-sm-7 pr-sm-7 pb-sm-7 pl-sm-7",
|
||||
"p-sm-8": "pt-sm-8 pr-sm-8 pb-sm-8 pl-sm-8",
|
||||
"p-sm-9": "pt-sm-9 pr-sm-9 pb-sm-9 pl-sm-9",
|
||||
"p-sm-10": "pt-sm-10 pr-sm-10 pb-sm-10 pl-sm-10",
|
||||
"p-sm-11": "pt-sm-11 pr-sm-11 pb-sm-11 pl-sm-11",
|
||||
"p-sm-12": "pt-sm-12 pr-sm-12 pb-sm-12 pl-sm-12",
|
||||
"p-md-7": "pt-md-7 pr-md-7 pb-md-7 pl-md-7",
|
||||
"p-md-8": "pt-md-8 pr-md-8 pb-md-8 pl-md-8",
|
||||
"p-md-9": "pt-md-9 pr-md-9 pb-md-9 pl-md-9",
|
||||
"p-md-10": "pt-md-10 pr-md-10 pb-md-10 pl-md-10",
|
||||
"p-md-11": "pt-md-11 pr-md-11 pb-md-11 pl-md-11",
|
||||
"p-md-12": "pt-md-12 pr-md-12 pb-md-12 pl-md-12",
|
||||
"p-lg-7": "pt-lg-7 pr-lg-7 pb-lg-7 pl-lg-7",
|
||||
"p-lg-8": "pt-lg-8 pr-lg-8 pb-lg-8 pl-lg-8",
|
||||
"p-lg-9": "pt-lg-9 pr-lg-9 pb-lg-9 pl-lg-9",
|
||||
"p-lg-10": "pt-lg-10 pr-lg-10 pb-lg-10 pl-lg-10",
|
||||
"p-lg-11": "pt-lg-11 pr-lg-11 pb-lg-11 pl-lg-11",
|
||||
"p-lg-12": "pt-lg-12 pr-lg-12 pb-lg-12 pl-lg-12",
|
||||
"p-xl-7": "pt-xl-7 pr-xl-7 pb-xl-7 pl-xl-7",
|
||||
"p-xl-8": "pt-xl-8 pr-xl-8 pb-xl-8 pl-xl-8",
|
||||
"p-xl-9": "pt-xl-9 pr-xl-9 pb-xl-9 pl-xl-9",
|
||||
"p-xl-10": "pt-xl-10 pr-xl-10 pb-xl-10 pl-xl-10",
|
||||
"p-xl-11": "pt-xl-11 pr-xl-11 pb-xl-11 pl-xl-11",
|
||||
"p-xl-12": "pt-xl-12 pr-xl-12 pb-xl-12 pl-xl-12",
|
||||
"top-n0": "top-0",
|
||||
"right-n0": "right-0",
|
||||
"bottom-n0": "bottom-0",
|
||||
"left-n0": "left-0",
|
||||
"top-md-n0": "top-md-0",
|
||||
"right-md-n0": "right-md-0",
|
||||
"bottom-md-n0": "bottom-md-0",
|
||||
"left-md-n0": "left-md-0",
|
||||
"top-lg-n0": "top-lg-0",
|
||||
"right-lg-n0": "right-lg-0",
|
||||
"bottom-lg-n0": "bottom-lg-0",
|
||||
"left-lg-n0": "left-lg-0",
|
||||
"mt-n0": "mt-0",
|
||||
"mb-n0": "mb-0",
|
||||
"mt-sm-n0": "mt-sm-0",
|
||||
"mb-sm-n0": "mb-sm-0",
|
||||
"mt-md-n0": "mt-md-0",
|
||||
"mb-md-n0": "mb-md-0",
|
||||
"mt-lg-n0": "mt-lg-0",
|
||||
"mb-lg-n0": "mb-lg-0",
|
||||
"mt-xl-n0": "mt-xl-0",
|
||||
"mb-xl-n0": "mb-xl-0",
|
||||
"bg-shade-gradient": "color-bg-secondary",
|
||||
"color-border-overlay": "color-border-primary",
|
||||
"btn-blue": null,
|
||||
"input-dark": null,
|
||||
"border-blue": null,
|
||||
"border-blue-light": null,
|
||||
"border-green": null,
|
||||
"border-green-light": null,
|
||||
"border-red": null,
|
||||
"border-red-light": null,
|
||||
"border-purple": null,
|
||||
"border-yellow": null,
|
||||
"border-gray-light": null,
|
||||
"border-gray-dark": null,
|
||||
"border-black-fade": null,
|
||||
"border-white-fade": null,
|
||||
"border-white-fade-15": null,
|
||||
"border-white-fade-30": null,
|
||||
"border-white-fade-50": null,
|
||||
"border-white-fade-70": null,
|
||||
"border-white-fade-85": null,
|
||||
"box-shadow": null,
|
||||
"box-shadow-medium": null,
|
||||
"box-shadow-large": null,
|
||||
"box-shadow-extra-large": null,
|
||||
"bg-white": null,
|
||||
"bg-blue": null,
|
||||
"bg-blue-light": null,
|
||||
"bg-gray-dark": null,
|
||||
"bg-gray": null,
|
||||
"bg-gray-light": null,
|
||||
"bg-green": null,
|
||||
"bg-green-light": null,
|
||||
"bg-red": null,
|
||||
"bg-red-light": null,
|
||||
"bg-yellow": null,
|
||||
"bg-yellow-light": null,
|
||||
"bg-yellow-dark": null,
|
||||
"bg-purple": null,
|
||||
"bg-pink": null,
|
||||
"bg-purple-light": null,
|
||||
"bg-orange": null,
|
||||
"color-gray-0": null,
|
||||
"bg-gray-0": null,
|
||||
"color-gray-1": null,
|
||||
"bg-gray-1": null,
|
||||
"color-gray-2": null,
|
||||
"bg-gray-2": null,
|
||||
"color-gray-3": null,
|
||||
"bg-gray-3": null,
|
||||
"color-gray-4": null,
|
||||
"bg-gray-4": null,
|
||||
"color-gray-5": null,
|
||||
"bg-gray-5": null,
|
||||
"color-gray-6": null,
|
||||
"bg-gray-6": null,
|
||||
"color-gray-7": null,
|
||||
"bg-gray-7": null,
|
||||
"color-gray-8": null,
|
||||
"bg-gray-8": null,
|
||||
"color-gray-9": null,
|
||||
"bg-gray-9": null,
|
||||
"color-blue-0": null,
|
||||
"bg-blue-0": null,
|
||||
"color-blue-1": null,
|
||||
"bg-blue-1": null,
|
||||
"color-blue-2": null,
|
||||
"bg-blue-2": null,
|
||||
"color-blue-3": null,
|
||||
"bg-blue-3": null,
|
||||
"color-blue-4": null,
|
||||
"bg-blue-4": null,
|
||||
"color-blue-5": null,
|
||||
"bg-blue-5": null,
|
||||
"color-blue-6": null,
|
||||
"bg-blue-6": null,
|
||||
"color-blue-7": null,
|
||||
"bg-blue-7": null,
|
||||
"color-blue-8": null,
|
||||
"bg-blue-8": null,
|
||||
"color-blue-9": null,
|
||||
"bg-blue-9": null,
|
||||
"color-green-0": null,
|
||||
"bg-green-0": null,
|
||||
"color-green-1": null,
|
||||
"bg-green-1": null,
|
||||
"color-green-2": null,
|
||||
"bg-green-2": null,
|
||||
"color-green-3": null,
|
||||
"bg-green-3": null,
|
||||
"color-green-4": null,
|
||||
"bg-green-4": null,
|
||||
"color-green-5": null,
|
||||
"bg-green-5": null,
|
||||
"color-green-6": null,
|
||||
"bg-green-6": null,
|
||||
"color-green-7": null,
|
||||
"bg-green-7": null,
|
||||
"color-green-8": null,
|
||||
"bg-green-8": null,
|
||||
"color-green-9": null,
|
||||
"bg-green-9": null,
|
||||
"color-yellow-0": null,
|
||||
"bg-yellow-0": null,
|
||||
"color-yellow-1": null,
|
||||
"bg-yellow-1": null,
|
||||
"color-yellow-2": null,
|
||||
"bg-yellow-2": null,
|
||||
"color-yellow-3": null,
|
||||
"bg-yellow-3": null,
|
||||
"color-yellow-4": null,
|
||||
"bg-yellow-4": null,
|
||||
"color-yellow-5": null,
|
||||
"bg-yellow-5": null,
|
||||
"color-yellow-6": null,
|
||||
"bg-yellow-6": null,
|
||||
"color-yellow-7": null,
|
||||
"bg-yellow-7": null,
|
||||
"color-yellow-8": null,
|
||||
"bg-yellow-8": null,
|
||||
"color-yellow-9": null,
|
||||
"bg-yellow-9": null,
|
||||
"color-orange-0": null,
|
||||
"bg-orange-0": null,
|
||||
"color-orange-1": null,
|
||||
"bg-orange-1": null,
|
||||
"color-orange-2": null,
|
||||
"bg-orange-2": null,
|
||||
"color-orange-3": null,
|
||||
"bg-orange-3": null,
|
||||
"color-orange-4": null,
|
||||
"bg-orange-4": null,
|
||||
"color-orange-5": null,
|
||||
"bg-orange-5": null,
|
||||
"color-orange-6": null,
|
||||
"bg-orange-6": null,
|
||||
"color-orange-7": null,
|
||||
"bg-orange-7": null,
|
||||
"color-orange-8": null,
|
||||
"bg-orange-8": null,
|
||||
"color-orange-9": null,
|
||||
"bg-orange-9": null,
|
||||
"color-red-0": null,
|
||||
"bg-red-0": null,
|
||||
"color-red-1": null,
|
||||
"bg-red-1": null,
|
||||
"color-red-2": null,
|
||||
"bg-red-2": null,
|
||||
"color-red-3": null,
|
||||
"bg-red-3": null,
|
||||
"color-red-4": null,
|
||||
"bg-red-4": null,
|
||||
"color-red-5": null,
|
||||
"bg-red-5": null,
|
||||
"color-red-6": null,
|
||||
"bg-red-6": null,
|
||||
"color-red-7": null,
|
||||
"bg-red-7": null,
|
||||
"color-red-8": null,
|
||||
"bg-red-8": null,
|
||||
"color-red-9": null,
|
||||
"bg-red-9": null,
|
||||
"color-purple-0": null,
|
||||
"bg-purple-0": null,
|
||||
"color-purple-1": null,
|
||||
"bg-purple-1": null,
|
||||
"color-purple-2": null,
|
||||
"bg-purple-2": null,
|
||||
"color-purple-3": null,
|
||||
"bg-purple-3": null,
|
||||
"color-purple-4": null,
|
||||
"bg-purple-4": null,
|
||||
"color-purple-5": null,
|
||||
"bg-purple-5": null,
|
||||
"color-purple-6": null,
|
||||
"bg-purple-6": null,
|
||||
"color-purple-7": null,
|
||||
"bg-purple-7": null,
|
||||
"color-purple-8": null,
|
||||
"bg-purple-8": null,
|
||||
"color-purple-9": null,
|
||||
"bg-purple-9": null,
|
||||
"color-pink-0": null,
|
||||
"bg-pink-0": null,
|
||||
"color-pink-1": null,
|
||||
"bg-pink-1": null,
|
||||
"color-pink-2": null,
|
||||
"bg-pink-2": null,
|
||||
"color-pink-3": null,
|
||||
"bg-pink-3": null,
|
||||
"color-pink-4": null,
|
||||
"bg-pink-4": null,
|
||||
"color-pink-5": null,
|
||||
"bg-pink-5": null,
|
||||
"color-pink-6": null,
|
||||
"bg-pink-6": null,
|
||||
"color-pink-7": null,
|
||||
"bg-pink-7": null,
|
||||
"color-pink-8": null,
|
||||
"bg-pink-8": null,
|
||||
"color-pink-9": null,
|
||||
"bg-pink-9": null,
|
||||
"text-blue": null,
|
||||
"text-red": null,
|
||||
"text-gray-light": null,
|
||||
"text-gray": null,
|
||||
"text-gray-dark": null,
|
||||
"text-green": null,
|
||||
"text-yellow": null,
|
||||
"text-orange": null,
|
||||
"text-orange-light": null,
|
||||
"text-purple": null,
|
||||
"text-pink": null,
|
||||
"text-white": null,
|
||||
"link-gray": null,
|
||||
"link-gray-dark": null,
|
||||
"muted-link": null,
|
||||
"text-shadow-dark": null,
|
||||
"text-shadow-light": null,
|
||||
"dropdown-menu-dark": null,
|
||||
"Label--outline": null,
|
||||
"Label--gray": null,
|
||||
"Label--gray-darker": null,
|
||||
"Label--yellow": null,
|
||||
"Label--orange": null,
|
||||
"Label--red": null,
|
||||
"Label--outline-green": null,
|
||||
"Label--green": null,
|
||||
"Label--blue": null,
|
||||
"Label--purple": null,
|
||||
"Label--pink": null,
|
||||
"State--green": null,
|
||||
"State--red": null,
|
||||
"State--purple": null,
|
||||
"Counter--gray-light": null,
|
||||
"Counter--gray": null,
|
||||
"flex-item-equal": "flex-1",
|
||||
"flex-sm-item-equal": "flex-sm-1",
|
||||
"flex-md-item-equal": "flex-md-1",
|
||||
"flex-lg-item-equal": "flex-lg-1",
|
||||
"flex-xl-item-equal": "flex-xl-1",
|
||||
"btn-purple": null,
|
||||
"text-pending": "text-yellow",
|
||||
"bg-pending": "bg-yellow-dark",
|
||||
"container": null,
|
||||
"columns": null,
|
||||
"column": null,
|
||||
"one-third": null,
|
||||
"two-thirds": null,
|
||||
"one-fourth": null,
|
||||
"one-half": null,
|
||||
"three-fourths": null,
|
||||
"one-fifth": null,
|
||||
"four-fifths": null
|
||||
},
|
||||
|
||||
"variables": {
|
||||
"$h000-size": null,
|
||||
"$h000-size-mobile": null,
|
||||
"$bg-black": null,
|
||||
"$bg-black-fade": null,
|
||||
"$bg-blue": null,
|
||||
"$bg-blue-light": null,
|
||||
"$bg-diffstat-added": null,
|
||||
"$bg-diffstat-deleted": null,
|
||||
"$bg-diffstat-neutral": null,
|
||||
"$bg-gray": null,
|
||||
"$bg-gray-dark": null,
|
||||
"$bg-gray-light": null,
|
||||
"$bg-green": null,
|
||||
"$bg-green-light": null,
|
||||
"$bg-orange": null,
|
||||
"$bg-pink": null,
|
||||
"$bg-purple": null,
|
||||
"$bg-purple-light": null,
|
||||
"$bg-red": null,
|
||||
"$bg-red-light": null,
|
||||
"$bg-white": null,
|
||||
"$bg-yellow": null,
|
||||
"$bg-yellow-dark": null,
|
||||
"$bg-yellow-light": null,
|
||||
"$black": null,
|
||||
"$black-fade-15": null,
|
||||
"$black-fade-30": null,
|
||||
"$black-fade-50": null,
|
||||
"$black-fade-70": null,
|
||||
"$black-fade-85": null,
|
||||
"$blue": null,
|
||||
"$blue-000": null,
|
||||
"$blue-100": null,
|
||||
"$blue-200": null,
|
||||
"$blue-300": null,
|
||||
"$blue-400": null,
|
||||
"$blue-500": null,
|
||||
"$blue-600": null,
|
||||
"$blue-700": null,
|
||||
"$blue-800": null,
|
||||
"$blue-900": null,
|
||||
"$border-black-fade": null,
|
||||
"$border-blue": null,
|
||||
"$border-blue-light": null,
|
||||
"$border-color": null,
|
||||
"$border-color-button": null,
|
||||
"$border-gray": null,
|
||||
"$border-gray-dark": null,
|
||||
"$border-gray-darker": null,
|
||||
"$border-gray-light": null,
|
||||
"$border-green": null,
|
||||
"$border-green-light": null,
|
||||
"$border-purple": null,
|
||||
"$border-red": null,
|
||||
"$border-red-light": null,
|
||||
"$border-white": null,
|
||||
"$border-white-fade": null,
|
||||
"$border-yellow": null,
|
||||
"$box-shadow": null,
|
||||
"$box-shadow-extra-large": null,
|
||||
"$box-shadow-focus": null,
|
||||
"$box-shadow-highlight": null,
|
||||
"$box-shadow-inset": null,
|
||||
"$box-shadow-large": null,
|
||||
"$box-shadow-medium": null,
|
||||
"$btn-active-shadow": null,
|
||||
"$btn-input-focus-shadow": null,
|
||||
"$form-control-shadow": null,
|
||||
"$gray": null,
|
||||
"$gray-000": null,
|
||||
"$gray-100": null,
|
||||
"$gray-200": null,
|
||||
"$gray-300": null,
|
||||
"$gray-400": null,
|
||||
"$gray-500": null,
|
||||
"$gray-600": null,
|
||||
"$gray-700": null,
|
||||
"$gray-800": null,
|
||||
"$gray-900": null,
|
||||
"$gray-dark": null,
|
||||
"$gray-light": null,
|
||||
"$green": null,
|
||||
"$green-000": null,
|
||||
"$green-100": null,
|
||||
"$green-200": null,
|
||||
"$green-300": null,
|
||||
"$green-400": null,
|
||||
"$green-500": null,
|
||||
"$green-600": null,
|
||||
"$green-700": null,
|
||||
"$green-800": null,
|
||||
"$green-900": null,
|
||||
"$orange": null,
|
||||
"$orange-000": null,
|
||||
"$orange-100": null,
|
||||
"$orange-200": null,
|
||||
"$orange-300": null,
|
||||
"$orange-400": null,
|
||||
"$orange-500": null,
|
||||
"$orange-600": null,
|
||||
"$orange-700": null,
|
||||
"$orange-800": null,
|
||||
"$orange-900": null,
|
||||
"$pink-000": null,
|
||||
"$pink-100": null,
|
||||
"$pink-200": null,
|
||||
"$pink-300": null,
|
||||
"$pink-400": null,
|
||||
"$pink-500": null,
|
||||
"$pink-600": null,
|
||||
"$pink-700": null,
|
||||
"$pink-800": null,
|
||||
"$pink-900": null,
|
||||
"$purple": null,
|
||||
"$purple-000": null,
|
||||
"$purple-100": null,
|
||||
"$purple-200": null,
|
||||
"$purple-300": null,
|
||||
"$purple-400": null,
|
||||
"$purple-500": null,
|
||||
"$purple-600": null,
|
||||
"$purple-700": null,
|
||||
"$purple-800": null,
|
||||
"$purple-900": null,
|
||||
"$red": null,
|
||||
"$red-000": null,
|
||||
"$red-100": null,
|
||||
"$red-200": null,
|
||||
"$red-300": null,
|
||||
"$red-400": null,
|
||||
"$red-500": null,
|
||||
"$red-600": null,
|
||||
"$red-700": null,
|
||||
"$red-800": null,
|
||||
"$red-900": null,
|
||||
"$text-black": null,
|
||||
"$text-blue": null,
|
||||
"$text-gray": null,
|
||||
"$text-gray-dark": null,
|
||||
"$text-gray-light": null,
|
||||
"$text-green": null,
|
||||
"$text-orange": null,
|
||||
"$text-orange-light": null,
|
||||
"$text-pink": null,
|
||||
"$text-purple": null,
|
||||
"$text-red": null,
|
||||
"$text-white": null,
|
||||
"$text-yellow": null,
|
||||
"$tooltip-background-color": null,
|
||||
"$tooltip-text-color": null,
|
||||
"$white": null,
|
||||
"$white-fade-15": null,
|
||||
"$white-fade-30": null,
|
||||
"$white-fade-50": null,
|
||||
"$white-fade-70": null,
|
||||
"$white-fade-85": null,
|
||||
"$yellow": null,
|
||||
"$yellow-000": null,
|
||||
"$yellow-100": null,
|
||||
"$yellow-200": null,
|
||||
"$yellow-300": null,
|
||||
"$yellow-400": null,
|
||||
"$yellow-500": null,
|
||||
"$yellow-600": null,
|
||||
"$yellow-700": null,
|
||||
"$yellow-800": null,
|
||||
"$yellow-900": null,
|
||||
"$blue-mktg": null,
|
||||
"$green-mktg": null,
|
||||
"$status-pending": null,
|
||||
"$highlight-yellow": null,
|
||||
"$repo-private-text": null,
|
||||
"$repo-private-bg": null,
|
||||
"$repo-private-icon": null,
|
||||
"$marketingSpacers": "$marketing-spacers",
|
||||
"$allSpacers": "$marketing-all-spacers",
|
||||
"$exploregrid-item-border-radius": "4px",
|
||||
"$stats-switcher-py": null,
|
||||
"$stats-viewport-height": null,
|
||||
"$min_tab_size": null,
|
||||
"$max_tab_size": null
|
||||
},
|
||||
|
||||
"mixins": {
|
||||
"rem": null
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user