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

[Feat]: Tag 컴포넌트 구현 #132

Merged
merged 4 commits into from
Aug 12, 2024
Merged

[Feat]: Tag 컴포넌트 구현 #132

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
2439c79
feat : tag 컴포넌트 구현
SeieunYoo Aug 5, 2024
ee3de6f
feat : 추가된 컬러 토큰 반영
SeieunYoo Aug 6, 2024
d2f1520
feat: blue 일 때 primary 토큰으로 수정
SeieunYoo Aug 10, 2024
9382e93
feat: 리뷰 반영 & changest 추가
SeieunYoo Aug 12, 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
Prev Previous commit
Next Next commit
feat : 추가된 컬러 토큰 반영
  • Loading branch information
@SeieunYoo
SeieunYoo committed Aug 6, 2024
commit ee3de6f9b795842134f4b86ee0eeb9e4a0db5d7f
24 changes: 24 additions & 0 deletions apps/wow-docs/styled-system/tokens/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -475,6 +475,30 @@ const tokens = {
value: "#000000",
variable: "var(--colors-github)",
},
"colors.secondaryYellow": {
value: "#F9AB00",
variable: "var(--colors-secondary-yellow)",
},
"colors.secondaryGreen": {
value: "#34A853",
variable: "var(--colors-secondary-green)",
},
"colors.secondaryRed": {
value: "#EA4335",
variable: "var(--colors-secondary-red)",
},
"colors.errorBackground": {
value: "#FBD9D7",
variable: "var(--colors-error-background)",
},
"colors.blueDisabled": {
value: "#D7E9FD",
variable: "var(--colors-blue-disabled)",
},
"colors.textBlueDisabled": {
value: "#AFD2FC",
variable: "var(--colors-text-blue-disabled)",
},
"spacing.-xxs": {
value: "calc(var(--spacing-xxs) * -1)",
variable: "var(--spacing-xxs)",
Expand Down
20 changes: 19 additions & 1 deletion apps/wow-docs/styled-system/tokens/tokens.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,12 @@ export type Token =
| "colors.blueShadow"
| "colors.discord"
| "colors.github"
| "colors.secondaryYellow"
| "colors.secondaryGreen"
| "colors.secondaryRed"
| "colors.errorBackground"
| "colors.blueDisabled"
| "colors.textBlueDisabled"
| "spacing.-xxs"
| "spacing.-xs"
| "spacing.-sm"
Expand Down Expand Up @@ -170,7 +176,13 @@ export type ColorPalette =
| "shadowMedium"
| "blueShadow"
| "discord"
| "github";
| "github"
| "secondaryYellow"
| "secondaryGreen"
| "secondaryRed"
| "errorBackground"
| "blueDisabled"
| "textBlueDisabled";

export type ColorToken =
| "red.50"
Expand Down Expand Up @@ -262,6 +274,12 @@ export type ColorToken =
| "blueShadow"
| "discord"
| "github"
| "secondaryYellow"
| "secondaryGreen"
| "secondaryRed"
| "errorBackground"
| "blueDisabled"
| "textBlueDisabled"
| "colorPalette.50"
| "colorPalette.100"
| "colorPalette.150"
Expand Down
8 changes: 7 additions & 1 deletion apps/wow-docs/styled-system/types/prop-type.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -660,7 +660,13 @@ export interface UtilityValues {
| "shadowMedium"
| "blueShadow"
| "discord"
| "github";
| "github"
| "secondaryYellow"
| "secondaryGreen"
| "secondaryRed"
| "errorBackground"
| "blueDisabled"
| "textBlueDisabled";
textStyle:
| "display1"
| "display2"
Expand Down
6 changes: 6 additions & 0 deletions packages/wow-theme/src/config/colorTokenList.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,12 +80,15 @@ export const colorTokenList = [
"backgroundNormal",
"backgroundAlternative",
"backgroundDimmer",
"errorBackground",
"sub",
"outline",
"textBlack",
"textWhite",
"darkDisabled",
"lightDisabled",
"blueDisabled",
"textBlueDisabled",
"blueHover",
"monoHover",
"elevatedHover",
Expand All @@ -97,6 +100,9 @@ export const colorTokenList = [
"blueShadow",
"discord",
"github",
"secondaryYellow",
"secondaryGreen",
"secondaryRed",
"blueGradientDark",
"blueGradientLight",
"redGradientDark",
Expand Down
6 changes: 6 additions & 0 deletions packages/wow-theme/src/tokens/color.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,12 @@ export const semanticTokens = defineSemanticTokens({
blueShadow: { value: color.blueShadow },
discord: { value: color.discord },
github: { value: color.github },
secondaryYellow: { value: color.secondaryYellow },
secondaryGreen: { value: color.secondaryGreen },
secondaryRed: { value: color.secondaryRed },
errorBackground: { value: color.errorBackground },
blueDisabled: { value: color.blueDisabled },
textBlueDisabled: { value: color.textBlueDisabled },
},
});

Expand Down
8 changes: 7 additions & 1 deletion packages/wow-tokens/src/color.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ export const error = red600;
export const backgroundNormal = white;
export const backgroundAlternative = mono50;
export const backgroundDimmer = blackOpacity80;
export const errorBackground = red100;

export const sub = mono700;
export const outline = mono400;
Expand All @@ -104,10 +105,11 @@ export const textWhite = white;

export const darkDisabled = mono400;
export const lightDisabled = mono200;
export const blueDisabled = blue100;
export const textBlueDisabled = blue200;

export const blueHover = blue600;
export const monoHover = mono950;

export const elevatedHover = "rgba(16, 43, 74, 0.2)";

export const bluePressed = blue400;
Expand All @@ -121,6 +123,10 @@ export const blueShadow = "rgba(16, 43, 74, 0.2)";
export const discord = "#5566FB";
export const github = black;

export const secondaryYellow = yellow500;
export const secondaryGreen = green500;
export const secondaryRed = red500;

export const blueGradientDark = {
gradientFrom: blue500,
gradientTo: blue700,
Expand Down
5 changes: 5 additions & 0 deletions packages/wow-ui/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,6 +30,11 @@
"require": "./dist/TextButton.cjs",
"import": "./dist/TextButton.js"
},
"./Tag": {
"types": "./dist/components/Tag/index.d.ts",
"require": "./dist/Tag.cjs",
"import": "./dist/Tag.js"
},
"./Switch": {
"types": "./dist/components/Switch/index.d.ts",
"require": "./dist/Switch.cjs",
Expand Down
1 change: 1 addition & 0 deletions packages/wow-ui/rollup.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,7 @@ export default {
input: {
TextField: "./src/components/TextField",
TextButton: "./src/components/TextButton",
Tag: "./src/components/Tag",
Switch: "./src/components/Switch",
Stepper: "./src/components/Stepper",
BlueSpinner: "./src/components/Spinner/BlueSpinner",
Expand Down
26 changes: 13 additions & 13 deletions packages/wow-ui/src/components/Tag/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,8 +62,8 @@ const TagStyle = cva({
display: "flex",
alignItems: "center",
justifyContent: "center",
paddingX: "xxs",
paddingY: "xs",
paddingX: "xs",
paddingY: "xxs",
borderRadius: "sm",
width: "fit-content",
border: "1px solid",
Expand All @@ -84,20 +84,20 @@ const TagStyle = cva({
},
color: {
red: {
borderColor: "red.500",
color: "red.500",
borderColor: "secondaryRed",
color: "secondaryRed",
},
green: {
borderColor: "green.500",
color: "green.500",
borderColor: "secondaryGreen",
color: "secondaryGreen",
},
blue: {
borderColor: "blue.500",
color: "blue.500",
borderColor: "secondaryBlue",
color: "secondaryBlue",
},
yellow: {
borderColor: "yellow.500",
color: "yellow.500",
borderColor: "secondaryYellow",
color: "secondaryYellow",
},
grey: {},
},
Expand All @@ -107,16 +107,16 @@ const TagStyle = cva({
variant: "solid2",
color: "blue",
css: {
backgroundColor: "bluePressed",
backgroundColor: "blueDisabled",
color: "blueHover",
},
},
{
variant: "solid2",
color: "red",
css: {
backgroundColor: "error",
color: "red.500",
backgroundColor: "errorBackground",
color: "error",
},
},
{
Expand Down
24 changes: 24 additions & 0 deletions packages/wow-ui/styled-system/tokens/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -475,6 +475,30 @@ const tokens = {
value: "#000000",
variable: "var(--colors-github)",
},
"colors.secondaryYellow": {
value: "#F9AB00",
variable: "var(--colors-secondary-yellow)",
},
"colors.secondaryGreen": {
value: "#34A853",
variable: "var(--colors-secondary-green)",
},
"colors.secondaryRed": {
value: "#EA4335",
variable: "var(--colors-secondary-red)",
},
"colors.errorBackground": {
value: "#FBD9D7",
variable: "var(--colors-error-background)",
},
"colors.blueDisabled": {
value: "#D7E9FD",
variable: "var(--colors-blue-disabled)",
},
"colors.textBlueDisabled": {
value: "#AFD2FC",
variable: "var(--colors-text-blue-disabled)",
},
"spacing.-xxs": {
value: "calc(var(--spacing-xxs) * -1)",
variable: "var(--spacing-xxs)",
Expand Down
20 changes: 19 additions & 1 deletion packages/wow-ui/styled-system/tokens/tokens.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -119,6 +119,12 @@ export type Token =
| "colors.blueShadow"
| "colors.discord"
| "colors.github"
| "colors.secondaryYellow"
| "colors.secondaryGreen"
| "colors.secondaryRed"
| "colors.errorBackground"
| "colors.blueDisabled"
| "colors.textBlueDisabled"
| "spacing.-xxs"
| "spacing.-xs"
| "spacing.-sm"
Expand Down Expand Up @@ -170,7 +176,13 @@ export type ColorPalette =
| "shadowMedium"
| "blueShadow"
| "discord"
| "github";
| "github"
| "secondaryYellow"
| "secondaryGreen"
| "secondaryRed"
| "errorBackground"
| "blueDisabled"
| "textBlueDisabled";

export type ColorToken =
| "red.50"
Expand Down Expand Up @@ -262,6 +274,12 @@ export type ColorToken =
| "blueShadow"
| "discord"
| "github"
| "secondaryYellow"
| "secondaryGreen"
| "secondaryRed"
| "errorBackground"
| "blueDisabled"
| "textBlueDisabled"
| "colorPalette.50"
| "colorPalette.100"
| "colorPalette.150"
Expand Down
8 changes: 7 additions & 1 deletion packages/wow-ui/styled-system/types/prop-type.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -660,7 +660,13 @@ export interface UtilityValues {
| "shadowMedium"
| "blueShadow"
| "discord"
| "github";
| "github"
| "secondaryYellow"
| "secondaryGreen"
| "secondaryRed"
| "errorBackground"
| "blueDisabled"
| "textBlueDisabled";
textStyle:
| "display1"
| "display2"
Expand Down
Loading