Skip to content

Commit

Permalink
feat(theme): add CSS and json for v4
Browse files Browse the repository at this point in the history
  • Loading branch information
@mimokmt
mimokmt committed Jun 17, 2024
1 parent de4162c commit 806c028
Show file tree
Hide file tree
Showing 7 changed files with 2,092 additions and 35 deletions.
2 changes: 2 additions & 0 deletions packages/theme/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,15 @@
"build": "npm-run-all --print-label --parallel 'build:*' --sequential serialize",
"build:bundle": "FORCE_COLOR=1 tsup",
"build:dts": "tsc --project tsconfig.build.json --pretty --emitDeclarationOnly",
"build:copy-css": "cpx 'src/css/**/*.css' dist/css && cpx 'src/json/**/*.json' dist/json",
"serialize": "node cli/index.js",
"typecheck": "run-p --print-label 'typecheck:*'",
"typecheck:main": "tsc --project tsconfig.build.json --pretty --noEmit",
"typecheck:cli": "tsc --project cli/tsconfig.build.json --noEmit",
"clean": "rimraf dist .tsbuildinfo"
},
"devDependencies": {
"cpx": "^1.5.0",
"npm-run-all": "^4.1.5",
"rimraf": "^3.0.2",
"tsup": "^6.5.0",
Expand Down
481 changes: 481 additions & 0 deletions packages/theme/src/css/_variables_dark.css
View file

Large diffs are not rendered by default.

481 changes: 481 additions & 0 deletions packages/theme/src/css/_variables_light.css
View file

Large diffs are not rendered by default.

326 changes: 326 additions & 0 deletions packages/theme/src/json/base.json
View file

Large diffs are not rendered by default.

164 changes: 164 additions & 0 deletions packages/theme/src/json/pixiv-dark.json
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,164 @@
{
"Space": {
"target size/target-size-compact": { "value": "24" },
"target size/target-size-default": { "value": "32" },
"target size/target-size-cozy": { "value": "48" },
"component/component-0": { "value": "{Spacings.space0}" },
"component/component-1": { "value": "{Spacings.space1}" },
"component/component-10": { "value": "{Spacings.space10}" },
"component/component-15": { "value": "{Spacings.space15}" },
"component/component-20": { "value": "{Spacings.space20}" },
"component/component-25": { "value": "{Spacings.space25}" },
"component/component-30": { "value": "{Spacings.space30}" },
"component/component-35": { "value": "{Spacings.space35}" },
"component/component-40": { "value": "{Spacings.space40}" },
"component/component-43": { "value": "{Spacings.space43}" },
"component/component-46": { "value": "{Spacings.space46}" },
"component/component-50": { "value": "{Spacings.space50}" },
"component/component-55": { "value": "{Spacings.space55}" },
"component/component-60": { "value": "{Spacings.space60}" },
"component/component-63": { "value": "{Spacings.space63}" },
"component/component-66": { "value": "{Spacings.space66}" },
"layout/layout-0": { "value": "{Spacings.space0}" },
"layout/layout-10": { "value": "{Spacings.space10}" },
"layout/layout-20": { "value": "{Spacings.space20}" },
"layout/layout-30": { "value": "{Spacings.space30}" },
"layout/layout-40": { "value": "{Spacings.space40}" },
"layout/layout-50": { "value": "{Spacings.space50}" },
"layout/layout-60": { "value": "{Spacings.space60}" },
"layout/layout-70": { "value": "{Spacings.space70}" },
"layout/layout-80": { "value": "{Spacings.space80}" },
"layout/layout-90": { "value": "{Spacings.space90}" },
"layout/layout-100": { "value": "{Spacings.space100}" }
},
"Color": {
"pixiv/dark": {
"background/default": { "value": "{Colors.Dark/Neutral/0}" },
"background/secondary": { "value": "{Colors.Dark/Neutral/-5}" },
"background/tertiary": { "value": "{Colors.Dark/Neutral/-10}" },
"container/default": { "value": "{Colors.Dark/Neutral/0}" },
"container/hover": { "value": "{Colors.Dark/Neutral/5}" },
"container/press": { "value": "{Colors.Dark/Neutral/10}" },
"container/disable": { "value": "{Colors.Dark/Neutral/10}" },
"container/secondary/default": { "value": "{Colors.Dark/Neutral/5}" },
"container/tertiary/default": { "value": "{Colors.Dark/Neutral/10}" },
"container/tertiary/hover": { "value": "{Colors.Dark/Neutral/20}" },
"container/tertiary/press": { "value": "{Colors.Dark/Neutral/30}" },
"container/tertiary/defaultA": { "value": "{Colors.Dark/NeutralA/10}" },
"container/tertiary/hoverA": { "value": "{Colors.Dark/NeutralA/20}" },
"container/tertiary/pressA": { "value": "{Colors.Dark/NeutralA/30}" },
"container/primary/default": { "value": "{Colors.Dark/Blue/30}" },
"container/primary/hover": { "value": "{Colors.Dark/Blue/40}" },
"container/primary/press": { "value": "{Colors.Dark/Blue/50}" },
"container/secondary/hover": { "value": "{Colors.Dark/Neutral/10}" },
"container/secondary/press": { "value": "{Colors.Dark/Neutral/20}" },
"container/secondary/defaultA": { "value": "{Colors.Dark/NeutralA/5}" },
"container/secondary/hoverA": { "value": "{Colors.Dark/NeutralA/10}" },
"container/secondary/pressA": { "value": "{Colors.Dark/NeutralA/20}" },
"container/on-img/default": { "value": "{Colors.Light/NeutralA/40}" },
"container/on-img/hover": { "value": "{Colors.Light/NeutralA/50}" },
"container/on-img/press": { "value": "{Colors.Light/NeutralA/60}" },
"container/negative/default": { "value": "{Colors.Dark/Red/30}" },
"container/negative/hover": { "value": "{Colors.Dark/Red/40}" },
"container/negative/press": { "value": "{Colors.Dark/Red/50}" },
"container/positive/default": { "value": "{Colors.Dark/Green/30}" },
"container/positive/hover": { "value": "{Colors.Dark/Green/40}" },
"container/positive/press": { "value": "{Colors.Dark/Green/50}" },
"container/notice/default": { "value": "{Colors.Dark/Yellow/70}" },
"container/notice/hover": { "value": "{Colors.Dark/Yellow/80}" },
"container/notice/press": { "value": "{Colors.Dark/Yellow/90}" },
"container/neutral/default": { "value": "{Colors.Dark/Neutral/30}" },
"container/discovery/default": { "value": "{Colors.Dark/Red/30}" },
"container/discovery/hover": { "value": "{Colors.Dark/Red/40}" },
"container/discovery/press": { "value": "{Colors.Dark/Red/50}" },
"container/neutral/hover": { "value": "{Colors.Dark/Neutral/40}" },
"container/neutral/press": { "value": "{Colors.Dark/Neutral/50}" },
"container/HUD/default": { "value": "{Colors.Light/Neutral/10}" },
"container/HUD/hover": { "value": "{Colors.Light/Neutral/20}" },
"container/HUD/press": { "value": "{Colors.Light/Neutral/20}" },
"container/skeleton": { "value": "{Colors.Dark/NeutralA/5}" },
"container/subtle": { "value": "rgba(228, 228, 228, 0.02)" },
"icon/secondary/default": { "value": "{Color.text/secondary/default}" },
"icon/tertiary/default": { "value": "{Color.text/tertiary/default}" },
"icon/tertiary/hover": { "value": "{Color.text/tertiary/hover}" },
"icon/tertiary/press": { "value": "{Color.text/tertiary/press}" },
"icon/secondary/hover": { "value": "{Color.text/secondary/hover}" },
"icon/secondary/press": { "value": "{Color.text/secondary/press}" },
"text/default": { "value": "{Colors.Dark/Neutral/90}" },
"text/hover": { "value": "{Colors.Dark/Neutral/80}" },
"text/press": { "value": "{Colors.Dark/Neutral/70}" },
"text/disable": { "value": "{Colors.Dark/Neutral/40}" },
"text/secondary/default": { "value": "{Colors.Dark/Neutral/60}" },
"text/secondary/hover": { "value": "{Colors.Dark/Neutral/70}" },
"text/secondary/press": { "value": "{Colors.Dark/Neutral/80}" },
"text/tertiary/default": { "value": "{Colors.Dark/Neutral/40}" },
"text/tertiary/hover": { "value": "{Colors.Dark/Neutral/60}" },
"text/tertiary/press": { "value": "{Colors.Dark/Neutral/70}" },
"text/placeholder/default": { "value": "{Colors.Dark/Neutral/30}" },
"text/placeholder/hover": { "value": "{Colors.Dark/Neutral/40}" },
"text/placeholder/press": { "value": "{Colors.Dark/Neutral/50}" },
"text/negative/default": { "value": "{Colors.Dark/Red/60}" },
"text/negative/hover": { "value": "{Colors.Dark/Red/80}" },
"text/negative/press": { "value": "{Colors.Dark/Red/90}" },
"text/positive/default": { "value": "{Colors.Dark/Green/60}" },
"text/positive/hover": { "value": "{Colors.Dark/Green/80}" },
"text/positive/press": { "value": "{Colors.Dark/Green/90}" },
"text/notice/default": { "value": "{Colors.Dark/Yellow/60}" },
"text/notice/hover": { "value": "{Colors.Dark/Yellow/80}" },
"text/notice/press": { "value": "{Colors.Dark/Yellow/90}" },
"text/info/default": { "value": "{Colors.Dark/Blue/60}" },
"text/info/hover": { "value": "{Colors.Dark/Blue/80}" },
"text/info/press": { "value": "{Colors.Dark/Blue/90}" },
"text/visited/default": { "value": "{Colors.Dark/Purple/60}" },
"text/visited/hover": { "value": "{Colors.Dark/Purple/80}" },
"text/visited/press": { "value": "{Colors.Dark/Purple/90}" },
"text/on-primary/default": { "value": "{Colors.Dark/Neutral/90}" },
"text/on-on-img/default": { "value": "{Colors.Dark/Neutral/90}" },
"text/on-on-img/hover": { "value": "{Colors.Dark/Neutral/90}" },
"text/on-on-img/press": { "value": "{Colors.Dark/Neutral/90}" },
"text/on-primary/hover": { "value": "{Colors.Dark/Neutral/90}" },
"text/on-primary/press": { "value": "{Colors.Dark/Neutral/90}" },
"text/on-negative/default": { "value": "{Colors.Dark/Neutral/90}" },
"text/on-negative/hover": { "value": "{Colors.Dark/Neutral/90}" },
"text/on-negative/press": { "value": "{Colors.Dark/Neutral/90}" },
"text/on-positive/default": { "value": "{Colors.Dark/Neutral/90}" },
"text/on-positive/hover": { "value": "{Colors.Dark/Neutral/90}" },
"text/on-positive/press": { "value": "{Colors.Dark/Neutral/90}" },
"text/on-notice/default": { "value": "{Colors.Dark/Neutral/5}" },
"text/on-notice/hover": { "value": "{Colors.Dark/Neutral/5}" },
"text/on-notice/press": { "value": "{Colors.Dark/Neutral/5}" },
"text/on-discovery/default": { "value": "{Colors.Dark/Neutral/90}" },
"text/on-discovery/hover": { "value": "{Colors.Dark/Neutral/90}" },
"text/on-discovery/press": { "value": "{Colors.Dark/Neutral/90}" },
"text/on-HUD/default": { "value": "{Colors.Light/Neutral/90}" },
"text/on-HUD/hover": { "value": "{Colors.Light/Neutral/90}" },
"text/on-HUD/press": { "value": "{Colors.Light/Neutral/90}" },
"text/brand-premium/default": { "value": "{Brand color.premium}" },
"text/brand-premium/hover": { "value": "rgba(243, 152, 21, 1)" },
"text/brand-premium/press": { "value": "rgba(213, 133, 18, 1)" },
"icon/default": { "value": "{Color.text/default}" },
"icon/hover": { "value": "{Color.text/hover}" },
"icon/press": { "value": "{Color.text/press}" },
"icon/disable": { "value": "{Color.text/disable}" },
"icon/on-primary/default": { "value": "{Color.text/on-primary/default}" },
"icon/on-primary/hover": { "value": "{Color.text/on-primary/hover}" },
"icon/on-primary/press": { "value": "{Color.text/on-primary/press}" },
"icon/on-neutral/default": { "value": "{Colors.Dark/Neutral/90}" },
"icon/on-neutral/hover": { "value": "{Colors.Dark/Neutral/90}" },
"icon/on-neutral/press": { "value": "{Colors.Dark/Neutral/90}" },
"line/default": { "value": "{Colors.Dark/Neutral/30}" },
"line/secondary": { "value": "{Colors.Dark/NeutralA/10}" },
"line/disable": { "value": "{Colors.Dark/NeutralA/5}" },
"line/focus": { "value": "{Colors.Dark/Blue/20}" },
"line/negative": { "value": "{Colors.Dark/Red/20}" }
}
},
"Border radius": {
"4": { "value": "{Spacings.space10}" },
"8": { "value": "{Spacings.space20}" },
"16": { "value": "{Spacings.space30}" },
"24": { "value": "{Spacings.space40}" },
"none": { "value": "{Spacings.space0}" },
"oval": { "value": "{Spacings.space999}" }
}
}
Loading

0 comments on commit 806c028

Please sign in to comment.