Coder Social home page Coder Social logo

seed-design's Issues

[react-emotion-theme] workspace: protocol issue

yarn add @karrotmarket/react-emotion-theme

➤ YN0000: ┌ Resolution step
➤ YN0001: │ Error: @karrotmarket/design-token@workspace:^0.2.0: Workspace not found (@karrotmarket/design-token@workspace:^0.2.0)
    at Fe.getWorkspaceByDescriptor (/Users/woody/Workspace/_platform-marketing/.yarn/releases/yarn-3.0.2.cjs:303:3502)
    at Eh.getCandidates (/Users/woody/Workspace/_platform-marketing/.yarn/releases/yarn-3.0.2.cjs:294:8755)
    at Xc.getCandidates (/Users/woody/Workspace/_platform-marketing/.yarn/releases/yarn-3.0.2.cjs:294:4947)
    at Xc.getCandidates (/Users/woody/Workspace/_platform-marketing/.yarn/releases/yarn-3.0.2.cjs:294:4947)
    at /Users/woody/Workspace/_platform-marketing/.yarn/releases/yarn-3.0.2.cjs:303:7643
    at Gl (/Users/woody/Workspace/_platform-marketing/.yarn/releases/yarn-3.0.2.cjs:242:4003)
    at y (/Users/woody/Workspace/_platform-marketing/.yarn/releases/yarn-3.0.2.cjs:303:7623)

패키지 설치가안되요.

Can't import the named export 'Fragment' from non EcmaScript module

../.yarn/__virtual__/@karrotmarket-react-emotion-theme-virtual-077c91d7ca/0/cache/@karrotmarket-react-emotion-theme-npm-1.0.1-d12bf8e42a-6a84a44cfa.zip/node_modules/@karrotmarket/react-emotion-theme/lib/index.mjs
Can't import the named export 'Fragment' from non EcmaScript module (only default export is available)

[email protected] is not working in create-react-app. (webpack v4)

스크린샷 2021-11-05 오후 8 19 09

[react-emotion-theme]emotion template literal theme color support

지금 구현에서 template literal을 활용할때,

const Button = styled.button`
  color: $carrot500;
`

요렇게 color palette 사용하는것이 가능한가요?

혹은 아래와 같이 emotion theme을 활용해야만 하나요?

const Button = styled.button`
  color: ${({props}) => props.theme.colors.carrot500};
`

Integration test using Jest

  • Tap 지우고 Jest 모노레포 테스트 구성
  • React 라이브러리들 JSDOM 환경에서 Integration Test 수행

[Umbrella] Upcoming changes

BREAKING CHANGES

all:

  • Will be rebranded to "Seed Design"
  • Move packages to @seed-design/*
  • Change all integration methods in the form of using global css variables.

design-token:

  • Replace the design token source from TypeScript to a platform-agnostic format (DTCG format or custom DSL)
    • (WIP) KDT Spec: #41
  • Generated token codes will be grouped as scale or semantic
    • e.g. colors.background -> semantic.color.background, color-carrot-400 -> scale-color-carrot-400
    • This reduces the impedance mismatch between the mental model and the code and makes searching and static analysis easier.
  • Move CSS resources to the separated package. e.g. @seed-design/css

Features Improvements

all:

  • Fix browserslist target to support iOS 13.0

design-token:

  • Newly defined semantic tokens
  • Add static tokens
  • Add support for Typography tokens

New Libs

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.