Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PCWEB-11964 RDS Color 반영 #112

Merged
merged 2 commits into from
Jan 10, 2024
Merged

PCWEB-11964 RDS Color 반영 #112

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
52fe983
PCWEB-11964 feat: css variable 추가
kimjeongwonn Jan 10, 2024
f8d606c
PCWEB-11964 2.4.8
kimjeongwonn Jan 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@dramancompany/remember-ui",
"version": "2.4.7",
"version": "2.4.8",
"description": "Remember UI Components",
"homepage": "https://dramancompany.github.io/remember-ui/",
"author": "DramanCompany",
Expand Down
57 changes: 29 additions & 28 deletions src/core/GlobalStyle/variable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,38 +75,39 @@ export const gray = gray200;

// Primary 브랜드 컬러 표현 시 사용
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const primary100 = '#000000';
export const primary100 = 'var(--rui-primary100, #000000)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const primary200 = '#FFFFF9';
export const primary200 = 'var(--rui-primary200, #FFFFF9)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const secondary100 = '#FF5414';
export const secondary100 = 'var(--rui-secondary100, #FF5414)';

/**
* colors in use
* */

// Contents txt/ label/ border/ divider
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const contents000 = '#212322';
export const contents000 = 'var(--rui-contents000, #212322)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const contents100 = '#61615F';
export const contents100 = 'var(--rui-contents100, #61615F)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const contents150 = '#8B8B87';
export const contents150 = 'var(--rui-contents150, #8B8B87)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const contents200 = '#B2B1AD';
export const contents200 = 'var(--rui-contents200, #B2B1AD)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const contents300 = '#CDCCC6';
export const contents300 = 'var(--rui-contents300, #CDCCC6)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const contents999 = '#FFFFF9';
export const divider = '#E8E7E0';
export const contents999 = 'var(--rui-contents999, #FFFFF9)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const divider = 'var(--rui-divider, #E8E7E0)';

// Disable disabled CTA
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const disabled = '#CDCCC6';
export const disabled = 'var(--rui-disabled, #CDCCC6)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const disabledRoleRed = '#FFAA8D';
export const disabledRoleRed = 'var(--rui-disabled-role-red, #FFAA8D)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const disabledSecondary = '#FFCBBA';
export const disabledSecondary = 'var(--rui-disabled-secondary, #FFCBBA)';
// legacy
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const disable = disabled;
Expand All @@ -117,13 +118,13 @@ export const disableAccent200 = disabledSecondary;

// Accent Error/ Link/
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const roleRed = '#BB3811';
export const roleRed = 'var(--rui-role-red, #BB3811)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const roleYellow = '#EBA900';
export const roleYellow = 'var(--rui-role-yellow, #EBA900)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const roleBlue = '#00B3EA';
export const roleBlue = 'var(--rui-role-blue, #00B3EA)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const roleGreen = '#29B31E';
export const roleGreen = 'var(--rui-role-green, #29B31E)';
// legacy
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const accent100 = roleRed;
Expand All @@ -132,27 +133,27 @@ export const accent200 = secondary100;

// Background
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const bg100 = '#FFFFFF';
export const bg100 = 'var(--rui-bg100, #FFFFFF)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const bg200 = '#F7F7F0';
export const bg200 = 'var(--rui-bg200, #F7F7F0)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const bg300 = '#E8E7E0';
export const bg300 = 'var(--rui-bg300, #E8E7E0)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const bgModal100 = '#FFFFFF';
export const bgModal100 = 'var(--rui-bg-modal100, #FFFFFF)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const bgModal200 = '#F7F7F0';
export const bgModal200 = 'var(--rui-bg-modal200, #F7F7F0)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const bgRoleRed = '#FCE9E6';
export const bgRoleRed = 'var(--rui-bg-role-red, #FCE9E6)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const bgSecondary100 = '#FFF2F0';
export const bgSecondary100 = 'var(--rui-bg-secondary100, #FFF2F0)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const bgHighlight = '#FCF6E0';
export const bgHighlight = 'var(--rui-bg-highlight, #FCF6E0)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const bgRoleYellow = '#FCF6E0';
export const bgRoleYellow = 'var(--rui-bg-role-yellow, #FCF6E0)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const bgRoleBlue = '#E0F5FC';
export const bgRoleBlue = 'var(--rui-bg-role-blue, #E0F5FC)';
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const bgRoleGreen = '#E7F6E5';
export const bgRoleGreen = 'var(--rui-bg-role-green, #E7F6E5)';
// legacy
/** @deprecated remember-ui는 더 이상 사용되지 않습니다. Rui를 사용해주세요. */
export const background100 = bg100;
Expand Down
Loading