From c438ea75d1df159ceec35ee1b8d016fb818a10ed Mon Sep 17 00:00:00 2001 From: Scott Nath Date: Wed, 13 Sep 2023 21:20:39 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=80=20gh-pages,=20pkg=20files,=20npm?= =?UTF-8?q?=20provenance=20(#4)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .storybook/primer-preview.js | 9 +++---- README.md | 10 ++------ package-lock.json | 16 ++++++------- package.json | 20 +++++++++++++--- src/github/README.md | 7 +++--- .../repo--freeCodeCamp-freeCodeCamp.json | 24 +++++++++---------- .../repo--scottnath-profile-components.json | 20 ++++++++-------- .../repo--scottnath-scottnath.com.json | 4 ++-- .../repo--storydocker-storydocker.json | 4 ++-- .../fixtures/generated/user--scottnath.json | 6 ++--- .../generated/user--sindresorhus.json | 4 ++-- src/github/styles/vars-primer.css | 19 ++++++++------- src/github/utils/primer.js | 8 ++++--- src/utils/index.js | 1 - 14 files changed, 82 insertions(+), 70 deletions(-) diff --git a/.storybook/primer-preview.js b/.storybook/primer-preview.js index 124ece7..fcdcee5 100644 --- a/.storybook/primer-preview.js +++ b/.storybook/primer-preview.js @@ -22,7 +22,7 @@ export const globalTypesPrimer = { defaultValue: 'light', toolbar: { icon: 'contrast', - items: [...primerThemes, {value: 'all', left: '', title: 'All'}], + items: [{value: '', left: '', title: 'None'}, ...primerThemes], showName: true, dynamicTitle: true, }, @@ -32,14 +32,15 @@ export const globalTypesPrimer = { export const decoratorsPrimer = [ (Story, context) => { - document.body.setAttribute('data-color-mode', context.globals.theme.startsWith('light') ? 'light' : 'dark') + const theme = context.globals.theme; + document.body.setAttribute('data-color-mode', !theme ? '' : theme.startsWith('light') ? 'light' : 'dark') document.body.setAttribute( 'data-light-theme', - context.globals.theme.startsWith('light') ? context.globals.theme : undefined, + context.globals.theme.startsWith('light') ? theme : undefined, ) document.body.setAttribute( 'data-dark-theme', - context.globals.theme.startsWith('dark') ? context.globals.theme : undefined, + context.globals.theme.startsWith('dark') ? theme : undefined, ) return Story(); }, diff --git a/README.md b/README.md index 309d54a..7950d7b 100644 --- a/README.md +++ b/README.md @@ -4,11 +4,5 @@ Web components which display profile information from various websites ## @todo -- [ ] get releases to npm working -- [ ] how to unpkg? -- [ ] deploy to chromatic -- [ ] chromatic VRT -- [ ] get esbuild making separate bundles for each component -- [ ] stackblitz? webcomponents.dev? -- [ ] put docs in storybook - +- [ ] docs for unpkg usage +- [ ] add stackblitz demo diff --git a/package-lock.json b/package-lock.json index 17bf15a..d962e9a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,9 +11,9 @@ "devDependencies": { "@custom-elements-manifest/analyzer": "^0.8.4", "@custom-elements-manifest/to-markdown": "^0.1.0", - "@primer/css": "^21.0.8", + "@primer/css": "^21.0.9", "@primer/octicons": "^19.7.0", - "@primer/primitives": "^7.12.0", + "@primer/primitives": "^7.13.0", "commander": "^11.0.0", "esbuild": "^0.19.2", "esbuild-plugin-inline-import": "^1.0.1", @@ -5447,9 +5447,9 @@ "dev": true }, "node_modules/@primer/css": { - "version": "21.0.8", - "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.0.8.tgz", - "integrity": "sha512-nyJnLwNvqZKN9t2ho0ccTKV5Z9QOQayZT+lycWCwkPmNOyMfGlod8mLFHLYd80Ea7H5784QeOl2+3gh710Yt/g==", + "version": "21.0.9", + "resolved": "https://registry.npmjs.org/@primer/css/-/css-21.0.9.tgz", + "integrity": "sha512-kk0TfLqtGwGYJ/qXGLMXDIL4d3qWPjlEB12Hvk08krulbsQRWEsnXjejBIvJG69GyOOuYxXNoHvP2NGenxQ8Jw==", "dev": true, "dependencies": { "@primer/primitives": "^7.12.0", @@ -5469,9 +5469,9 @@ } }, "node_modules/@primer/primitives": { - "version": "7.12.0", - "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.12.0.tgz", - "integrity": "sha512-QKNxfWm7Ik1Ulswyp3KeUL2xnQj8i0E7DdB6lOrh29o7LgyuutwcOHi4CGapBIOR1fYURu+yROSTHQ2C2aDK7A==", + "version": "7.13.0", + "resolved": "https://registry.npmjs.org/@primer/primitives/-/primitives-7.13.0.tgz", + "integrity": "sha512-pO1o0rdgatVOcUosuiQIni0ur7qLS954QjwmnIz1cXWxZhVLbhjK4eY/DUL2zmvbohLTXTE+6dC6ksLafckPvg==", "dev": true }, "node_modules/@primer/view-components": { diff --git a/package.json b/package.json index bcfdcd7..945bbb4 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,8 @@ { "name": "profile-components", "author": "scottnath", + "description": "A collection of web components for displaying profile information from various websites.", + "homepage": "https://scottnath.github.io/profile-components", "scripts": { "cem": "custom-elements-manifest analyze --config 'lib/custom-elements-manifest.config.js'", "storybook": "storybook dev -p 6006", @@ -9,7 +11,10 @@ "predist": "npm run cem && npm run build-storybook", "dist": "node lib/esbuild.config.js", "prerelease": "npm run dist", - "release": "semantic-release --debug=true" + "release": "semantic-release --debug=true", + "generate:primer": "node lib/cli.js generate-vars-primer", + "generate:fixtures": "node lib/cli.js generate-fixtures-github", + "generate": "npm run generate:primer && npm run generate:fixtures && npm run cem" }, "type": "module", "version": "0.0.0", @@ -23,17 +28,26 @@ "files": [ "dist", "lib", + "src", "custom-elements.json", "README.md", "LICENSE" ], + "exports": { + "./*.js": { + "import": "./dist/*.js" + }, + "./utils/github/*.js" : { + "import": "./src/github/utils/*.js" + } + }, "license": "MIT", "devDependencies": { "@custom-elements-manifest/analyzer": "^0.8.4", "@custom-elements-manifest/to-markdown": "^0.1.0", - "@primer/css": "^21.0.8", + "@primer/css": "^21.0.9", "@primer/octicons": "^19.7.0", - "@primer/primitives": "^7.12.0", + "@primer/primitives": "^7.13.0", "commander": "^11.0.0", "esbuild": "^0.19.2", "esbuild-plugin-inline-import": "^1.0.1", diff --git a/src/github/README.md b/src/github/README.md index d835e6c..f177e84 100644 --- a/src/github/README.md +++ b/src/github/README.md @@ -7,15 +7,16 @@ Includes two web components: ## User -### @todo +### Usage -- [ ] container queries +```html + +``` ## Repository ### @todo -- [ ] container queries - [ ] repo language colors - need to expand on the `getCircle` function to include the top X languages on GH - need a way to expand the available colors diff --git a/src/github/fixtures/generated/repo--freeCodeCamp-freeCodeCamp.json b/src/github/fixtures/generated/repo--freeCodeCamp-freeCodeCamp.json index 3622a4c..220fbd8 100644 --- a/src/github/fixtures/generated/repo--freeCodeCamp-freeCodeCamp.json +++ b/src/github/fixtures/generated/repo--freeCodeCamp-freeCodeCamp.json @@ -65,16 +65,16 @@ "releases_url": "https://api.github.com/repos/freeCodeCamp/freeCodeCamp/releases{/id}", "deployments_url": "https://api.github.com/repos/freeCodeCamp/freeCodeCamp/deployments", "created_at": "2014-12-24T17:49:19Z", - "updated_at": "2023-09-05T17:40:45Z", - "pushed_at": "2023-09-05T16:21:09Z", + "updated_at": "2023-09-13T23:27:20Z", + "pushed_at": "2023-09-13T16:20:11Z", "git_url": "git://github.com/freeCodeCamp/freeCodeCamp.git", "ssh_url": "git@github.com:freeCodeCamp/freeCodeCamp.git", "clone_url": "https://github.com/freeCodeCamp/freeCodeCamp.git", "svn_url": "https://github.com/freeCodeCamp/freeCodeCamp", "homepage": "http://contribute.freecodecamp.org/", - "size": 387341, - "stargazers_count": 372799, - "watchers_count": 372799, + "size": 387674, + "stargazers_count": 373581, + "watchers_count": 373581, "language": "TypeScript", "has_issues": true, "has_projects": true, @@ -82,11 +82,11 @@ "has_wiki": false, "has_pages": true, "has_discussions": false, - "forks_count": 33412, + "forks_count": 33500, "mirror_url": null, "archived": false, "disabled": false, - "open_issues_count": 262, + "open_issues_count": 251, "license": { "key": "bsd-3-clause", "name": "BSD 3-Clause \"New\" or \"Revised\" License", @@ -116,9 +116,9 @@ "teachers" ], "visibility": "public", - "forks": 33412, - "open_issues": 262, - "watchers": 372799, + "forks": 33500, + "open_issues": 251, + "watchers": 373581, "default_branch": "main", "temp_clone_token": null, "organization": { @@ -141,6 +141,6 @@ "type": "Organization", "site_admin": false }, - "network_count": 33412, - "subscribers_count": 8459 + "network_count": 33500, + "subscribers_count": 8467 } \ No newline at end of file diff --git a/src/github/fixtures/generated/repo--scottnath-profile-components.json b/src/github/fixtures/generated/repo--scottnath-profile-components.json index da267aa..7e745fd 100644 --- a/src/github/fixtures/generated/repo--scottnath-profile-components.json +++ b/src/github/fixtures/generated/repo--scottnath-profile-components.json @@ -65,22 +65,22 @@ "releases_url": "https://api.github.com/repos/scottnath/profile-components/releases{/id}", "deployments_url": "https://api.github.com/repos/scottnath/profile-components/deployments", "created_at": "2023-08-16T13:36:29Z", - "updated_at": "2023-08-16T13:36:29Z", - "pushed_at": "2023-08-16T13:36:29Z", + "updated_at": "2023-09-13T20:08:49Z", + "pushed_at": "2023-09-13T20:23:53Z", "git_url": "git://github.com/scottnath/profile-components.git", "ssh_url": "git@github.com:scottnath/profile-components.git", "clone_url": "https://github.com/scottnath/profile-components.git", "svn_url": "https://github.com/scottnath/profile-components", "homepage": null, - "size": 2, - "stargazers_count": 0, - "watchers_count": 0, - "language": null, + "size": 4329, + "stargazers_count": 1, + "watchers_count": 1, + "language": "JavaScript", "has_issues": true, - "has_projects": true, + "has_projects": false, "has_downloads": true, - "has_wiki": true, - "has_pages": false, + "has_wiki": false, + "has_pages": true, "has_discussions": false, "forks_count": 0, "mirror_url": null, @@ -101,7 +101,7 @@ "visibility": "public", "forks": 0, "open_issues": 0, - "watchers": 0, + "watchers": 1, "default_branch": "main", "temp_clone_token": null, "network_count": 0, diff --git a/src/github/fixtures/generated/repo--scottnath-scottnath.com.json b/src/github/fixtures/generated/repo--scottnath-scottnath.com.json index f0d2b90..e8f1413 100644 --- a/src/github/fixtures/generated/repo--scottnath-scottnath.com.json +++ b/src/github/fixtures/generated/repo--scottnath-scottnath.com.json @@ -66,13 +66,13 @@ "deployments_url": "https://api.github.com/repos/scottnath/scottnath.com/deployments", "created_at": "2023-07-03T16:45:49Z", "updated_at": "2023-08-16T20:18:19Z", - "pushed_at": "2023-09-04T20:12:01Z", + "pushed_at": "2023-09-12T19:33:37Z", "git_url": "git://github.com/scottnath/scottnath.com.git", "ssh_url": "git@github.com:scottnath/scottnath.com.git", "clone_url": "https://github.com/scottnath/scottnath.com.git", "svn_url": "https://github.com/scottnath/scottnath.com", "homepage": "https://scottnath.com", - "size": 3052, + "size": 3093, "stargazers_count": 0, "watchers_count": 0, "language": "HTML", diff --git a/src/github/fixtures/generated/repo--storydocker-storydocker.json b/src/github/fixtures/generated/repo--storydocker-storydocker.json index 4752f63..49d902f 100644 --- a/src/github/fixtures/generated/repo--storydocker-storydocker.json +++ b/src/github/fixtures/generated/repo--storydocker-storydocker.json @@ -66,13 +66,13 @@ "deployments_url": "https://api.github.com/repos/storydocker/storydocker/deployments", "created_at": "2023-04-03T12:11:02Z", "updated_at": "2023-08-16T20:18:32Z", - "pushed_at": "2023-09-05T16:44:30Z", + "pushed_at": "2023-09-12T10:26:37Z", "git_url": "git://github.com/storydocker/storydocker.git", "ssh_url": "git@github.com:storydocker/storydocker.git", "clone_url": "https://github.com/storydocker/storydocker.git", "svn_url": "https://github.com/storydocker/storydocker", "homepage": "", - "size": 2233, + "size": 1599, "stargazers_count": 1, "watchers_count": 1, "language": "JavaScript", diff --git a/src/github/fixtures/generated/user--scottnath.json b/src/github/fixtures/generated/user--scottnath.json index ebcac14..19f5232 100644 --- a/src/github/fixtures/generated/user--scottnath.json +++ b/src/github/fixtures/generated/user--scottnath.json @@ -23,12 +23,12 @@ "location": "New York", "email": null, "hireable": true, - "bio": "Front-end UI DevOps architect. Efficiency in all things and productivity will follow.", + "bio": "Front-end UI DevOps architect. Efficiency in all things and productivity will follow. former IBM, NBCUniversal", "twitter_username": null, - "public_repos": 126, + "public_repos": 130, "public_gists": 24, "followers": 10, "following": 12, "created_at": "2010-03-06T01:59:25Z", - "updated_at": "2023-08-16T17:52:26Z" + "updated_at": "2023-09-05T23:33:42Z" } \ No newline at end of file diff --git a/src/github/fixtures/generated/user--sindresorhus.json b/src/github/fixtures/generated/user--sindresorhus.json index 3bb1e2f..c511daf 100644 --- a/src/github/fixtures/generated/user--sindresorhus.json +++ b/src/github/fixtures/generated/user--sindresorhus.json @@ -27,8 +27,8 @@ "twitter_username": "sindresorhus", "public_repos": 1071, "public_gists": 96, - "followers": 57872, + "followers": 58014, "following": 53, "created_at": "2009-12-20T22:57:02Z", - "updated_at": "2023-09-03T12:15:39Z" + "updated_at": "2023-09-12T05:57:55Z" } \ No newline at end of file diff --git a/src/github/styles/vars-primer.css b/src/github/styles/vars-primer.css index 7be5c52..08156af 100644 --- a/src/github/styles/vars-primer.css +++ b/src/github/styles/vars-primer.css @@ -3,12 +3,13 @@ /* Global primer styles */ :host { --fontStack-system: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; --base-text-weight-light: 300; --base-text-weight-normal: 400; --base-text-weight-medium: 500; --base-text-weight-semibold: 600; --borderWidth-thin: max(1px, 0.0625rem); --borderWidth-thick: max(2px, 0.125rem); --borderRadius-small: 3px; --borderRadius-medium: 6px;} -/* Light THEME */:host-context([data-color-mode="light"][data-light-theme="light"]) { --color-avatar-border: rgba(31,35,40,0.15); --color-border-default: #d0d7de; --color-canvas-default: #ffffff; --color-canvas-subtle: #f6f8fa; --color-fg-default: #1F2328; --color-fg-muted: #656d76; --color-fg-subtle: #6e7781; --color-fg-onemphasis: #ffffff; --color-fg-accent: #0969da; --color-fg-danger: #d1242f;} -/* Light Protanopia & Deuteranopia THEME */:host-context([data-color-mode="light"][data-light-theme="light_colorblind"]) { --color-avatar-border: rgba(27,31,36,0.15); --color-border-default: #d0d7de; --color-canvas-default: #ffffff; --color-canvas-subtle: #f6f8fa; --color-fg-default: #24292f; --color-fg-muted: #57606a; --color-fg-subtle: #6e7781; --color-fg-onemphasis: #ffffff; --color-fg-accent: #0969da; --color-fg-danger: #b35900;} -/* Light Tritanopia THEME */:host-context([data-color-mode="light"][data-light-theme="light_tritanopia"]) { --color-avatar-border: rgba(27,31,36,0.15); --color-border-default: #d0d7de; --color-canvas-default: #ffffff; --color-canvas-subtle: #f6f8fa; --color-fg-default: #24292f; --color-fg-muted: #57606a; --color-fg-subtle: #6e7781; --color-fg-onemphasis: #ffffff; --color-fg-accent: #0969da; --color-fg-danger: #cf222e;} -/* Light High Contrast THEME */:host-context([data-color-mode="light"][data-light-theme="light_high_contrast"]) { --color-avatar-border: rgba(1,4,9,0.8); --color-border-default: #20252c; --color-canvas-default: #ffffff; --color-canvas-subtle: #e7ecf0; --color-fg-default: #0e1116; --color-fg-muted: #0e1116; --color-fg-subtle: #66707b; --color-fg-onemphasis: #ffffff; --color-fg-accent: #0349b4; --color-fg-danger: #d1242f;} -/* Dark THEME */:host-context([data-color-mode="dark"][data-dark-theme="dark"]) { --color-avatar-border: rgba(240,246,252,0.1); --color-border-default: #30363d; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-fg-default: #e6edf3; --color-fg-muted: #7d8590; --color-fg-subtle: #6e7681; --color-fg-onemphasis: #ffffff; --color-fg-accent: #2f81f7; --color-fg-danger: #f85149;} -/* Dark Dimmed THEME */:host-context([data-color-mode="dark"][data-dark-theme="dark_dimmed"]) { --color-avatar-border: rgba(205,217,229,0.1); --color-border-default: #444c56; --color-canvas-default: #22272e; --color-canvas-subtle: #2d333b; --color-fg-default: #adbac7; --color-fg-muted: #768390; --color-fg-subtle: #636e7b; --color-fg-onemphasis: #cdd9e5; --color-fg-accent: #539bf5; --color-fg-danger: #e5534b;} -/* Dark Protanopia & Deuteranopia THEME */:host-context([data-color-mode="dark"][data-dark-theme="dark_colorblind"]) { --color-avatar-border: rgba(240,246,252,0.1); --color-border-default: #30363d; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-fg-default: #c9d1d9; --color-fg-muted: #8b949e; --color-fg-subtle: #6e7681; --color-fg-onemphasis: #ffffff; --color-fg-accent: #58a6ff; --color-fg-danger: #d47616;} -/* Dark Tritanopia THEME */:host-context([data-color-mode="dark"][data-dark-theme="dark_tritanopia"]) { --color-avatar-border: rgba(240,246,252,0.1); --color-border-default: #30363d; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-fg-default: #c9d1d9; --color-fg-muted: #8b949e; --color-fg-subtle: #6e7681; --color-fg-onemphasis: #ffffff; --color-fg-accent: #58a6ff; --color-fg-danger: #f85149;} -/* Dark High Contrast THEME */:host-context([data-color-mode="dark"][data-dark-theme="dark_high_contrast"]) { --color-avatar-border: rgba(255,255,255,0.9); --color-border-default: #7a828e; --color-canvas-default: #0a0c10; --color-canvas-subtle: #272b33; --color-fg-default: #f0f3f6; --color-fg-muted: #f0f3f6; --color-fg-subtle: #9ea7b3; --color-fg-onemphasis: #0a0c10; --color-fg-accent: #71b7ff; --color-fg-danger: #ff6a69;} \ No newline at end of file +/* Default Theme (Dark) */:host-context(body) { --color-avatar-border: rgba(240,246,252,0.1); --color-border-default: #30363d; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-fg-default: #e6edf3; --color-fg-muted: #7d8590; --color-fg-subtle: #6e7681; --color-fg-onemphasis: #ffffff; --color-fg-accent: #2f81f7; --color-fg-danger: #f85149;} +/* Light Theme */:host-context([data-color-mode="light"][data-light-theme="light"]) { --color-avatar-border: rgba(31,35,40,0.15); --color-border-default: #d0d7de; --color-canvas-default: #ffffff; --color-canvas-subtle: #f6f8fa; --color-fg-default: #1F2328; --color-fg-muted: #656d76; --color-fg-subtle: #6e7781; --color-fg-onemphasis: #ffffff; --color-fg-accent: #0969da; --color-fg-danger: #d1242f;} +/* Light Protanopia & Deuteranopia Theme */:host-context([data-color-mode="light"][data-light-theme="light_colorblind"]) { --color-avatar-border: rgba(27,31,36,0.15); --color-border-default: #d0d7de; --color-canvas-default: #ffffff; --color-canvas-subtle: #f6f8fa; --color-fg-default: #24292f; --color-fg-muted: #57606a; --color-fg-subtle: #6e7781; --color-fg-onemphasis: #ffffff; --color-fg-accent: #0969da; --color-fg-danger: #b35900;} +/* Light Tritanopia Theme */:host-context([data-color-mode="light"][data-light-theme="light_tritanopia"]) { --color-avatar-border: rgba(27,31,36,0.15); --color-border-default: #d0d7de; --color-canvas-default: #ffffff; --color-canvas-subtle: #f6f8fa; --color-fg-default: #24292f; --color-fg-muted: #57606a; --color-fg-subtle: #6e7781; --color-fg-onemphasis: #ffffff; --color-fg-accent: #0969da; --color-fg-danger: #cf222e;} +/* Light High Contrast Theme */:host-context([data-color-mode="light"][data-light-theme="light_high_contrast"]) { --color-avatar-border: rgba(1,4,9,0.8); --color-border-default: #20252c; --color-canvas-default: #ffffff; --color-canvas-subtle: #e7ecf0; --color-fg-default: #0e1116; --color-fg-muted: #0e1116; --color-fg-subtle: #66707b; --color-fg-onemphasis: #ffffff; --color-fg-accent: #0349b4; --color-fg-danger: #d1242f;} +/* Dark Theme */:host-context([data-color-mode="dark"][data-dark-theme="dark"]) { --color-avatar-border: rgba(240,246,252,0.1); --color-border-default: #30363d; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-fg-default: #e6edf3; --color-fg-muted: #7d8590; --color-fg-subtle: #6e7681; --color-fg-onemphasis: #ffffff; --color-fg-accent: #2f81f7; --color-fg-danger: #f85149;} +/* Dark Dimmed Theme */:host-context([data-color-mode="dark"][data-dark-theme="dark_dimmed"]) { --color-avatar-border: rgba(205,217,229,0.1); --color-border-default: #444c56; --color-canvas-default: #22272e; --color-canvas-subtle: #2d333b; --color-fg-default: #adbac7; --color-fg-muted: #768390; --color-fg-subtle: #636e7b; --color-fg-onemphasis: #cdd9e5; --color-fg-accent: #539bf5; --color-fg-danger: #e5534b;} +/* Dark Protanopia & Deuteranopia Theme */:host-context([data-color-mode="dark"][data-dark-theme="dark_colorblind"]) { --color-avatar-border: rgba(240,246,252,0.1); --color-border-default: #30363d; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-fg-default: #c9d1d9; --color-fg-muted: #8b949e; --color-fg-subtle: #6e7681; --color-fg-onemphasis: #ffffff; --color-fg-accent: #58a6ff; --color-fg-danger: #d47616;} +/* Dark Tritanopia Theme */:host-context([data-color-mode="dark"][data-dark-theme="dark_tritanopia"]) { --color-avatar-border: rgba(240,246,252,0.1); --color-border-default: #30363d; --color-canvas-default: #0d1117; --color-canvas-subtle: #161b22; --color-fg-default: #c9d1d9; --color-fg-muted: #8b949e; --color-fg-subtle: #6e7681; --color-fg-onemphasis: #ffffff; --color-fg-accent: #58a6ff; --color-fg-danger: #f85149;} +/* Dark High Contrast Theme */:host-context([data-color-mode="dark"][data-dark-theme="dark_high_contrast"]) { --color-avatar-border: rgba(255,255,255,0.9); --color-border-default: #7a828e; --color-canvas-default: #0a0c10; --color-canvas-subtle: #272b33; --color-fg-default: #f0f3f6; --color-fg-muted: #f0f3f6; --color-fg-subtle: #9ea7b3; --color-fg-onemphasis: #0a0c10; --color-fg-accent: #71b7ff; --color-fg-danger: #ff6a69;} \ No newline at end of file diff --git a/src/github/utils/primer.js b/src/github/utils/primer.js index 08396f1..1fe6ee8 100644 --- a/src/github/utils/primer.js +++ b/src/github/utils/primer.js @@ -72,11 +72,12 @@ const getThemeColors = (colors) => { * @param {string} theme - name of primer theme * @returns {string} primer theme color variables */ -const getTheme = (theme) => { +const getTheme = (theme, isDefault = false) => { const colorMode = theme.value.startsWith('dark') ? 'dark' : 'light'; const dataTheme = `[data-${colorMode}-theme="${theme.value}"]`; - let output = `\n/* ${theme.title} THEME */` - output += `:host-context([data-color-mode="${colorMode}"]${dataTheme}) {`; + const title = isDefault ? `Default Theme (${theme.title})` : `${theme.title} Theme`; + let output = `\n/* ${title} */` + output += isDefault ? ':host-context(body) {' : `:host-context([data-color-mode="${colorMode}"]${dataTheme}) {`; output += getThemeColors(colors.default[theme.value]); output += '}'; return output; @@ -90,6 +91,7 @@ export const getPrimerCss = () => { let css = '/** This file is auto-generated, do not edit **/\n'; css += globalStyles(); + css += getTheme(primerThemes.find(t => t.value === 'dark'), true); primerThemes.forEach((theme) => { css += getTheme(theme); }); diff --git a/src/utils/index.js b/src/utils/index.js index 6e4903d..2a09c0b 100644 --- a/src/utils/index.js +++ b/src/utils/index.js @@ -2,7 +2,6 @@ * @fileoverview Utility functions */ - /** * Convert integer to string with big number suffixes * @param {number} num