Skip to content

Commit

Permalink
feat(stylesheet): 피그마와 토큰 싱크 후 스키마를 업데이트 해요
Browse files Browse the repository at this point in the history
  • Loading branch information
@junghyeonsu
junghyeonsu authored Nov 21, 2024
1 parent b9276a0 commit 776a02a
Show file tree
Hide file tree
Showing 8 changed files with 191 additions and 80 deletions.
2 changes: 1 addition & 1 deletion docs/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@
"@seed-design/react-icon": "^0.7.3",
"@seed-design/react-tabs": "0.0.0-alpha-20241030023710",
"@seed-design/recipe": "0.0.0-alpha-20241114011809",
"@seed-design/stylesheet": "3.0.0-alpha-20241114060527",
"@seed-design/stylesheet": "3.0.0-alpha-20241121055833",
"@stackflow/config": "^1.2.0",
"@stackflow/core": "^1.1.0",
"@stackflow/plugin-basic-ui": "^1.10.0",
Expand Down
2 changes: 1 addition & 1 deletion examples/stackflow-spa/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
"@seed-design/react-tabs": "0.0.0-alpha-20241030023710",
"@seed-design/react-text-field": "0.0.0-alpha-20241030023710",
"@seed-design/recipe": "0.0.0-alpha-20241114011809",
"@seed-design/stylesheet": "3.0.0-alpha-20241114060527",
"@seed-design/stylesheet": "3.0.0-alpha-20241121055833",
"@stackflow/core": "^1.1.0",
"@stackflow/plugin-basic-ui": "^1.10.0",
"@stackflow/plugin-history-sync": "^1.7.0",
Expand Down
66 changes: 33 additions & 33 deletions packages/component-spec/artifacts/schema.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@
},
{
"const": "$color.fg.danger",
"description": "theme-light: palette/red-700, theme-dark: palette/red-600"
"description": "theme-light: palette/red-600, theme-dark: palette/red-600"
},
{
"const": "$color.fg.danger-contrast",
Expand Down Expand Up @@ -107,7 +107,7 @@
},
{
"const": "$color.bg.warning-solid",
"description": "theme-light: palette/yellow-600, theme-dark: palette/yellow-700"
"description": "theme-light: palette/yellow-400, theme-dark: palette/yellow-700"
},
{
"const": "$color.bg.warning-weak",
Expand Down Expand Up @@ -347,83 +347,83 @@
},
{
"const": "$color.palette.blue-100",
"description": "theme-light: rgba(239, 246, 255, 1), theme-dark: rgba(35, 39, 44, 1)"
"description": "theme-light: rgba(239, 246, 255, 1), theme-dark: rgba(28, 38, 51, 1)"
},
{
"const": "$color.palette.blue-200",
"description": "theme-light: rgba(226, 237, 252, 1), theme-dark: rgba(34, 52, 68, 1)"
},
{
"const": "$color.palette.blue-300",
"description": "theme-light: rgba(202, 224, 250, 1), theme-dark: rgba(24, 69, 100, 1)"
"description": "theme-light: rgba(203, 223, 250, 1), theme-dark: rgba(24, 69, 100, 1)"
},
{
"const": "$color.palette.blue-400",
"description": "theme-light: rgba(166, 208, 253, 1), theme-dark: rgba(3, 90, 135, 1)"
"description": "theme-light: rgba(171, 206, 253, 1), theme-dark: rgba(3, 90, 135, 1)"
},
{
"const": "$color.palette.blue-500",
"description": "theme-light: rgba(113, 188, 253, 1), theme-dark: rgba(0, 112, 168, 1)"
"description": "theme-light: rgba(131, 183, 253, 1), theme-dark: rgba(18, 110, 174, 1)"
},
{
"const": "$color.palette.blue-600",
"description": "theme-light: rgba(32, 155, 253, 1), theme-dark: rgba(0, 138, 202, 1)"
"description": "theme-light: rgba(39, 135, 254, 1), theme-dark: rgba(24, 137, 203, 1)"
},
{
"const": "$color.palette.blue-700",
"description": "theme-light: rgba(0, 130, 229, 1), theme-dark: rgba(13, 166, 241, 1)"
"description": "theme-light: rgba(26, 110, 223, 1), theme-dark: rgba(44, 165, 241, 1)"
},
{
"const": "$color.palette.blue-800",
"description": "theme-light: rgba(0, 97, 165, 1), theme-dark: rgba(107, 192, 242, 1)"
"description": "theme-light: rgba(16, 86, 187, 1), theme-dark: rgba(123, 189, 249, 1)"
},
{
"const": "$color.palette.blue-900",
"description": "theme-light: rgba(4, 67, 112, 1), theme-dark: rgba(173, 219, 242, 1)"
"description": "theme-light: rgba(8, 59, 129, 1), theme-dark: rgba(184, 215, 251, 1)"
},
{
"const": "$color.palette.blue-1000",
"description": "theme-light: rgba(10, 40, 59, 1), theme-dark: rgba(217, 244, 250, 1)"
"description": "theme-light: rgba(2, 33, 74, 1), theme-dark: rgba(229, 240, 254, 1)"
},
{
"const": "$color.palette.red-100",
"description": "theme-light: rgba(253, 242, 242, 1), theme-dark: rgba(50, 35, 35, 1)"
},
{
"const": "$color.palette.red-200",
"description": "theme-light: rgba(253, 232, 230, 1), theme-dark: rgba(79, 38, 36, 1)"
"description": "theme-light: rgba(253, 228, 228, 1), theme-dark: rgba(79, 38, 36, 1)"
},
{
"const": "$color.palette.red-300",
"description": "theme-light: rgba(254, 211, 209, 1), theme-dark: rgba(116, 40, 38, 1)"
"description": "theme-light: rgba(254, 206, 204, 1), theme-dark: rgba(116, 40, 38, 1)"
},
{
"const": "$color.palette.red-400",
"description": "theme-light: rgba(254, 187, 183, 1), theme-dark: rgba(161, 38, 33, 1)"
"description": "theme-light: rgba(254, 175, 170, 1), theme-dark: rgba(161, 38, 33, 1)"
},
{
"const": "$color.palette.red-500",
"description": "theme-light: rgba(255, 153, 148, 1), theme-dark: rgba(209, 30, 19, 1)"
"description": "theme-light: rgba(254, 130, 123, 1), theme-dark: rgba(209, 30, 19, 1)"
},
{
"const": "$color.palette.red-600",
"description": "theme-light: rgba(253, 103, 100, 1), theme-dark: rgba(247, 53, 38, 1)"
"description": "theme-light: rgba(255, 65, 45, 1), theme-dark: rgba(247, 53, 38, 1)"
},
{
"const": "$color.palette.red-700",
"description": "theme-light: rgba(242, 30, 22, 1), theme-dark: rgba(242, 121, 109, 1)"
"description": "theme-light: rgba(234, 35, 14, 1), theme-dark: rgba(242, 121, 109, 1)"
},
{
"const": "$color.palette.red-800",
"description": "theme-light: rgba(188, 23, 12, 1), theme-dark: rgba(241, 163, 155, 1)"
"description": "theme-light: rgba(200, 29, 19, 1), theme-dark: rgba(241, 163, 155, 1)"
},
{
"const": "$color.palette.red-900",
"description": "theme-light: rgba(127, 26, 13, 1), theme-dark: rgba(242, 203, 201, 1)"
"description": "theme-light: rgba(143, 30, 16, 1), theme-dark: rgba(242, 203, 201, 1)"
},
{
"const": "$color.palette.red-1000",
"description": "theme-light: rgba(74, 18, 9, 1), theme-dark: rgba(249, 236, 235, 1)"
"description": "theme-light: rgba(74, 18, 9, 1), theme-dark: rgba(243, 203, 200, 1)"
},
{
"const": "$color.palette.green-100",
Expand Down Expand Up @@ -467,43 +467,43 @@
},
{
"const": "$color.palette.yellow-100",
"description": "theme-light: rgba(255, 249, 230, 1), theme-dark: rgba(44, 37, 18, 1)"
"description": "theme-light: rgba(255, 249, 230, 1), theme-dark: rgba(42, 37, 23, 1)"
},
{
"const": "$color.palette.yellow-200",
"description": "theme-light: rgba(253, 243, 206, 1), theme-dark: rgba(62, 47, 33, 1)"
"description": "theme-light: rgba(253, 243, 206, 1), theme-dark: rgba(61, 48, 22, 1)"
},
{
"const": "$color.palette.yellow-300",
"description": "theme-light: rgba(251, 228, 154, 1), theme-dark: rgba(87, 60, 32, 1)"
"description": "theme-light: rgba(251, 228, 154, 1), theme-dark: rgba(81, 63, 21, 1)"
},
{
"const": "$color.palette.yellow-400",
"description": "theme-light: rgba(247, 210, 76, 1), theme-dark: rgba(117, 76, 28, 1)"
"description": "theme-light: rgba(247, 210, 76, 1), theme-dark: rgba(105, 81, 21, 1)"
},
{
"const": "$color.palette.yellow-500",
"description": "theme-light: rgba(227, 184, 44, 1), theme-dark: rgba(146, 95, 32, 1)"
"description": "theme-light: rgba(227, 184, 44, 1), theme-dark: rgba(131, 102, 27, 1)"
},
{
"const": "$color.palette.yellow-600",
"description": "theme-light: rgba(196, 151, 37, 1), theme-dark: rgba(176, 118, 52, 1)"
"description": "theme-light: rgba(196, 151, 37, 1), theme-dark: rgba(156, 127, 37, 1)"
},
{
"const": "$color.palette.yellow-700",
"description": "theme-light: rgba(155, 120, 33, 1), theme-dark: rgba(203, 146, 68, 1)"
"description": "theme-light: rgba(155, 120, 33, 1), theme-dark: rgba(181, 155, 54, 1)"
},
{
"const": "$color.palette.yellow-800",
"description": "theme-light: rgba(117, 91, 34, 1), theme-dark: rgba(226, 173, 102, 1)"
"description": "theme-light: rgba(117, 91, 34, 1), theme-dark: rgba(205, 182, 86, 1)"
},
{
"const": "$color.palette.yellow-900",
"description": "theme-light: rgba(79, 62, 31, 1), theme-dark: rgba(238, 208, 171, 1)"
"description": "theme-light: rgba(79, 62, 31, 1), theme-dark: rgba(227, 218, 150, 1)"
},
{
"const": "$color.palette.yellow-1000",
"description": "theme-light: rgba(44, 37, 18, 1), theme-dark: rgba(243, 239, 230, 1)"
"description": "theme-light: rgba(44, 37, 18, 1), theme-dark: rgba(247, 240, 206, 1)"
},
{
"const": "$color.palette.static-black",
Expand Down Expand Up @@ -575,7 +575,7 @@
},
{
"const": "$color.fg.magic-contrast",
"description": "theme-light: palette/purple-800, theme-dark: palette/purple-900"
"description": "theme-light: palette/purple-900, theme-dark: palette/purple-900"
},
{
"const": "$color.stroke.positive",
Expand Down Expand Up @@ -606,8 +606,8 @@
"description": "theme-light: palette/gray-900, theme-dark: palette/gray-300"
},
{
"const": "$color.palette.static-white-alpha-700",
"description": "theme-light: rgba(255, 255, 255, 0.7), theme-dark: rgba(255, 255, 255, 0.7)"
"const": "$color.palette.static-white-alpha-800",
"description": "theme-light: rgba(255, 255, 255, 0.8), theme-dark: rgba(255, 255, 255, 0.8)"
},
{
"const": "$color.bg.neutral-muted-pressed",
Expand Down
6 changes: 6 additions & 0 deletions packages/stylesheet/CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,11 @@
# @seed-design/stylesheet

## 3.0.0-alpha-20241121055833

### Patch Changes

- 피그마 variable과 싱크해요

## 3.0.0-alpha-20241114060527

### Patch Changes
Expand Down
109 changes: 107 additions & 2 deletions packages/stylesheet/inlineBanner.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,7 @@
width: 100%;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
padding-inline-start: var(--seed-v3-unit-4);
padding-inline-end: var(--seed-v3-unit-4)
padding-inline-start: var(--seed-v3-unit-4)
}
.inlineBanner__content {
display: flex;
Expand All @@ -33,6 +32,55 @@
.inlineBanner__label {
font-weight: var(--seed-v3-font-weight-medium)
}
.inlineBanner__linkLabel {
flex: none;
height: var(--seed-v3-unit-10);
padding-inline: var(--seed-v3-unit-3);
font-size: var(--seed-v3-font-size-50);
font-weight: var(--seed-v3-font-weight-regular);
line-height: 1rem;
text-decoration: underline;
text-underline-offset: 2px;
border: none;
background-color: transparent;
padding: 0
}
.inlineBanner__dismissButton {
flex: none;
display: flex;
justify-content: center;
align-items: center;
width: var(--seed-v3-unit-10);
height: var(--seed-v3-unit-10);
border: none;
background-color: transparent;
padding: 0
}
.inlineBanner__xIcon {
width: var(--seed-v3-unit-4);
height: var(--seed-v3-unit-4)
}
.inlineBanner__chevronRightIcon {
flex: none;
width: var(--seed-v3-unit-4);
height: var(--seed-v3-unit-4);
margin: var(--seed-v3-unit-3)
}
.inlineBanner__root--type_default {
padding-inline-end: var(--seed-v3-unit-4)
}
.inlineBanner__root--type_link {
padding-inline-end: var(--seed-v3-unit-1)
}
.inlineBanner__root--type_dismissible {
padding-inline-end: var(--seed-v3-unit-1)
}
.inlineBanner__root--type_actionable {
padding-inline-end: var(--seed-v3-unit-1);
border: none;
padding-block: 0;
font: inherit
}
.inlineBanner__root--variant_neutralWeak {
background-color: var(--seed-v3-color-bg-neutral-weak)
}
Expand All @@ -45,6 +93,15 @@
.inlineBanner__label--variant_neutralWeak {
color: var(--seed-v3-color-fg-neutral)
}
.inlineBanner__linkLabel--variant_neutralWeak {
color: var(--seed-v3-color-fg-neutral)
}
.inlineBanner__xIcon--variant_neutralWeak {
color: var(--seed-v3-color-fg-neutral)
}
.inlineBanner__chevronRightIcon--variant_neutralWeak {
color: var(--seed-v3-color-fg-neutral)
}
.inlineBanner__root--variant_positiveWeak {
background-color: var(--seed-v3-color-bg-positive-weak)
}
Expand All @@ -57,6 +114,15 @@
.inlineBanner__label--variant_positiveWeak {
color: var(--seed-v3-color-fg-positive-contrast)
}
.inlineBanner__linkLabel--variant_positiveWeak {
color: var(--seed-v3-color-fg-positive-contrast)
}
.inlineBanner__xIcon--variant_positiveWeak {
color: var(--seed-v3-color-fg-positive-contrast)
}
.inlineBanner__chevronRightIcon--variant_positiveWeak {
color: var(--seed-v3-color-fg-positive-contrast)
}
.inlineBanner__root--variant_informativeWeak {
background-color: var(--seed-v3-color-bg-informative-weak)
}
Expand All @@ -69,6 +135,15 @@
.inlineBanner__label--variant_informativeWeak {
color: var(--seed-v3-color-fg-informative-contrast)
}
.inlineBanner__linkLabel--variant_informativeWeak {
color: var(--seed-v3-color-fg-informative-contrast)
}
.inlineBanner__xIcon--variant_informativeWeak {
color: var(--seed-v3-color-fg-informative-contrast)
}
.inlineBanner__chevronRightIcon--variant_informativeWeak {
color: var(--seed-v3-color-fg-informative-contrast)
}
.inlineBanner__root--variant_warningWeak {
background-color: var(--seed-v3-color-bg-warning-weak)
}
Expand All @@ -81,6 +156,15 @@
.inlineBanner__label--variant_warningWeak {
color: var(--seed-v3-color-fg-warning-contrast)
}
.inlineBanner__linkLabel--variant_warningWeak {
color: var(--seed-v3-color-fg-warning-contrast)
}
.inlineBanner__xIcon--variant_warningWeak {
color: var(--seed-v3-color-fg-warning-contrast)
}
.inlineBanner__chevronRightIcon--variant_warningWeak {
color: var(--seed-v3-color-fg-warning-contrast)
}
.inlineBanner__root--variant_warningSolid {
background-color: var(--seed-v3-color-bg-warning-solid)
}
Expand All @@ -93,6 +177,15 @@
.inlineBanner__label--variant_warningSolid {
color: var(--seed-v3-color-fg-warning-contrast)
}
.inlineBanner__linkLabel--variant_warningSolid {
color: var(--seed-v3-color-fg-warning-contrast)
}
.inlineBanner__xIcon--variant_warningSolid {
color: var(--seed-v3-color-fg-warning-contrast)
}
.inlineBanner__chevronRightIcon--variant_warningSolid {
color: var(--seed-v3-color-fg-warning-contrast)
}
.inlineBanner__root--variant_dangerWeak {
position: sticky;
top: 0;
Expand All @@ -107,6 +200,12 @@
.inlineBanner__label--variant_dangerWeak {
color: var(--seed-v3-color-fg-danger-contrast)
}
.inlineBanner__linkLabel--variant_dangerWeak {
color: var(--seed-v3-color-fg-danger-contrast)
}
.inlineBanner__chevronRightIcon--variant_dangerWeak {
color: var(--seed-v3-color-fg-danger-contrast)
}
.inlineBanner__root--variant_dangerSolid {
position: sticky;
top: 0;
Expand All @@ -120,4 +219,10 @@
}
.inlineBanner__label--variant_dangerSolid {
color: var(--seed-v3-color-fg-static-white)
}
.inlineBanner__linkLabel--variant_dangerSolid {
color: var(--seed-v3-color-fg-static-white)
}
.inlineBanner__chevronRightIcon--variant_dangerSolid {
color: var(--seed-v3-color-fg-static-white)
}
Loading

0 comments on commit 776a02a

Please sign in to comment.