Skip to content

Commit

Permalink
fix: add figma colors
Browse files Browse the repository at this point in the history
  • Loading branch information
@brian-mulier-p
brian-mulier-p committed Jan 28, 2025
1 parent 4802dc1 commit 46fb3f4
Show file tree
Hide file tree
Showing 5 changed files with 91 additions and 10 deletions.
2 changes: 1 addition & 1 deletion scripts/generate-palette.mjs
View file
Original file line number Diff line number Diff line change
Expand Up @@ -83,7 +83,7 @@ function makePalettes(palette, paletteName, selector) {
const scss = baseColorNames.map(color => `$base-${color.name.split("/").pop()}: ${color.value};`).join("\n")

// write the scss file containing colors in the base palette
fs.writeFileSync(path.resolve(__dirname, "../src/scss/color-palette.scss"), scss, {encoding: "utf-8"})
fs.writeFileSync(path.resolve(__dirname, "../src/scss/_color-palette.scss"), scss, {encoding: "utf-8"})

const {tokenScss, cssVariableNames} = getVariableScss(palette.filter(c => !c.name.startsWith("base-color-palette/")), colorIndex)

Expand Down
9 changes: 8 additions & 1 deletion src/scss/ks-theme-dark.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ html.dark{
#{--ks-background-body}: $base-gray-800;
#{--ks-background-cancelled}: rgba($base-red-200, 0.2);
#{--ks-background-card}: $base-gray-500;
#{--ks-background-card-hover}: $base-gray-400;
#{--ks-background-card-opacity}: #121319e5;
#{--ks-background-created}: rgba($base-blue-400, 0.2);
#{--ks-background-error}: rgba($base-red-900, 0.2);
Expand Down Expand Up @@ -122,6 +123,11 @@ html.dark{
#{--ks-dialog-headerbtn}: $base-gray-300;
#{--ks-dialog-headerbtn-hover}: $base-purple-200;

/* dropdown */
#{--ks-dropdown-background}: $base-gray-700;
#{--ks-dropdown-background-active}: $base-gray-900;
#{--ks-dropdown-background-hover}: $base-gray-600;

/* editor */
#{--ks-editor-number}: $base-orange-100;
#{--ks-editor-pabble}: $base-orange-50;
Expand Down Expand Up @@ -161,7 +167,8 @@ html.dark{
#{--ks-select-hover}: $base-gray-600;

/* tag */
#{--ks-tag-background}: $base-gray-500;
#{--ks-tag-background}: $base-gray-600;
#{--ks-tag-background-active}: $base-gray-400;
#{--ks-tag-background-hover}: $base-gray-400;
#{--ks-tag-content}: $base-white;

Expand Down
11 changes: 9 additions & 2 deletions src/scss/ks-theme-light.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
#{--ks-background-body}: $base-gray-50;
#{--ks-background-cancelled}: $base-red-100;
#{--ks-background-card}: $base-white;
#{--ks-background-card-hover}: $base-white;
#{--ks-background-card-opacity}: #1b1c23e5;
#{--ks-background-created}: $base-blue-50;
#{--ks-background-error}: $base-red-50;
Expand Down Expand Up @@ -112,7 +113,7 @@
#{--ks-content-secondary}: $base-gray-700;
#{--ks-content-skipped}: $base-gray-500;
#{--ks-content-success}: $base-green-700;
#{--ks-content-tertiary}: $base-gray-500;
#{--ks-content-tertiary}: $base-gray-400;
#{--ks-content-warning}: $base-orange-500;

/* dialog */
Expand All @@ -122,6 +123,11 @@
#{--ks-dialog-headerbtn}: $base-gray-300;
#{--ks-dialog-headerbtn-hover}: $base-purple-300;

/* dropdown */
#{--ks-dropdown-background}: $base-white;
#{--ks-dropdown-background-active}: $base-gray-50;
#{--ks-dropdown-background-hover}: $base-gray-50;

/* editor */
#{--ks-editor-number}: $base-orange-600;
#{--ks-editor-pabble}: $base-orange-400;
Expand Down Expand Up @@ -161,7 +167,8 @@
#{--ks-select-hover}: $base-gray-200;

/* tag */
#{--ks-tag-background}: $base-gray-50;
#{--ks-tag-background}: $base-gray-100;
#{--ks-tag-background-active}: $base-gray-50;
#{--ks-tag-background-hover}: $base-gray-200;
#{--ks-tag-content}: $base-gray-800;

Expand Down
7 changes: 7 additions & 0 deletions storybook/css-variables.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,7 @@
"ks-background-body",
"ks-background-cancelled",
"ks-background-card",
"ks-background-card-hover",
"ks-background-card-opacity",
"ks-background-created",
"ks-background-error",
Expand Down Expand Up @@ -120,6 +121,11 @@
"ks-dialog-headerbtn",
"ks-dialog-headerbtn-hover"
],
"dropdown": [
"ks-dropdown-background",
"ks-dropdown-background-active",
"ks-dropdown-background-hover"
],
"editor": [
"ks-editor-number",
"ks-editor-pabble",
Expand Down Expand Up @@ -160,6 +166,7 @@
],
"tag": [
"ks-tag-background",
"ks-tag-background-active",
"ks-tag-background-hover",
"ks-tag-content"
],
Expand Down
72 changes: 66 additions & 6 deletions storybook/figma.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -464,6 +464,12 @@
"var": "base-color-palette/neutral/white",
"rootAlias": "base-color-palette/neutral/white"
},
{
"name": "ks/background-card-hover",
"value": "#ffffff",
"var": "base-color-palette/neutral/white",
"rootAlias": "base-color-palette/neutral/white"
},
{
"name": "ks/background-card-opacity",
"value": "#1b1c23e5",
Expand Down Expand Up @@ -1048,9 +1054,9 @@
},
{
"name": "ks/content-tertiary",
"value": "#2f3342",
"var": "base-color-palette/neutral/gray-500",
"rootAlias": "base-color-palette/neutral/gray-500"
"value": "#404559",
"var": "base-color-palette/neutral/gray-400",
"rootAlias": "base-color-palette/neutral/gray-400"
},
{
"name": "ks/content-warning",
Expand Down Expand Up @@ -1088,6 +1094,24 @@
"var": "base-color-palette/purple/purple-300",
"rootAlias": "base-color-palette/purple/purple-300"
},
{
"name": "ks/dropdown-background",
"value": "#ffffff",
"var": "base-color-palette/neutral/white",
"rootAlias": "base-color-palette/neutral/white"
},
{
"name": "ks/dropdown-background-active",
"value": "#f9f9fa",
"var": "base-color-palette/neutral/gray-50",
"rootAlias": "base-color-palette/neutral/gray-50"
},
{
"name": "ks/dropdown-background-hover",
"value": "#f9f9fa",
"var": "base-color-palette/neutral/gray-50",
"rootAlias": "base-color-palette/neutral/gray-50"
},
{
"name": "ks/editor-number",
"value": "#c15300",
Expand Down Expand Up @@ -1258,6 +1282,12 @@
},
{
"name": "ks/tag-background",
"value": "#ecebef",
"var": "base-color-palette/neutral/gray-100",
"rootAlias": "base-color-palette/neutral/gray-100"
},
{
"name": "ks/tag-background-active",
"value": "#f9f9fa",
"var": "base-color-palette/neutral/gray-50",
"rootAlias": "base-color-palette/neutral/gray-50"
Expand Down Expand Up @@ -1752,6 +1782,12 @@
"var": "base-color-palette/neutral/gray-500",
"rootAlias": "base-color-palette/neutral/gray-500"
},
{
"name": "ks/background-card-hover",
"value": "#404559",
"var": "base-color-palette/neutral/gray-400",
"rootAlias": "base-color-palette/neutral/gray-400"
},
{
"name": "ks/background-card-opacity",
"value": "#121319e5",
Expand Down Expand Up @@ -2376,6 +2412,24 @@
"var": "base-color-palette/purple/purple-200",
"rootAlias": "base-color-palette/purple/purple-200"
},
{
"name": "ks/dropdown-background",
"value": "#21242e",
"var": "base-color-palette/neutral/gray-700",
"rootAlias": "base-color-palette/neutral/gray-700"
},
{
"name": "ks/dropdown-background-active",
"value": "#1c1e27",
"var": "base-color-palette/neutral/gray-900",
"rootAlias": "base-color-palette/neutral/gray-900"
},
{
"name": "ks/dropdown-background-hover",
"value": "#2c303f",
"var": "base-color-palette/neutral/gray-600",
"rootAlias": "base-color-palette/neutral/gray-600"
},
{
"name": "ks/editor-number",
"value": "#f3c4a1",
Expand Down Expand Up @@ -2546,9 +2600,15 @@
},
{
"name": "ks/tag-background",
"value": "#2f3342",
"var": "base-color-palette/neutral/gray-500",
"rootAlias": "base-color-palette/neutral/gray-500"
"value": "#2c303f",
"var": "base-color-palette/neutral/gray-600",
"rootAlias": "base-color-palette/neutral/gray-600"
},
{
"name": "ks/tag-background-active",
"value": "#404559",
"var": "base-color-palette/neutral/gray-400",
"rootAlias": "base-color-palette/neutral/gray-400"
},
{
"name": "ks/tag-background-hover",
Expand Down

1 comment on commit 46fb3f4

@github-actions
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Storybook published on
https://internal.dev.kestra.io/ui-libs/master/storybook

Please sign in to comment.