0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-06 14:50:20 -05:00

Add theming

This commit is contained in:
Xaviju 2024-05-22 11:46:56 +02:00
parent cd41e86d29
commit 7e5bcee6f7
4 changed files with 142 additions and 0 deletions

View file

@ -0,0 +1,6 @@
import { addons } from "@storybook/manager-api";
import penpotTheme from "./penpot-theme";
addons.setConfig({
theme: penpotTheme,
});

View file

@ -0,0 +1,40 @@
import { create } from "@storybook/theming/create";
export default create({
base: "light",
// Typography
fontBase: '"Open Sans", sans-serif',
fontCode: "monospace",
brandTitle: "My custom Storybook",
brandUrl: "https://example.com",
brandImage: "https://storybook.js.org/images/placeholders/350x150.png",
brandTarget: "_self",
//
colorPrimary: "#3A10E5",
colorSecondary: "#585C6D",
// UI
appBg: "#ffffff",
appContentBg: "#ffffff",
appPreviewBg: "#ffffff",
appBorderColor: "#585C6D",
appBorderRadius: 4,
// Text colors
textColor: "#10162F",
textInverseColor: "#ffffff",
// Toolbar default and active colors
barTextColor: "#9E9E9E",
barSelectedColor: "#585C6D",
barHoverColor: "#585C6D",
barBg: "#ffffff",
// Form colors
inputBg: "#ffffff",
inputBorder: "#10162F",
inputTextColor: "#10162F",
inputBorderRadius: 2,
});

View file

@ -43,9 +43,11 @@
"@storybook/addon-links": "^7.6.17",
"@storybook/addon-onboarding": "^1.0.11",
"@storybook/blocks": "^7.6.17",
"@storybook/manager-api": "^7.6.17",
"@storybook/react": "^7.6.17",
"@storybook/react-vite": "^7.6.17",
"@storybook/testing-library": "^0.2.2",
"@storybook/theming": "^7.6.17",
"@types/node": "^20.11.20",
"animate.css": "^4.1.1",
"autoprefixer": "^10.4.17",

View file

