less-plugin-dls/test/specs/global/global.css

Less plugin for Baidu Light DLS.

div {
  -dls-color-brand: #0054e6;
  -dls-color-brand-0: #fff;
  -dls-color-brand-1: #ebf2ff;
  -dls-color-brand-2: #dce9ff;
  -dls-color-brand-3: #bfd7ff;
  -dls-color-brand-4: #95bcff;
  -dls-color-brand-5: #5e99ff;
  -dls-color-brand-6: #1a6eff;
  -dls-color-brand-7: #0054e6;
  -dls-color-brand-8: #0047c4;
  -dls-color-brand-9: #003796;
  -dls-color-brand-10: #00225c;
  -dls-color-brand-11: #000;
  -dls-color-info: #0054e6;
  -dls-color-info-0: #fff;
  -dls-color-info-1: #ebf2ff;
  -dls-color-info-2: #dce9ff;
  -dls-color-info-3: #bfd7ff;
  -dls-color-info-4: #95bcff;
  -dls-color-info-5: #5e99ff;
  -dls-color-info-6: #1a6eff;
  -dls-color-info-7: #0054e6;
  -dls-color-info-8: #0047c4;
  -dls-color-info-9: #003796;
  -dls-color-info-10: #00225c;
  -dls-color-info-11: #000;
  -dls-color-success: #009940;
  -dls-color-success-0: #fff;
  -dls-color-success-1: #ebfff3;
  -dls-color-success-2: #daffe9;
  -dls-color-success-3: #baffd7;
  -dls-color-success-4: #8bffbb;
  -dls-color-success-5: #4dff97;
  -dls-color-success-6: #00cc55;
  -dls-color-success-7: #009940;
  -dls-color-success-8: #008236;
  -dls-color-success-9: #00632a;
  -dls-color-success-10: #003d1a;
  -dls-color-success-11: #000;
  -dls-color-warning: #f27318;
  -dls-color-warning-0: #fff;
  -dls-color-warning-1: #fff3eb;
  -dls-color-warning-2: #ffecdf;
  -dls-color-warning-3: #ffdfc9;
  -dls-color-warning-4: #ffcca8;
  -dls-color-warning-5: #ffb37d;
  -dls-color-warning-6: #ff9448;
  -dls-color-warning-7: #f27318;
  -dls-color-warning-8: #ce5600;
  -dls-color-warning-9: #9d4200;
  -dls-color-warning-10: #612800;
  -dls-color-warning-11: #000;
  -dls-color-error: #d9150b;
  -dls-color-error-0: #fff;
  -dls-color-error-1: #ffeceb;
  -dls-color-error-2: #ffdedc;
  -dls-color-error-3: #ffc4c0;
  -dls-color-error-4: #ff9d98;
  -dls-color-error-5: #ff6a63;
  -dls-color-error-6: #ff2b20;
  -dls-color-error-7: #d9150b;
  -dls-color-error-8: #b80900;
  -dls-color-error-9: #8d0700;
  -dls-color-error-10: #570400;
  -dls-color-error-11: #000;
  -dls-color-gray-0: #fff;
  -dls-color-gray-1: #f6f7fa;
  -dls-color-gray-2: #ebedf5;
  -dls-color-gray-3: #e2e6f0;
  -dls-color-gray-4: #d3d9e6;
  -dls-color-gray-5: #c5ccdb;
  -dls-color-gray-6: #a8b0bf;
  -dls-color-gray-7: #848b99;
  -dls-color-gray-8: #545b66;
  -dls-color-gray-9: #191b1e;
  -dls-color-gray-10: #0a0b0d;
  -dls-color-gray-11: #000;
  -dls-color-translucent-0: transparent;
  -dls-color-translucent-1: rgba(58, 85, 166, 0.07);
  -dls-color-translucent-2: rgba(58, 87, 166, 0.1);
  -dls-color-translucent-3: rgba(54, 82, 153, 0.15);
  -dls-color-translucent-4: rgba(49, 76, 140, 0.2);
  -dls-color-translucent-5: rgba(60, 83, 133, 0.3);
  -dls-color-translucent-6: rgba(83, 98, 128, 0.5);
  -dls-color-translucent-7: rgba(80, 90, 107, 0.8);
  -dls-color-translucent-8: rgba(45, 52, 64, 0.8);
  -dls-color-translucent-9: rgba(13, 15, 18, 0.95);
  -dls-color-translucent-10: rgba(4, 4, 5, 0.95);
  -dls-color-translucent-11: #000;
  -dls-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
  -dls-font-family-number: "Baidu Number", sans-serif;
  -dls-font-size-0: 12px;
  -dls-font-size-1: 14px;
  -dls-font-size-2: 16px;
  -dls-font-size-3: 18px;
  -dls-font-size-4: 20px;
  -dls-font-size-5: 24px;
  -dls-font-size-6: 32px;
  -dls-font-weight-1: 400;
  -dls-font-weight-2: 500;
  -dls-font-weight-3: 600;
  -dls-line-height-1: 1.4;
  -dls-line-height-2: 1.6;
  -dls-line-height-3: 1.8;
  -dls-spacing-unit: 4px;
  -dls-padding-unit: 4px;
  -dls-height-unit: 4px;
  -dls-spacing-1: 4px;
  -dls-spacing-2: 8px;
  -dls-spacing-3: 12px;
  -dls-spacing-4: 16px;
  -dls-spacing-5: 24px;
  -dls-spacing-6: 32px;
  -dls-spacing-7: 40px;
  -dls-height-xs: 24px;
  -dls-height-s: 28px;
  -dls-height-m: 32px;
  -dls-height-l: 36px;
  -dls-height-xl: 40px;
  -dls-foreground-color-reverse: #fff;
  -dls-foreground-color-primary-reverse: #fff;
  -dls-foreground-color-primary: #0054e6;
  -dls-foreground-color-primary-hover: #1a6eff;
  -dls-foreground-color-primary-active: #0047c4;
  -dls-foreground-color-primary-disabled: #95bcff;
  -dls-foreground-color-neutral: rgba(13, 15, 18, 0.95);
  -dls-foreground-color-neutral-hover: rgba(45, 52, 64, 0.8);
  -dls-foreground-color-neutral-active: #000;
  -dls-foreground-color-neutral-disabled: rgba(83, 98, 128, 0.5);
  -dls-foreground-color-neutral-strong: #000;
  -dls-foreground-color-neutral-strong-hover: rgba(4, 4, 5, 0.95);
  -dls-foreground-color-neutral-strong-active: #000;
  -dls-foreground-color-neutral-strong-disabled: rgba(83, 98, 128, 0.5);
  -dls-foreground-color-neutral-light: rgba(45, 52, 64, 0.8);
  -dls-foreground-color-neutral-light-hover: rgba(80, 90, 107, 0.8);
  -dls-foreground-color-neutral-light-active: rgba(13, 15, 18, 0.95);
  -dls-foreground-color-neutral-light-disabled: rgba(83, 98, 128, 0.5);
  -dls-foreground-color-neutral-weak: rgba(80, 90, 107, 0.8);
  -dls-foreground-color-neutral-weak-hover: rgba(45, 52, 64, 0.8);
  -dls-foreground-color-neutral-weak-active: rgba(13, 15, 18, 0.95);
  -dls-foreground-color-neutral-weak-disabled: rgba(60, 83, 133, 0.3);
  -dls-foreground-color-neutral-dim: rgba(83, 98, 128, 0.5);
  -dls-foreground-color-neutral-dim-hover: rgba(80, 90, 107, 0.8);
  -dls-foreground-color-neutral-dim-active: rgba(45, 52, 64, 0.8);
  -dls-foreground-color-neutral-dim-disabled: rgba(54, 82, 153, 0.15);
  -dls-foreground-color-neutral-subtle: rgba(60, 83, 133, 0.3);
  -dls-foreground-color-neutral-subtle-hover: rgba(83, 98, 128, 0.5);
  -dls-foreground-color-neutral-subtle-active: rgba(80, 90, 107, 0.8);
  -dls-foreground-color-neutral-subtle-disabled: rgba(54, 82, 153, 0.15);
  -dls-foreground-color-neutral-highlightable: rgba(13, 15, 18, 0.95);
  -dls-foreground-color-neutral-highlightable-hover: #1a6eff;
  -dls-foreground-color-neutral-highlightable-active: #0047c4;
  -dls-foreground-color-neutral-highlightable-disabled: rgba(83, 98, 128, 0.5);
  -dls-foreground-color-info-primary: #0054e6;
  -dls-foreground-color-info-primary-disabled: #95bcff;
  -dls-foreground-color-success-primary: #009940;
  -dls-foreground-color-success-primary-disabled: #8bffbb;
  -dls-foreground-color-warning-primary: #ff9448;
  -dls-foreground-color-warning-primary-disabled: #ffcca8;
  -dls-foreground-color-error-primary: #d9150b;
  -dls-foreground-color-error-primary-disabled: #ff9d98;
  -dls-foreground-color-highlighted: #f27318;
  -dls-background-color-base-1: #fff;
  -dls-background-color-base-1-hover: #f6f7fa;
  -dls-background-color-base-1-active: #e2e6f0;
  -dls-background-color-base-1-disabled: #fff;
  -dls-background-color-base-2: #f6f7fa;
  -dls-background-color-base-2-hover: #ebedf5;
  -dls-background-color-base-2-active: #e2e6f0;
  -dls-background-color-base-2-disabled: #f6f7fa;
  -dls-background-color-base-3: #ebedf5;
  -dls-background-color-base-3-hover: #e2e6f0;
  -dls-background-color-base-3-active: #d3d9e6;
  -dls-background-color-base-3-disabled: #f6f7fa;
  -dls-background-color-primary: #0054e6;
  -dls-background-color-primary-hover: #1a6eff;
  -dls-background-color-primary-active: #0047c4;
  -dls-background-color-primary-disabled: #dce9ff;
  -dls-border-color-primary: transparent;
  -dls-border-color-primary-disabled: transparent;
  -dls-background-color-info-primary: #0054e6;
  -dls-background-color-info-primary-hover: #1a6eff;
  -dls-background-color-info-primary-active: #0047c4;
  -dls-background-color-info-primary-disabled: #dce9ff;
  -dls-border-color-info-primary: transparent;
  -dls-border-color-info-primary-disabled: transparent;
  -dls-background-color-success-primary: #009940;
  -dls-background-color-success-primary-hover: #00cc55;
  -dls-background-color-success-primary-active: #008236;
  -dls-background-color-success-primary-disabled: #daffe9;
  -dls-border-color-success-primary: transparent;
  -dls-border-color-success-primary-disabled: transparent;
  -dls-background-color-warning-primary: #ff9448;
  -dls-background-color-warning-primary-hover: #ffb37d;
  -dls-background-color-warning-primary-active: #f27318;
  -dls-background-color-warning-primary-disabled: #ffecdf;
  -dls-border-color-warning-primary: transparent;
  -dls-border-color-warning-primary-disabled: transparent;
  -dls-background-color-error-primary: #d9150b;
  -dls-background-color-error-primary-hover: #ff2b20;
  -dls-background-color-error-primary-active: #b80900;
  -dls-background-color-error-primary-disabled: #ffdedc;
  -dls-border-color-error-primary: transparent;
  -dls-border-color-error-primary-disabled: transparent;
  -dls-background-color-neutral-primary: #a8b0bf;
  -dls-background-color-neutral-primary-hover: #848b99;
  -dls-background-color-neutral-primary-active: #545b66;
  -dls-background-color-neutral-primary-disabled: #e2e6f0;
  -dls-border-color-neutral-primary: transparent;
  -dls-border-color-neutral-primary-disabled: transparent;
  -dls-background-color-info: #ebf2ff;
  -dls-background-color-info-hover: #dce9ff;
  -dls-background-color-info-active: #bfd7ff;
  -dls-background-color-info-disabled: #ebf2ff;
  -dls-border-color-info: #95bcff;
  -dls-border-color-info-disabled: #bfd7ff;
  -dls-background-color-success: #ebfff3;
  -dls-background-color-success-hover: #daffe9;
  -dls-background-color-success-active: #baffd7;
  -dls-background-color-success-disabled: #ebfff3;
  -dls-border-color-success: #8bffbb;
  -dls-border-color-success-disabled: #baffd7;
  -dls-background-color-warning: #fff3eb;
  -dls-background-color-warning-hover: #ffecdf;
  -dls-background-color-warning-active: #ffdfc9;
  -dls-background-color-warning-disabled: #fff3eb;
  -dls-border-color-warning: #ffcca8;
  -dls-border-color-warning-disabled: #ffdfc9;
  -dls-background-color-error: #ffeceb;
  -dls-background-color-error-hover: #ffdedc;
  -dls-background-color-error-active: #ffc4c0;
  -dls-background-color-error-disabled: #ffeceb;
  -dls-border-color-error: #ff9d98;
  -dls-border-color-error-disabled: #ffc4c0;
  -dls-background-color-neutral: #ebedf5;
  -dls-background-color-neutral-hover: #e2e6f0;
  -dls-background-color-neutral-active: #d3d9e6;
  -dls-background-color-neutral-disabled: #f6f7fa;
  -dls-border-color-neutral: #c5ccdb;
  -dls-border-color-neutral-disabled: #e2e6f0;
  -dls-background-color-current: #ebf2ff;
  -dls-background-color-current-hover: #dce9ff;
  -dls-background-color-current-active: #bfd7ff;
  -dls-background-color-current-disabled: #ebf2ff;
  -dls-border-color-current: #0054e6;
  -dls-border-color-current-disabled: #bfd7ff;
  -dls-background-color-strong: #fff;
  -dls-background-color-strong-hover: #ebf2ff;
  -dls-background-color-strong-active: #dce9ff;
  -dls-background-color-strong-disabled: #ebf2ff;
  -dls-border-color-strong: #0054e6;
  -dls-border-color-strong-disabled: #bfd7ff;
  -dls-background-color-error-strong: #fff;
  -dls-background-color-error-strong-hover: #ffeceb;
  -dls-background-color-error-strong-active: #ffdedc;
  -dls-background-color-error-strong-disabled: #ffeceb;
  -dls-border-color-error-strong: #d9150b;
  -dls-border-color-error-strong-disabled: #ffc4c0;
  -dls-background-color-fillable: #fff;
  -dls-background-color-fillable-hover: #ebedf5;
  -dls-background-color-fillable-active: #d3d9e6;
  -dls-background-color-fillable-disabled: #f6f7fa;
  -dls-border-color-fillable: #d3d9e6;
  -dls-border-color-fillable-hover: #a8b0bf;
  -dls-border-color-fillable-active: #a8b0bf;
  -dls-border-color-fillable-disabled: #e2e6f0;
  -dls-background-color-pressable: #fff;
  -dls-background-color-pressable-hover: #f6f7fa;
  -dls-background-color-pressable-active: #e2e6f0;
  -dls-background-color-pressable-disabled: #f6f7fa;
  -dls-border-color-pressable: #e2e6f0;
  -dls-border-color-pressable-hover: #d3d9e6;
  -dls-border-color-pressable-active: #d3d9e6;
  -dls-border-color-pressable-disabled: #e2e6f0;
  -dls-background-color-translucent: rgba(0, 0, 0, 0.6);
  -dls-background-color-translucent-hover: rgba(0, 0, 0, 0.5);
  -dls-background-color-translucent-active: rgba(0, 0, 0, 0.7);
  -dls-background-color-translucent-disabled: rgba(0, 0, 0, 0.2);
  -dls-border-color-translucent: transparent;
  -dls-border-color-translucent-disabled: transparent;
  -dls-background-color-translucent-reverse: transparent;
  -dls-background-color-translucent-reverse-hover: rgba(255, 255, 255, 0.15);
  -dls-background-color-translucent-reverse-active: rgba(255, 255, 255, 0.25);
  -dls-background-color-translucent-reverse-disabled: transparent;
  -dls-border-color-translucent-reverse: transparent;
  -dls-border-color-translucent-reverse-disabled: transparent;
  -dls-background-color-modal: rgba(0, 0, 0, 0.6);
  -dls-line-color-0: #ebedf5;
  -dls-line-color-1: #e2e6f0;
  -dls-line-color-2: #d3d9e6;
  -dls-border-radius-0: 2px;
  -dls-border-radius-1: 4px;
  -dls-border-radius-2: 6px;
  -dls-border-radius-3: 10px;
  -dls-shadow-color: #000;
  -dls-shadow-1: 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);
  -dls-shadow-2: 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);
  -dls-shadow-3: 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);
  -dls-shadow-4: 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);
  -dls-shadow-color-light: #000;
  -dls-shadow-light-1: 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);
  -dls-shadow-light-2: 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);
  -dls-shadow-light-3: 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);
  -dls-shadow-opacity-focus: 0.2;
  -dls-shadow-spread-focus: 2px;
  -dls-shadow-color-focus: #1a6eff;
  -dls-shadow-color-error-focus: #ff2b20;
  -dls-shadow-focus: 0 0 0 2px rgba(26, 110, 255, 0.2);
  -dls-shadow-error-focus: 0 0 0 2px rgba(255, 43, 32, 0.2);
  -dls-background-color-focus: #dce9ff;
  -dls-border-color-focus: #0054e6;
  -dls-border-color-error-focus: #d9150b;
  -dls-icon-size-normal: calc(1em + 2px);
  -dls-icon-size-minor: calc(1em + 2px);
  -dls-icon-size-aux: calc(1em + 2px);
  -dls-icon-color-aux: rgba(80, 90, 107, 0.8);
  -dls-icon-color-aux-disabled: rgba(83, 98, 128, 0.5);
  -dls-transition-duration-instant: 100ms;
  -dls-transition-duration-fast: 200ms;
  -dls-transition-duration-normal: 300ms;
  -dls-transition-duration-slow: 400ms;
  -dls-transition-timing-function-ease: ease;
  -dls-transition-timing-function-ease-in: ease-in;
  -dls-transition-timing-function-ease-out: ease-out;
  -dls-transition-timing-function-linear: linear;
}