소개

당신이 새로운 기능을 개발할 때, 당신은 어떤 색을 사용하는지 어떻게 압니까?.scss 파일에 1000개의 16진수 코드로 300가지의 독특한 색깔이 분포되어 있으면 어떻게 됩니까?당신은 어떻게 당신의 색깔이 일치하거나 충분한 대비도를 가지고 접근하기 쉽도록 확보합니까?디자이너가 색을 명확하게 정의한 Figma 파일을 주더라도 같은 페이지의 다른 색과 일치하지 않을 수도 있습니다. 301개의 독특한 색을 가져다 줄 수도 있습니다.
나의 경험에 따르면 디자이너와 개발자가 서로 다른 색깔을 선택하는 것은 지속가능하지 않은 전략이다.일치성, 접근성, 개발 속도를 유지하기 위해서는 색을 미리 정의된 집합에 제한하고 16진 코드 이외의 의미를 제공해야 한다.
본고는 내가 어떻게 구축하고 사용하는지dcwither/scss-codemods를 총괄하여 하나의 코드 라이브러리의 약 1000개의 16진 코드를 더욱 쉽게 유지할 수 있는 25개로 줄였다.

완화 정책

일반적으로 디자이너들은 대다수 엔지니어들 앞에서 일치하지 않는 색깔에 싫증이 난다. 그들은 색깔, 간격, 조판 등 측면에서 디자인 라이브러리를 구축하여 브랜드의 일치성을 높이는 데 착수한다. 디자이너가 이렇게 하기 시작하면 엔지니어의 가장 좋은 조치는 엔지니어와 디자이너 사이에서 사용할 수 있는 유니버설 명칭 방안을 찾아 작성하는 것이다.그래서 design tokens가 탄생했다.
본고에서 우리는 scss/_variables.scss의 Bootstrap 디자인 영패를 사용할 것이다.

미래 증명

일단 우리가 디자인 영패가 생기면, 코드 라이브러리에 새로운 색깔이 추가되지 않도록 확보해야 한다.우리는 이런 상황을 방지하기 위해 lint 규칙을 사용할 수 있다.
완벽한 일치는 아니지만 스타일링트 color-no-hex 는 이를 잘 표시한다.이 규칙은 16진수 색상을 사용할 때 경고를 보내서 디자인 태그를 저항이 가장 적은 경로로 만듭니다.코드 심사 도구 reviewdog 와 결합할 수 있습니다. 이 도구는 lint 규칙을 새로운 변경에만 적용합니다.

병합

그러나 토큰을 채택해서는 모든 누적 채무를 해결할 수 없다.우리는 전체 코드 라이브러리에 여전히 1000개의 16진 코드가 있는데, 그 중 많은 코드는 설계 영패 값과 군더더기가 될 것이다.

대체 정밀 일치

정확한 일치는 Find와 Replace로 복구할 수 있지만, 우리의 예에서 40개의 색 표시가 있어서 스크립트를 작성하면 가치가 있습니다.이를 위해, 나는postss 플러그인을 만들어서 앞으로 변경될 수 있도록 더욱 깔끔하게 했다.

module.exports = (opts) => {
  function mapColorsInString(str) {
    return str.replace(
      /#[0-9a-f][0-9a-f][0-9a-f]([0-9a-f][0-9a-f][0-9a-f])?/gi,
      (match) => {
        const mapping = opts.config.find(({ hex }) => {
          return hex.toLowerCase() === match.toLowerCase();
        });
        if (mapping) {
          return mapping.name;
        }
        return match;
      }
    );
  }

  return {
    postcssPlugin: "hex-to-tokens",
    Declaration(decl) {
      decl.value = mapColorsInString(decl.value);
    },
  };
};

여기서 config 은 다음과 같은 형식으로 설계된 토큰을 나타냅니다.

[
  {
    hex: "#ffffff",
    name: "$white"
  },
  {

    hex: "#f8f9fa",
    name: "$gray-100"
  },
  ...
]

이것은 항상 같은 16진수 값을 사용하는 프로젝트에 적용되지만, 개발자가 색을 일치하지 않을 때 효과가 좋지 않다.이 문제를 해결하기 위해 Delta E 알고리즘을 사용하여 색상을 가장 가까운 디자인 태그에 매핑합니다.

ΔE*(δE) 알고리즘

Delta E는 두 가지 색상을 사용하여 거리를 나타내는 단일 값을 생성하는 알고리즘입니다.Delta E를 사용하여 16진수 색상과 가장 가까운 디자인 태그를 찾습니다.우리는 일치하는 것만 고려하고 거리가 필요한 한도값 안에 있을 때 교체합니다.

Delta E estimates how humans perceive the difference between two colors rather than a Euclidean distance on the RGB spectrum. It adjusts the "distance" depending on how sensitive human perception is to that part of the color spectrum. You can learn more from the delta-e package documentation.

import convert from "color-convert";
import DeltaE from "delta-e";