@ -3242,6 +3242,20 @@ __metadata:
languageName: node
linkType: hard
"@storybook/channels@npm:7.6.19":
version: 7.6.19
resolution: "@storybook/channels@npm:7.6.19"
dependencies:
"@storybook/client-logger": "npm:7.6.19"
"@storybook/core-events": "npm:7.6.19"
"@storybook/global": "npm:^5.0.0"
qs: "npm:^6.10.0"
telejson: "npm:^7.2.0"
tiny-invariant: "npm:^1.3.1"
checksum: 7b5e879d15da93aa312f7e3df4055f9c0bf5d5120f82058cca6c878469c1748637509a03e7c31986cadec05ab378c035c4d38d74a4d45c94b5ad9ed77b4c93ee
languageName: node
linkType: hard
"@storybook/channels@npm:7.6.6":
version: 7.6.6
resolution: "@storybook/channels@npm:7.6.6"
@ -3316,6 +3330,15 @@ __metadata:
languageName: node
linkType: hard
"@storybook/client-logger@npm:7.6.19":
version: 7.6.19
resolution: "@storybook/client-logger@npm:7.6.19"
dependencies:
"@storybook/global": "npm:^5.0.0"
checksum: 16b5a6755874f82eec71364223af62c155d29e1bcd3c1061a734dff8b687a6a2e9d09da8866b92a16bf5e8f0717ad8f8a522e5d1cb023a9457ff220cb4819604
languageName: node
linkType: hard
"@storybook/client-logger@npm:7.6.6":
version: 7.6.6
resolution: "@storybook/client-logger@npm:7.6.6"
@ -3449,6 +3472,15 @@ __metadata:
languageName: node
linkType: hard
"@storybook/core-events@npm:7.6.19":
version: 7.6.19
resolution: "@storybook/core-events@npm:7.6.19"
dependencies:
ts-dedent: "npm:^2.0.0"
checksum: 9cb367fe024797f7673b308f0b1dac0043b91d3bca77cc2c55589c0234faaa91f3e886efba7b077a1b8c2f2e48d7269f8c40ac7246a679b03123c4015e3e3f60
languageName: node
linkType: hard
"@storybook/core-events@npm:7.6.6":
version: 7.6.6
resolution: "@storybook/core-events@npm:7.6.6"
@ -3611,6 +3643,28 @@ __metadata:
languageName: node
linkType: hard
"@storybook/manager-api@npm:^7.6.17":
version: 7.6.19
resolution: "@storybook/manager-api@npm:7.6.19"
dependencies:
"@storybook/channels": "npm:7.6.19"
"@storybook/client-logger": "npm:7.6.19"
"@storybook/core-events": "npm:7.6.19"
"@storybook/csf": "npm:^0.1.2"
"@storybook/global": "npm:^5.0.0"
"@storybook/router": "npm:7.6.19"
"@storybook/theming": "npm:7.6.19"
"@storybook/types": "npm:7.6.19"
dequal: "npm:^2.0.2"
lodash: "npm:^4.17.21"
memoizerific: "npm:^1.11.3"
store2: "npm:^2.14.2"
telejson: "npm:^7.2.0"
ts-dedent: "npm:^2.0.0"
checksum: e1f48864bcd17615c56e5589ffff55193c7667605f7ec348e08d829ceaea70987e0e1cb38e46f112cf0e49b067581c892e88447f465403eefde22cab200af3d2
languageName: node
linkType: hard
"@storybook/manager@npm:7.6.17":
version: 7.6.17
resolution: "@storybook/manager@npm:7.6.17"
@ -3751,6 +3805,17 @@ __metadata:
languageName: node
linkType: hard
"@storybook/router@npm:7.6.19":
version: 7.6.19
resolution: "@storybook/router@npm:7.6.19"
dependencies:
"@storybook/client-logger": "npm:7.6.19"
memoizerific: "npm:^1.11.3"
qs: "npm:^6.10.0"
checksum: d20ce5d9d40dcac4d473cec1215be9b8eadfc94bcd9ffa4522db9de8e9351497be35892a6e1bc1c9d02acd5423e4a05622a44500b9dcbb9619adfdca1b04c1e1
languageName: node
linkType: hard
"@storybook/telemetry@npm:7.6.17":
version: 7.6.17
resolution: "@storybook/telemetry@npm:7.6.17"
@ -3809,6 +3874,21 @@ __metadata:
languageName: node
linkType: hard
"@storybook/theming@npm:7.6.19, @storybook/theming@npm:^7.6.17":
version: 7.6.19
resolution: "@storybook/theming@npm:7.6.19"
dependencies:
"@emotion/use-insertion-effect-with-fallbacks": "npm:^1.0.0"
"@storybook/client-logger": "npm:7.6.19"
"@storybook/global": "npm:^5.0.0"
memoizerific: "npm:^1.11.3"
peerDependencies:
react: ^16.8.0 || ^17.0.0 || ^18.0.0
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
checksum: 41f02bf38d2842ed77691bf645f818d8f4560655b95922a871f5f633a7bbec66d7ddf4ed98c48fec13460e8773ba6c400b860981de612e872e0ef0257eeb9f94
languageName: node
linkType: hard
"@storybook/types@npm:7.6.17":
version: 7.6.17
resolution: "@storybook/types@npm:7.6.17"
@ -3821,6 +3901,18 @@ __metadata:
languageName: node
linkType: hard
"@storybook/types@npm:7.6.19":
version: 7.6.19
resolution: "@storybook/types@npm:7.6.19"
dependencies:
"@storybook/channels": "npm:7.6.19"
"@types/babel__core": "npm:^7.0.0"
"@types/express": "npm:^4.7.0"
file-system-cache: "npm:2.3.0"
checksum: 6df3b74b0164c44e7edf2eb77458daac90b4facdd739bbec09498e88dfa6d29bf61cff9d937b7c27145f8e7029bc50a28d306c66ebafc868ad042bf73ff4aaf9
languageName: node
linkType: hard
"@storybook/types@npm:7.6.6":
version: 7.6.6
resolution: "@storybook/types@npm:7.6.6"
@ -8008,9 +8100,11 @@ __metadata:
"@storybook/addon-links": "npm:^7.6.17"
"@storybook/addon-onboarding": "npm:^1.0.11"
"@storybook/blocks": "npm:^7.6.17"
"@storybook/manager-api": "npm:^7.6.17"
"@storybook/react": "npm:^7.6.17"
"@storybook/react-vite": "npm:^7.6.17"
"@storybook/testing-library": "npm:^0.2.2"
"@storybook/theming": "npm:^7.6.17"
"@types/node": "npm:^20.11.20"
animate.css: "npm:^4.1.1"
autoprefixer: "npm:^10.4.17"