less-plugin-dls/variables.global.js

Less plugin for Baidu Light DLS.

export const dlsColorBrand = '#0054e6'
export const dlsColorBrand0 = '#fff'
export const dlsColorBrand1 = '#ebf2ff'
export const dlsColorBrand2 = '#dce9ff'
export const dlsColorBrand3 = '#bfd7ff'
export const dlsColorBrand4 = '#95bcff'
export const dlsColorBrand5 = '#5e99ff'
export const dlsColorBrand6 = '#1a6eff'
export const dlsColorBrand7 = '#0054e6'
export const dlsColorBrand8 = '#0047c4'
export const dlsColorBrand9 = '#003796'
export const dlsColorBrand10 = '#00225c'
export const dlsColorBrand11 = '#000'
export const dlsColorInfo = '#0054e6'
export const dlsColorInfo0 = '#fff'
export const dlsColorInfo1 = '#ebf2ff'
export const dlsColorInfo2 = '#dce9ff'
export const dlsColorInfo3 = '#bfd7ff'
export const dlsColorInfo4 = '#95bcff'
export const dlsColorInfo5 = '#5e99ff'
export const dlsColorInfo6 = '#1a6eff'
export const dlsColorInfo7 = '#0054e6'
export const dlsColorInfo8 = '#0047c4'
export const dlsColorInfo9 = '#003796'
export const dlsColorInfo10 = '#00225c'
export const dlsColorInfo11 = '#000'
export const dlsColorSuccess = '#009940'
export const dlsColorSuccess0 = '#fff'
export const dlsColorSuccess1 = '#ebfff3'
export const dlsColorSuccess2 = '#daffe9'
export const dlsColorSuccess3 = '#baffd7'
export const dlsColorSuccess4 = '#8bffbb'
export const dlsColorSuccess5 = '#4dff97'
export const dlsColorSuccess6 = '#00cc55'
export const dlsColorSuccess7 = '#009940'
export const dlsColorSuccess8 = '#008236'
export const dlsColorSuccess9 = '#00632a'
export const dlsColorSuccess10 = '#003d1a'
export const dlsColorSuccess11 = '#000'
export const dlsColorWarning = '#f27318'
export const dlsColorWarning0 = '#fff'
export const dlsColorWarning1 = '#fff3eb'
export const dlsColorWarning2 = '#ffecdf'
export const dlsColorWarning3 = '#ffdfc9'
export const dlsColorWarning4 = '#ffcca8'
export const dlsColorWarning5 = '#ffb37d'
export const dlsColorWarning6 = '#ff9448'
export const dlsColorWarning7 = '#f27318'
export const dlsColorWarning8 = '#ce5600'
export const dlsColorWarning9 = '#9d4200'
export const dlsColorWarning10 = '#612800'
export const dlsColorWarning11 = '#000'
export const dlsColorError = '#d9150b'
export const dlsColorError0 = '#fff'
export const dlsColorError1 = '#ffeceb'
export const dlsColorError2 = '#ffdedc'
export const dlsColorError3 = '#ffc4c0'
export const dlsColorError4 = '#ff9d98'
export const dlsColorError5 = '#ff6a63'
export const dlsColorError6 = '#ff2b20'
export const dlsColorError7 = '#d9150b'
export const dlsColorError8 = '#b80900'
export const dlsColorError9 = '#8d0700'
export const dlsColorError10 = '#570400'
export const dlsColorError11 = '#000'
export const dlsColorGray0 = '#fff'
export const dlsColorGray1 = '#f6f7fa'
export const dlsColorGray2 = '#ebedf5'
export const dlsColorGray3 = '#e2e6f0'
export const dlsColorGray4 = '#d3d9e6'
export const dlsColorGray5 = '#c5ccdb'
export const dlsColorGray6 = '#a8b0bf'
export const dlsColorGray7 = '#848b99'
export const dlsColorGray8 = '#545b66'
export const dlsColorGray9 = '#191b1e'
export const dlsColorGray10 = '#0a0b0d'
export const dlsColorGray11 = '#000'
export const dlsColorTranslucent0 = 'transparent'
export const dlsColorTranslucent1 = 'rgba(109, 159, 247, 0.07)'
export const dlsColorTranslucent2 = 'rgba(108, 156, 240, 0.1)'
export const dlsColorTranslucent3 = 'rgba(102, 146, 222, 0.15)'
export const dlsColorTranslucent4 = 'rgba(96, 134, 199, 0.2)'
export const dlsColorTranslucent5 = 'rgba(90, 119, 168, 0.3)'
export const dlsColorTranslucent6 = 'rgba(83, 101, 138, 0.5)'
export const dlsColorTranslucent7 = 'rgba(73, 86, 107, 0.8)'
export const dlsColorTranslucent8 = 'rgba(46, 52, 64, 0.9)'
export const dlsColorTranslucent9 = 'rgba(13, 15, 18, 0.95)'
export const dlsColorTranslucent10 = 'rgba(4, 4, 5, 0.95)'
export const dlsColorTranslucent11 = '#000'
export const dlsFontFamily = '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif'
export const dlsFontFamilyNumber = '"Baidu Number", sans-serif'
export const dlsFontSize0 = '12px'
export const dlsFontSize1 = '14px'
export const dlsFontSize2 = '16px'
export const dlsFontSize3 = '18px'
export const dlsFontSize4 = '20px'
export const dlsFontSize5 = '24px'
export const dlsFontSize6 = '32px'
export const dlsFontWeight1 = '400'
export const dlsFontWeight2 = '500'
export const dlsFontWeight3 = '600'
export const dlsLineHeight1 = '1.4'
export const dlsLineHeight2 = '1.6'
export const dlsLineHeight3 = '1.8'
export const dlsSpacingUnit = '4px'
export const dlsPaddingUnit = '4px'
export const dlsHeightUnit = '4px'
export const dlsSpacing1 = '4px'
export const dlsSpacing2 = '8px'
export const dlsSpacing3 = '12px'
export const dlsSpacing4 = '16px'
export const dlsSpacing5 = '24px'
export const dlsSpacing6 = '32px'
export const dlsSpacing7 = '40px'
export const dlsHeightXs = '24px'
export const dlsHeightS = '28px'
export const dlsHeightM = '32px'
export const dlsHeightL = '36px'
export const dlsHeightXl = '40px'
export const dlsForegroundColorReverse = '#fff'
export const dlsForegroundColorPrimaryReverse = '#fff'
export const dlsForegroundColorPrimary = '#0054e6'
export const dlsForegroundColorPrimaryHover = '#1a6eff'
export const dlsForegroundColorPrimaryActive = '#0047c4'
export const dlsForegroundColorPrimaryDisabled = '#95bcff'
export const dlsForegroundColorNeutral = 'rgba(13, 15, 18, 0.95)'
export const dlsForegroundColorNeutralHover = 'rgba(46, 52, 64, 0.9)'
export const dlsForegroundColorNeutralActive = '#000'
export const dlsForegroundColorNeutralDisabled = 'rgba(83, 101, 138, 0.5)'
export const dlsForegroundColorNeutralStrong = '#000'
export const dlsForegroundColorNeutralStrongHover = 'rgba(4, 4, 5, 0.95)'
export const dlsForegroundColorNeutralStrongActive = '#000'
export const dlsForegroundColorNeutralStrongDisabled = 'rgba(83, 101, 138, 0.5)'
export const dlsForegroundColorNeutralLight = 'rgba(46, 52, 64, 0.9)'
export const dlsForegroundColorNeutralLightHover = 'rgba(73, 86, 107, 0.8)'
export const dlsForegroundColorNeutralLightActive = 'rgba(13, 15, 18, 0.95)'
export const dlsForegroundColorNeutralLightDisabled = 'rgba(83, 101, 138, 0.5)'
export const dlsForegroundColorNeutralWeak = 'rgba(73, 86, 107, 0.8)'
export const dlsForegroundColorNeutralWeakHover = 'rgba(46, 52, 64, 0.9)'
export const dlsForegroundColorNeutralWeakActive = 'rgba(13, 15, 18, 0.95)'
export const dlsForegroundColorNeutralWeakDisabled = 'rgba(90, 119, 168, 0.3)'
export const dlsForegroundColorNeutralDim = 'rgba(83, 101, 138, 0.5)'
export const dlsForegroundColorNeutralDimHover = 'rgba(73, 86, 107, 0.8)'
export const dlsForegroundColorNeutralDimActive = 'rgba(46, 52, 64, 0.9)'
export const dlsForegroundColorNeutralDimDisabled = 'rgba(102, 146, 222, 0.15)'
export const dlsForegroundColorNeutralSubtle = 'rgba(90, 119, 168, 0.3)'
export const dlsForegroundColorNeutralSubtleHover = 'rgba(83, 101, 138, 0.5)'
export const dlsForegroundColorNeutralSubtleActive = 'rgba(73, 86, 107, 0.8)'
export const dlsForegroundColorNeutralSubtleDisabled = 'rgba(102, 146, 222, 0.15)'
export const dlsForegroundColorNeutralHighlightable = 'rgba(13, 15, 18, 0.95)'
export const dlsForegroundColorNeutralHighlightableHover = '#1a6eff'
export const dlsForegroundColorNeutralHighlightableActive = '#0047c4'
export const dlsForegroundColorNeutralHighlightableDisabled = 'rgba(83, 101, 138, 0.5)'
export const dlsForegroundColorInfoPrimary = '#0054e6'
export const dlsForegroundColorInfoPrimaryDisabled = '#95bcff'
export const dlsForegroundColorSuccessPrimary = '#009940'
export const dlsForegroundColorSuccessPrimaryDisabled = '#8bffbb'
export const dlsForegroundColorWarningPrimary = '#ff9448'
export const dlsForegroundColorWarningPrimaryDisabled = '#ffcca8'
export const dlsForegroundColorErrorPrimary = '#d9150b'
export const dlsForegroundColorErrorPrimaryDisabled = '#ff9d98'
export const dlsForegroundColorHighlighted = '#f27318'
export const dlsBackgroundColorBase1 = '#fff'
export const dlsBackgroundColorBase1Hover = '#f6f7fa'
export const dlsBackgroundColorBase1Active = '#e2e6f0'
export const dlsBackgroundColorBase1Disabled = '#fff'
export const dlsBackgroundColorBase2 = '#f6f7fa'
export const dlsBackgroundColorBase2Hover = '#ebedf5'
export const dlsBackgroundColorBase2Active = '#e2e6f0'
export const dlsBackgroundColorBase2Disabled = '#f6f7fa'
export const dlsBackgroundColorBase3 = '#ebedf5'
export const dlsBackgroundColorBase3Hover = '#e2e6f0'
export const dlsBackgroundColorBase3Active = '#d3d9e6'
export const dlsBackgroundColorBase3Disabled = '#f6f7fa'
export const dlsBackgroundColorPrimary = '#0054e6'
export const dlsBackgroundColorPrimaryHover = '#1a6eff'
export const dlsBackgroundColorPrimaryActive = '#0047c4'
export const dlsBackgroundColorPrimaryDisabled = '#dce9ff'
export const dlsBorderColorPrimary = 'transparent'
export const dlsBorderColorPrimaryDisabled = 'transparent'
export const dlsBackgroundColorInfoPrimary = '#0054e6'
export const dlsBackgroundColorInfoPrimaryHover = '#1a6eff'
export const dlsBackgroundColorInfoPrimaryActive = '#0047c4'
export const dlsBackgroundColorInfoPrimaryDisabled = '#dce9ff'
export const dlsBorderColorInfoPrimary = 'transparent'
export const dlsBorderColorInfoPrimaryDisabled = 'transparent'
export const dlsBackgroundColorSuccessPrimary = '#009940'
export const dlsBackgroundColorSuccessPrimaryHover = '#00cc55'
export const dlsBackgroundColorSuccessPrimaryActive = '#008236'
export const dlsBackgroundColorSuccessPrimaryDisabled = '#daffe9'
export const dlsBorderColorSuccessPrimary = 'transparent'
export const dlsBorderColorSuccessPrimaryDisabled = 'transparent'
export const dlsBackgroundColorWarningPrimary = '#ff9448'
export const dlsBackgroundColorWarningPrimaryHover = '#ffb37d'
export const dlsBackgroundColorWarningPrimaryActive = '#f27318'
export const dlsBackgroundColorWarningPrimaryDisabled = '#ffecdf'
export const dlsBorderColorWarningPrimary = 'transparent'
export const dlsBorderColorWarningPrimaryDisabled = 'transparent'
export const dlsBackgroundColorErrorPrimary = '#d9150b'
export const dlsBackgroundColorErrorPrimaryHover = '#ff2b20'
export const dlsBackgroundColorErrorPrimaryActive = '#b80900'
export const dlsBackgroundColorErrorPrimaryDisabled = '#ffdedc'
export const dlsBorderColorErrorPrimary = 'transparent'
export const dlsBorderColorErrorPrimaryDisabled = 'transparent'
export const dlsBackgroundColorNeutralPrimary = '#a8b0bf'
export const dlsBackgroundColorNeutralPrimaryHover = '#848b99'
export const dlsBackgroundColorNeutralPrimaryActive = '#545b66'
export const dlsBackgroundColorNeutralPrimaryDisabled = '#e2e6f0'
export const dlsBorderColorNeutralPrimary = 'transparent'
export const dlsBorderColorNeutralPrimaryDisabled = 'transparent'
export const dlsBackgroundColorInfo = '#ebf2ff'
export const dlsBackgroundColorInfoHover = '#dce9ff'
export const dlsBackgroundColorInfoActive = '#bfd7ff'
export const dlsBackgroundColorInfoDisabled = '#ebf2ff'
export const dlsBorderColorInfo = '#95bcff'
export const dlsBorderColorInfoDisabled = '#bfd7ff'
export const dlsBackgroundColorSuccess = '#ebfff3'
export const dlsBackgroundColorSuccessHover = '#daffe9'
export const dlsBackgroundColorSuccessActive = '#baffd7'
export const dlsBackgroundColorSuccessDisabled = '#ebfff3'
export const dlsBorderColorSuccess = '#8bffbb'
export const dlsBorderColorSuccessDisabled = '#baffd7'
export const dlsBackgroundColorWarning = '#fff3eb'
export const dlsBackgroundColorWarningHover = '#ffecdf'
export const dlsBackgroundColorWarningActive = '#ffdfc9'
export const dlsBackgroundColorWarningDisabled = '#fff3eb'
export const dlsBorderColorWarning = '#ffcca8'
export const dlsBorderColorWarningDisabled = '#ffdfc9'
export const dlsBackgroundColorError = '#ffeceb'
export const dlsBackgroundColorErrorHover = '#ffdedc'
export const dlsBackgroundColorErrorActive = '#ffc4c0'
export const dlsBackgroundColorErrorDisabled = '#ffeceb'
export const dlsBorderColorError = '#ff9d98'
export const dlsBorderColorErrorDisabled = '#ffc4c0'
export const dlsBackgroundColorNeutral = '#ebedf5'
export const dlsBackgroundColorNeutralHover = '#e2e6f0'
export const dlsBackgroundColorNeutralActive = '#d3d9e6'
export const dlsBackgroundColorNeutralDisabled = '#f6f7fa'
export const dlsBorderColorNeutral = '#c5ccdb'
export const dlsBorderColorNeutralDisabled = '#e2e6f0'
export const dlsBackgroundColorCurrent = '#ebf2ff'
export const dlsBackgroundColorCurrentHover = '#dce9ff'
export const dlsBackgroundColorCurrentActive = '#bfd7ff'
export const dlsBackgroundColorCurrentDisabled = '#ebf2ff'
export const dlsBorderColorCurrent = '#0054e6'
export const dlsBorderColorCurrentDisabled = '#bfd7ff'
export const dlsBackgroundColorStrong = '#fff'
export const dlsBackgroundColorStrongHover = '#ebf2ff'
export const dlsBackgroundColorStrongActive = '#dce9ff'
export const dlsBackgroundColorStrongDisabled = '#ebf2ff'
export const dlsBorderColorStrong = '#0054e6'
export const dlsBorderColorStrongDisabled = '#bfd7ff'
export const dlsBackgroundColorErrorStrong = '#fff'
export const dlsBackgroundColorErrorStrongHover = '#ffeceb'
export const dlsBackgroundColorErrorStrongActive = '#ffdedc'
export const dlsBackgroundColorErrorStrongDisabled = '#ffeceb'
export const dlsBorderColorErrorStrong = '#d9150b'
export const dlsBorderColorErrorStrongDisabled = '#ffc4c0'
export const dlsBackgroundColorFillable = '#fff'
export const dlsBackgroundColorFillableHover = '#ebedf5'
export const dlsBackgroundColorFillableActive = '#d3d9e6'
export const dlsBackgroundColorFillableDisabled = '#f6f7fa'
export const dlsBorderColorFillable = '#d3d9e6'
export const dlsBorderColorFillableHover = '#a8b0bf'
export const dlsBorderColorFillableActive = '#a8b0bf'
export const dlsBorderColorFillableDisabled = '#e2e6f0'
export const dlsBackgroundColorPressable = '#fff'
export const dlsBackgroundColorPressableHover = '#f6f7fa'
export const dlsBackgroundColorPressableActive = '#e2e6f0'
export const dlsBackgroundColorPressableDisabled = '#f6f7fa'
export const dlsBorderColorPressable = '#e2e6f0'
export const dlsBorderColorPressableHover = '#d3d9e6'
export const dlsBorderColorPressableActive = '#d3d9e6'
export const dlsBorderColorPressableDisabled = '#e2e6f0'
export const dlsBackgroundColorTranslucent = 'rgba(0, 0, 0, 0.6)'
export const dlsBackgroundColorTranslucentHover = 'rgba(0, 0, 0, 0.5)'
export const dlsBackgroundColorTranslucentActive = 'rgba(0, 0, 0, 0.7)'
export const dlsBackgroundColorTranslucentDisabled = 'rgba(0, 0, 0, 0.2)'
export const dlsBorderColorTranslucent = 'transparent'
export const dlsBorderColorTranslucentDisabled = 'transparent'
export const dlsBackgroundColorTranslucentReverse = 'transparent'
export const dlsBackgroundColorTranslucentReverseHover = 'rgba(255, 255, 255, 0.15)'
export const dlsBackgroundColorTranslucentReverseActive = 'rgba(255, 255, 255, 0.25)'
export const dlsBackgroundColorTranslucentReverseDisabled = 'transparent'
export const dlsBorderColorTranslucentReverse = 'transparent'
export const dlsBorderColorTranslucentReverseDisabled = 'transparent'
export const dlsBackgroundColorModal = 'rgba(0, 0, 0, 0.6)'
export const dlsLineColor0 = '#ebedf5'
export const dlsLineColor1 = '#e2e6f0'
export const dlsLineColor2 = '#d3d9e6'
export const dlsBorderRadius0 = '2px'
export const dlsBorderRadius1 = '4px'
export const dlsBorderRadius2 = '6px'
export const dlsBorderRadius3 = '10px'
export const dlsBorderRadius4 = '16px'
export const dlsShadowColor = '#000'
export const dlsShadow1 = '0 4px 10px rgba(0, 0, 0, 0.03), 0 3px 9px rgba(0, 0, 0, 0.02), 0 2px 8px rgba(0, 0, 0, 0.01)'
export const dlsShadow2 = '0 6px 28px 2px rgba(0, 0, 0, 0.04), 0 4px 26px 2px rgba(0, 0, 0, 0.03), 0 2px 24px 1px rgba(0, 0, 0, 0.02)'
export const dlsShadow3 = '0 6px 32px 2px rgba(0, 0, 0, 0.06), 0 5px 30px 1px rgba(0, 0, 0, 0.05), 0 4px 28px 1px rgba(0, 0, 0, 0.04)'
export const dlsShadow4 = '0 1px 8px rgba(0, 0, 0, 0.06), 0 7px 14px 2px rgba(0, 0, 0, 0.05), 0 8px 16px 4px rgba(0, 0, 0, 0.04)'
export const dlsShadowColorLight = '#000'
export const dlsShadowLight1 = '0 4px 10px rgba(0, 0, 0, 0.03), 0 3px 9px rgba(0, 0, 0, 0.02), 0 2px 8px rgba(0, 0, 0, 0.01)'
export const dlsShadowLight2 = '0 6px 28px 2px rgba(0, 0, 0, 0.04), 0 4px 26px 2px rgba(0, 0, 0, 0.03), 0 2px 24px 1px rgba(0, 0, 0, 0.02)'
export const dlsShadowLight3 = '0 6px 32px 2px rgba(0, 0, 0, 0.06), 0 5px 30px 1px rgba(0, 0, 0, 0.05), 0 4px 28px 1px rgba(0, 0, 0, 0.04)'
export const dlsShadowOpacityFocus = '0.2'
export const dlsShadowSpreadFocus = '2px'
export const dlsShadowColorFocus = '#1a6eff'
export const dlsShadowColorErrorFocus = '#ff2b20'
export const dlsShadowFocus = '0 0 0 2px rgba(26, 110, 255, 0.2)'
export const dlsShadowErrorFocus = '0 0 0 2px rgba(255, 43, 32, 0.2)'
export const dlsBackgroundColorFocus = '#dce9ff'
export const dlsBorderColorFocus = '#0054e6'
export const dlsBorderColorErrorFocus = '#d9150b'
export const dlsIconSizeNormal = 'calc(1em + 2px)'
export const dlsIconSizeMinor = 'calc(1em + 2px)'
export const dlsIconSizeAux = 'calc(1em + 2px)'
export const dlsIconColorAux = 'rgba(73, 86, 107, 0.8)'
export const dlsIconColorAuxDisabled = 'rgba(83, 101, 138, 0.5)'
export const dlsTransitionDurationInstant = '100ms'
export const dlsTransitionDurationFast = '200ms'
export const dlsTransitionDurationNormal = '300ms'
export const dlsTransitionDurationSlow = '400ms'
export const dlsTransitionTimingFunctionEase = 'ease'
export const dlsTransitionTimingFunctionEaseIn = 'ease-in'
export const dlsTransitionTimingFunctionEaseOut = 'ease-out'
export const dlsTransitionTimingFunctionLinear = 'linear'