// DeltaE works in the CIELAB color space, so we use 
// color-convert to get a CIELAB color from our RGB values
function hexToLab(hexColor) {
  const [L, A, B] = convert.hex.lab.raw(hexColor.substr(1));
  return { L, A, B };
}
module.exports (opts) => {
  opts = {
    // default values
    threshold: 0,
    ...opts,
  };

  const mappings = opts.config.map((mapping) => ({
    ...mapping,
    lab: hexToLab(mapping.hex),
  }));

  function mapHexColorToBestMatch(hexColor) {
    const labColor = hexToLab(hexColor);
    let lowestDeltaE = 100;
    let bestMatch = null;
    for (const mapping of mappings) {
      const deltaE = DeltaE.getDeltaE00(mapping.lab, labColor);
      if (lowestDeltaE > deltaE) {
        lowestDeltaE = deltaE;
        bestMatch = mapping;
      }
    }

    if (lowestDeltaE <= opts.threshold) {
      return bestMatch.name;
    } else {
      return hexColor;
    }
  }

  function mapColorsInString(str) {
    return str.replace(
      /#[0-9a-f][0-9a-f][0-9a-f]([0-9a-f][0-9a-f][0-9a-f])?/gi,
      (match) => {
        return mapHexColorToBestMatch(match);
      }
    );
  }

  return {
    postcssPlugin: "hex-to-tokens",
    Declaration(decl) {
      decl.value = mapColorsInString(decl.value);
    },
  };
};

우리는 코드 라이브러리에 필요한 한도값을 사용해서 매우 가까운 색을 지울 수 있다.나는 자세히 검사해야만 발견할 수 있는 변화에 비추기 위해 한도값 2를 선택했다.우리는 약 1000개의 16진 코드에서 약 200개로 떨어졌는데, 이 코드들은 어떤 설계 영패와도 가깝지 않다.

You might want to make exceptions for some colors where even subtle differences can be easily perceived (e.g. #FFF for white).

수동 마이그레이션

마이그레이션의 마지막 단계는 제품 디자이너와 엔지니어가 심사할 수 있도록 색상 제안을 만드는 것이다.Delta E 프로세스를 반복했지만 가장 가까운 세 가지 색상을 기록했습니다.
나는 출력을 구글 전자 표로 복사하고 스크립트를 사용하여 16진 코드가 포함된 칸에 배경색을 설정할 것이다.디자이너는 스프레드시트에서 가장 좋은 추천을 선택했고 추천이 무의미한 곳에 다른 색깔을 추가했다.
이 마지막 단계는 우리를 약 200개의 16진 코드에서 디자인 영패 이외의 25가지 색깔로 가져왔다.우리는 그 특수한 색깔을 교체하기 위해 더 많은 설계가 필요하다.

결론

전체 프로젝트에서 우리는:

디자인 영패 도입

새로운 16진 색을 방지하기 위해 lint 규칙을 추가했습니다

Delta E 및 PostCs

를 사용하여 자동 마이그레이션 수행

Dellta E

기반 권장 사항을 사용하여 나머지 색상을 수동으로 마이그레이션
우리는 현재 매우 좋은 상태에 처해 있다. 미래의 기능 개발을 추진할 수 있고 우리의 색깔이 디자이너의 기대에 부합되고 우리의 색깔 대비도가 요구에 부합되는 것을 더욱 잘 확보할 수 있다고 믿는다WCAG AA accessibility standards.
동일한 마이그레이션에 관심이 있는 경우 dcwither/scss-codemods 를 참조하십시오.hex-to-token 명령은 전체 코드 베이스에서 자동 증량 E 변환을 실행합니다.수동 마이그레이션은 지원되지 않습니다.

회사 명 / scss codemods

POSTSS 플러그인을 사용하여 작성된 SCSS 코드 모듈

scss codemods

이 프로젝트는 가독성을 높이기 위한 lint 규칙에 부합하기 위해 POSTSS를 사용하여 scss 코드를 재구성합니다.

설치

npm를 통해 전 세계적으로

npm i -g scss-codemods

필요에 따라 실행

npx scss-codemods [command] [options]

연합 클래스 이름

업그레이드에는 중첩된 공동 선택기가 있는 CSS 클래스&-가 있습니다.scss/no-union-class-name stylelint 규칙 표시를 복구하려고 합니다.
예:
.규칙
&- 접미사 {
파란색
}
}
//가 되다
.규칙 접미사
파란색
}
브라우저에서 생성된 선택기의 집적성을 높이기 위한 것이다.

활용단어참조

scss codemods 공동 클래스 이름 - <파일> 순서를 다시 지정하지 않음

옵션

-- 순서 재정리

코드모드에 제공된 재정렬 규칙의 자유도를 확인하여 필요한 형식과 더 잘 일치시킵니다. (기본값: never.
가치관:

never: 선택기의 순서를 재정리할 경우 규칙이 향상되지 않습니다.

safe-only: 선택기를 다시 정렬하는 규칙을 촉진합니다. 다시 정렬하는 선택기만...

View on GitHub