프라이머리 컬러 관련

개발
1

안녕하세요 피그마 TDS로 디자인 진행 중에 문의사항 생겨 여쭤봅니다
노션 컬러 테마 가이드를 보면 버튼에만 프라이머리 컬러 반영이 가능하다고 나와 있는데
혹시 다른 영역에는 프라이머리컬러를 아예 사용하지 못하는건가요?
TDS 컴포넌트에서 색상 변경이 아예 불가능한지,
그리고 추가로 제작한 컴포넌트도 TDS 상 허용된 색상을 사용해야 하는지가 궁금합니다.

2

@minsoo-web 확인 부탁드립니다.

3

혹시 아직일까요 ..

4

프라이머리 컬러 지정 방법 알려주세요.

TDS React Native나 개발자 센터 옛날 노션까지 봐도 가이드가 없네요. ㅠ

5 
// granite.config.ts
export default defineConfig({
  // ...
  plugins: [
    // ...
    appsInToss({
      brand: {
        // ...
        primaryColor: '#3182F6', <- 이렇게
      },
    }),
  ],
});

위 방식으로 설정하시면 됩니다.

문서 업데이트는 챙겨보겠습니다. 불편함을 드려 죄송해요.

6

여기서 바꿔도 버튼의 색상은 일괄적으로 바뀌진 않는데, 버튼마다 따로 설정을 해줘야 되는건가요?

7

웹뷰이신가요, RN이실까요?

tds와 framework 버전은 어떤 것을 사용하시는지 궁금합니다.

toss-design-system/mobile을 1버전대를 사용하신다면 ^2 버전으로 업데이트 해주셔야 합니다.

8

이렇게 사용중입니다!

TDS React Native 시작하기. 에는 최신 버전이 명시 되어 있지 않네요 ㅠ
npm install @toss/tds-react-native

버전 업데이트 정보나, 위 항목에 버전 써주시면 넘 감사하겠습니다.

├── @apps-in-toss/framework@1.2.0
├── @babel/core@7.23.9
├── @babel/plugin-proposal-class-properties@7.18.6
├── @babel/plugin-proposal-nullish-coalescing-operator@7.18.6
├── @babel/plugin-proposal-numeric-separator@7.18.6
├── @babel/plugin-proposal-optional-chaining@7.21.0
├── @babel/plugin-proposal-private-methods@7.18.6
├── @babel/plugin-proposal-private-property-in-object@7.21.11
├── @babel/plugin-transform-flow-strip-types@7.27.1
├── @babel/preset-env@7.28.3
├── @babel/preset-react@7.27.1
├── @babel/preset-typescript@7.27.1
├── @babel/runtime@7.18.9
├── @granite-js/native@0.1.21
├── @granite-js/plugin-router@0.1.21
├── @granite-js/react-native@0.1.21
├── @testing-library/react-native@12.9.0
├── @toss-design-system/react-native@1.2.1
├── @types/babel__core@7.20.5
├── @types/jest@29.5.14
├── @types/node@22.18.6
├── @types/react@18.3.3
├── expo-image-manipulator@14.0.7
├── jest@29.7.0
├── react-native@0.72.6
├── react-test-renderer@18.2.0
├── react@18.2.0
└── typescript@5.9.2