{"id":22040346,"url":"https://github.com/inventsable/starlette","last_synced_at":"2025-05-07T22:12:52.711Z","repository":{"id":57369517,"uuid":"196914066","full_name":"Inventsable/starlette","owner":"Inventsable","description":"Expose dynamic CSS variables of all conceivable UI colors for any Adobe app and never worry about themes ever again","archived":false,"fork":false,"pushed_at":"2023-07-17T15:17:37.000Z","size":40,"stargazers_count":23,"open_issues_count":2,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-05-07T22:12:47.073Z","etag":null,"topics":["adobe","after-effects","audition","illustrator","indesign","photoshop","premiere-pro"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Inventsable.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-07-15T03:02:13.000Z","updated_at":"2024-04-25T02:00:02.000Z","dependencies_parsed_at":"2024-06-19T04:00:49.774Z","dependency_job_id":null,"html_url":"https://github.com/Inventsable/starlette","commit_stats":{"total_commits":10,"total_committers":1,"mean_commits":10.0,"dds":0.0,"last_synced_commit":"9648060a029a452427b7e21d91b51dabd0275340"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Inventsable%2Fstarlette","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Inventsable%2Fstarlette/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Inventsable%2Fstarlette/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Inventsable%2Fstarlette/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Inventsable","download_url":"https://codeload.github.com/Inventsable/starlette/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":252961843,"owners_count":21832198,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["adobe","after-effects","audition","illustrator","indesign","photoshop","premiere-pro"],"created_at":"2024-11-30T11:14:07.320Z","updated_at":"2025-05-07T22:12:52.690Z","avatar_url":"https://github.com/Inventsable.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# starlette [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n\n[![NPM](https://nodei.co/npm/starlette.png)](https://nodei.co/npm/starlette/)\n\nLibrary to grab all conceivable UI colors from any Adobe application and expose them as dynamic CSS variables which update automatically to any user-defined theme or theme changes.\n\n| App            | Illustrator | After Effects | Photoshop | Premiere Pro | InDesign | Audition |\n| :------------- | ----------: | ------------: | --------: | -----------: | -------: | -------: |\n| **Support**    |        100% |          100% |     98%\\* |        98%\\* |    98%\\* |    98%\\* |\n| **Theme Type** |      4-tier |      Gradient |    4-tier |     Gradient |   4-tier | Gradient |\n\n\u003e \\* Base calculations done in Illustrator and After Effects. If you notice inaccuracies in other apps, let me know and I'll update them.\n\n## • [Getting Started](#getting-started)\n\n## • [Stylesheets](#stylesheets)\n\n\u003e The panel in the center is [UI Spy](https://github.com/Inventsable/ui-spy). Notice the variables changing value on the left during app theme changes, and the panel's elements being automatically recolored in the center. There's no manual handling at all -- each element has a single CSS variable and never needs to care about user theme ever again.\n\u003e ![](https://thumbs.gfycat.com/OffensiveHoarseClownanemonefish-size_restricted.gif)\n\n\u003e After Effects is far more consistent than other apps with it's color scheme. Notice the hover state of buttons is the same as the color of it's default text -- the button text should invert:\n\u003e ![](https://thumbs.gfycat.com/NervousRevolvingCorydorascatfish-size_restricted.gif)\n\n---\n\n## Getting Started\n\n\u003e Templates from [generator-cep-vue-cli](https://github.com/Inventsable/generator-cep-vue-cli) already include starlette\n\nInstall the package from NPM:\n\n```bash\nnpm install starlette\n```\n\nNow import `starlette` and call the `init()` function anywhere in your panel:\n\n```html\n\u003c!-- In a .vue file --\u003e\n\u003cscript\u003e\n  import starlette from 'starlette'\n\n  // Or via require:\n  const starlette = require('starlette').default;\n\n  export default {\n    name: 'yourComponent',\n\n    mounted() {\n      starlette.init();\n      // Now all CSS variables are exposed and reactive.\n\n      // Can also do import and init all at once:\n      require('starlette').default.init();\n    },\n  }\n```\n\nThis gives you the freedom to write concise CSS with no need for any logic about the theme, simply assign the appropriate color:\n\n```css\n.checkbox {\n  /* This takes care of every theme, matching the host app exactly */\n  fill: var(--color-checkbox);\n}\n\n/* Easily apply the hover state with a single line of CSS via the hover variable */\n.checkbox:hover {\n  fill: var(--color-checkbox-hover);\n}\n\n.checkbox-disabled {\n  fill: var(--color-checkbox-disabled);\n}\n```\n\nThis is the literal CSS from the screen capture above, located in UI Spy's components/preview/checkbox.vue file.\n\n### Optional Custom Prefix (Namespacing)\nTo avoid overriding any existing CSS variables, you can set a custom prefix for all variables before calling `init()`\n\n```js\n...\n      starlette.setPrefix('myCustomPrefix-');\n      starlette.init();\n``````\n\nNow, all variables will be prefixed with `myCustomPrefix-`:\n\n```css\n.checkbox {\n  fill: var(--myCustomPrefix-color-checkbox);\n}\n\n.checkbox:hover {\n  fill: var(--myCustomPrefix-color-checkbox-hover);\n}\n.checkbox-disabled {\n  fill: var(--myCustomPrefix-color-checkbox-disabled);\n}\n\n```\n\n\n---\n\n## Stylesheets\n\n---\n\n## Illustrator\n\n| Variable Name                     | Darkest                                                            | Dark                                                               | Light                                                              | Lightest                                                           |\n| --------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------ | ------------------------------------------------------------------ | ------------------------------------------------------------------ |\n| --color-bg                        | ![#323232](https://placehold.it/15/323232/ffffff?text=+) `#323232` | ![#535353](https://placehold.it/15/535353/ffffff?text=+) `#535353` | ![#b8b8b8](https://placehold.it/15/b8b8b8/ffffff?text=+) `#b8b8b8` | ![#f0f0f0](https://placehold.it/15/f0f0f0/ffffff?text=+) `#f0f0f0` |\n| --color-default                   | ![#cccccc](https://placehold.it/15/cccccc/ffffff?text=+) `#cccccc` | ![#f4f4f4](https://placehold.it/15/f4f4f4/ffffff?text=+) `#f4f4f4` | ![#232323](https://placehold.it/15/232323/ffffff?text=+) `#232323` | ![#484848](https://placehold.it/15/484848/ffffff?text=+) `#484848` |\n| --color-text-label                | ![#979797](https://placehold.it/15/979797/ffffff?text=+) `#979797` | ![#c7c7c7](https://placehold.it/15/c7c7c7/ffffff?text=+) `#c7c7c7` | ![#232323](https://placehold.it/15/232323/ffffff?text=+) `#232323` | ![#6d6d6d](https://placehold.it/15/6d6d6d/ffffff?text=+) `#6d6d6d` |\n| --color-icon                      | ![#b7b7b7](https://placehold.it/15/b7b7b7/ffffff?text=+) `#b7b7b7` | ![#c2c2c2](https://placehold.it/15/c2c2c2/ffffff?text=+) `#c2c2c2` | ![#414141](https://placehold.it/15/414141/ffffff?text=+) `#414141` | ![#535353](https://placehold.it/15/535353/ffffff?text=+) `#535353` |\n| --color-selection                 | ![#5b9bd3](https://placehold.it/15/5b9bd3/ffffff?text=+) `#5b9bd3` | ![#46a0f5](https://placehold.it/15/46a0f5/ffffff?text=+) `#46a0f5` | ![#3468b2](https://placehold.it/15/3468b2/ffffff?text=+) `#3468b2` | ![#3d72b9](https://placehold.it/15/3d72b9/ffffff?text=+) `#3d72b9` |\n| --color-divider                   | ![#2a2a2a](https://placehold.it/15/2a2a2a/ffffff?text=+) `#2a2a2a` | ![#4d4d4d](https://placehold.it/15/4d4d4d/ffffff?text=+) `#4d4d4d` | ![#a8a8a8](https://placehold.it/15/a8a8a8/ffffff?text=+) `#a8a8a8` | ![#dcdcdc](https://placehold.it/15/dcdcdc/ffffff?text=+) `#dcdcdc` |\n| --color-btn-hover                 | ![#3f3f3f](https://placehold.it/15/3f3f3f/ffffff?text=+) `#3f3f3f` | ![#5f5f5f](https://placehold.it/15/5f5f5f/ffffff?text=+) `#5f5f5f` | ![#c4c4c4](https://placehold.it/15/c4c4c4/ffffff?text=+) `#c4c4c4` | ![#fcfcfc](https://placehold.it/15/fcfcfc/ffffff?text=+) `#fcfcfc` |\n| --color-btn-border                | ![#545454](https://placehold.it/15/545454/ffffff?text=+) `#545454` | ![#757575](https://placehold.it/15/757575/ffffff?text=+) `#757575` | ![#232323](https://placehold.it/15/232323/ffffff?text=+) `#232323` | ![#bdbdbd](https://placehold.it/15/bdbdbd/ffffff?text=+) `#bdbdbd` |\n| --color-btn-primary               | ![#5b9bd3](https://placehold.it/15/5b9bd3/ffffff?text=+) `#5b9bd3` | ![#5b9bd3](https://placehold.it/15/5b9bd3/ffffff?text=+) `#5b9bd3` | ![#3468b2](https://placehold.it/15/3468b2/ffffff?text=+) `#3468b2` | ![#3d72b9](https://placehold.it/15/3d72b9/ffffff?text=+) `#3d72b9` |\n| --color-btn-disabled              | ![#3a3a3a](https://placehold.it/15/3a3a3a/ffffff?text=+) `#3a3a3a` | ![#5a5a5a](https://placehold.it/15/5a5a5a/ffffff?text=+) `#5a5a5a` | ![#b0b0b0](https://placehold.it/15/b0b0b0/ffffff?text=+) `#b0b0b0` | ![#e6e6e6](https://placehold.it/15/e6e6e6/ffffff?text=+) `#e6e6e6` |\n| --color-btn-active                | ![#1f1f1f](https://placehold.it/15/1f1f1f/ffffff?text=+) `#1f1f1f` | ![#303030](https://placehold.it/15/303030/ffffff?text=+) `#303030` | ![#4b4b4b](https://placehold.it/15/4b4b4b/ffffff?text=+) `#4b4b4b` | ![#bdbdbd](https://placehold.it/15/bdbdbd/ffffff?text=+) `#bdbdbd` |\n| --color-btn-disabled-text         | ![#545454](https://placehold.it/15/545454/ffffff?text=+) `#545454` | ![#757575](https://placehold.it/15/757575/ffffff?text=+) `#757575` | ![#8f8f8f](https://placehold.it/15/8f8f8f/ffffff?text=+) `#8f8f8f` | ![#bdbdbd](https://placehold.it/15/bdbdbd/ffffff?text=+) `#bdbdbd` |\n| --color-btn-primary-text          | ![#ffffff](https://placehold.it/15/ffffff/ffffff?text=+) `#ffffff` | ![#ffffff](https://placehold.it/15/ffffff/ffffff?text=+) `#ffffff` | ![#ffffff](https://placehold.it/15/ffffff/ffffff?text=+) `#ffffff` | ![#ffffff](https://placehold.it/15/ffffff/ffffff?text=+) `#ffffff` |\n| --color-btn-pill-hover            | ![#cccccc](https://placehold.it/15/cccccc/ffffff?text=+) `#cccccc` | ![#ffffff](https://placehold.it/15/ffffff/ffffff?text=+) `#ffffff` | ![#232323](https://placehold.it/15/232323/ffffff?text=+) `#232323` | ![#484848](https://placehold.it/15/484848/ffffff?text=+) `#484848` |\n| --color-btn-pill-active           | ![#7f7f7f](https://placehold.it/15/7f7f7f/ffffff?text=+) `#7f7f7f` | ![#c8c8c8](https://placehold.it/15/c8c8c8/ffffff?text=+) `#c8c8c8` | ![#4b4b4b](https://placehold.it/15/4b4b4b/ffffff?text=+) `#4b4b4b` | ![#6d6d6d](https://placehold.it/15/6d6d6d/ffffff?text=+) `#6d6d6d` |\n| --color-btn-pill-border           | ![#cccccc](https://placehold.it/15/cccccc/ffffff?text=+) `#cccccc` | ![#ffffff](https://placehold.it/15/ffffff/ffffff?text=+) `#ffffff` | ![#232323](https://placehold.it/15/232323/ffffff?text=+) `#232323` | ![#484848](https://placehold.it/15/484848/ffffff?text=+) `#484848` |\n| --color-btn-icon-active           | ![#2e2e2e](https://placehold.it/15/2e2e2e/ffffff?text=+) `#2e2e2e` | ![#4f4f4f](https://placehold.it/15/4f4f4f/ffffff?text=+) `#4f4f4f` | ![#b0b0b0](https://placehold.it/15/b0b0b0/ffffff?text=+) `#b0b0b0` | ![#e6e6e6](https://placehold.it/15/e6e6e6/ffffff?text=+) `#e6e6e6` |\n| --color-btn-icon-active-border    | ![#4b4b4b](https://placehold.it/15/4b4b4b/ffffff?text=+) `#4b4b4b` | ![#6c6c6c](https://placehold.it/15/6c6c6c/ffffff?text=+) `#6c6c6c` | ![#adadad](https://placehold.it/15/adadad/ffffff?text=+) `#adadad` | ![#dddddd](https://placehold.it/15/dddddd/ffffff?text=+) `#dddddd` |\n| --color-btn-icon-hover            | ![#3f3f3f](https://placehold.it/15/3f3f3f/ffffff?text=+) `#3f3f3f` | ![#606060](https://placehold.it/15/606060/ffffff?text=+) `#606060` | ![#c4c4c4](https://placehold.it/15/c4c4c4/ffffff?text=+) `#c4c4c4` | ![#fcfcfc](https://placehold.it/15/fcfcfc/ffffff?text=+) `#fcfcfc` |\n| --color-btn-icon-hover-border     | ![#4b4b4b](https://placehold.it/15/4b4b4b/ffffff?text=+) `#4b4b4b` | ![#6c6c6c](https://placehold.it/15/6c6c6c/ffffff?text=+) `#6c6c6c` | ![#adadad](https://placehold.it/15/adadad/ffffff?text=+) `#adadad` | ![#dddddd](https://placehold.it/15/dddddd/ffffff?text=+) `#dddddd` |\n| --color-btn-toolbar-active        | ![#1f1f1f](https://placehold.it/15/1f1f1f/ffffff?text=+) `#1f1f1f` | ![#303030](https://placehold.it/15/303030/ffffff?text=+) `#303030` | ![#969696](https://placehold.it/15/969696/ffffff?text=+) `#969696` | ![#bdbdbd](https://placehold.it/15/bdbdbd/ffffff?text=+) `#bdbdbd` |\n| --color-btn-toolbar-active-border | ![#3f3f3f](https://placehold.it/15/3f3f3f/ffffff?text=+) `#3f3f3f` | ![#575757](https://placehold.it/15/575757/ffffff?text=+) `#575757` | ![#838383](https://placehold.it/15/838383/ffffff?text=+) `#838383` | ![#a7a7a7](https://placehold.it/15/a7a7a7/ffffff?text=+) `#a7a7a7` |\n| --color-btn-toolbar-hover         | ![#292929](https://placehold.it/15/292929/ffffff?text=+) `#292929` | ![#3e3e3e](https://placehold.it/15/3e3e3e/ffffff?text=+) `#3e3e3e` | ![#dcdcdc](https://placehold.it/15/dcdcdc/ffffff?text=+) `#dcdcdc` | ![#fafafa](https://placehold.it/15/fafafa/ffffff?text=+) `#fafafa` |\n| --color-btn-toolbar-hover-border  | ![#4b4b4b](https://placehold.it/15/4b4b4b/ffffff?text=+) `#4b4b4b` | ![#5a5a5a](https://placehold.it/15/5a5a5a/ffffff?text=+) `#5a5a5a` | ![#b4b4b4](https://placehold.it/15/b4b4b4/ffffff?text=+) `#b4b4b4` | ![#bdbdbd](https://placehold.it/15/bdbdbd/ffffff?text=+) `#bdbdbd` |\n| --color-input                     | ![#262626](https://placehold.it/15/262626/ffffff?text=+) `#262626` | ![#464646](https://placehold.it/15/464646/ffffff?text=+) `#464646` | ![#e3e3e3](https://placehold.it/15/e3e3e3/ffffff?text=+) `#e3e3e3` | ![#ffffff](https://placehold.it/15/ffffff/ffffff?text=+) `#ffffff` |\n| --color-input-border              | ![#3a3a3a](https://placehold.it/15/3a3a3a/ffffff?text=+) `#3a3a3a` | ![#606060](https://placehold.it/15/606060/ffffff?text=+) `#606060` | ![#a8a8a8](https://placehold.it/15/a8a8a8/ffffff?text=+) `#a8a8a8` | ![#dcdcdc](https://placehold.it/15/dcdcdc/ffffff?text=+) `#dcdcdc` |\n| --color-input-text                | ![#cccccc](https://placehold.it/15/cccccc/ffffff?text=+) `#cccccc` | ![#ffffff](https://placehold.it/15/ffffff/ffffff?text=+) `#ffffff` | ![#232323](https://placehold.it/15/232323/ffffff?text=+) `#232323` | ![#484848](https://placehold.it/15/484848/ffffff?text=+) `#484848` |\n| --color-input-focus               | ![#ffffff](https://placehold.it/15/ffffff/ffffff?text=+) `#ffffff` | ![#ffffff](https://placehold.it/15/ffffff/ffffff?text=+) `#ffffff` | ![#e3e3e3](https://placehold.it/15/e3e3e3/ffffff?text=+) `#e3e3e3` | ![#ffffff](https://placehold.it/15/ffffff/ffffff?text=+) `#ffffff` |\n| --color-input-focus-border        | ![#5b9bd3](https://placehold.it/15/5b9bd3/ffffff?text=+) `#5b9bd3` | ![#5b9bd3](https://placehold.it/15/5b9bd3/ffffff?text=+) `#5b9bd3` | ![#3468b2](https://placehold.it/15/3468b2/ffffff?text=+) `#3468b2` | ![#3d72b9](https://placehold.it/15/3d72b9/ffffff?text=+) `#3d72b9` |\n| --color-input-focus-text          | ![#2a2a2a](https://placehold.it/15/2a2a2a/ffffff?text=+) `#2a2a2a` | ![#4c4c4c](https://placehold.it/15/4c4c4c/ffffff?text=+) `#4c4c4c` | ![#232323](https://placehold.it/15/232323/ffffff?text=+) `#232323` | ![#484848](https://placehold.it/15/484848/ffffff?text=+) `#484848` |\n| --color-dropdown                  | ![#262626](https://placehold.it/15/262626/ffffff?text=+) `#262626` | ![#4c4c4c](https://placehold.it/15/4c4c4c/ffffff?text=+) `#4c4c4c` | ![#c4c4c4](https://placehold.it/15/c4c4c4/ffffff?text=+) `#c4c4c4` | ![#fcfcfc](https://placehold.it/15/fcfcfc/ffffff?text=+) `#fcfcfc` |\n| --color-dropdown-active           | ![#1e1e1e](https://placehold.it/15/1e1e1e/ffffff?text=+) `#1e1e1e` | ![#303030](https://placehold.it/15/303030/ffffff?text=+) `#303030` | ![#969696](https://placehold.it/15/969696/ffffff?text=+) `#969696` | ![#bdbdbd](https://placehold.it/15/bdbdbd/ffffff?text=+) `#bdbdbd` |\n| --color-dropdown-hover            | ![#3a3a3a](https://placehold.it/15/3a3a3a/ffffff?text=+) `#3a3a3a` | ![#5a5a5a](https://placehold.it/15/5a5a5a/ffffff?text=+) `#5a5a5a` | ![#cecece](https://placehold.it/15/cecece/ffffff?text=+) `#cecece` | ![#ffffff](https://placehold.it/15/ffffff/ffffff?text=+) `#ffffff` |\n| --color-dropdown-border           | ![#3a3a3a](https://placehold.it/15/3a3a3a/ffffff?text=+) `#3a3a3a` | ![#606060](https://placehold.it/15/606060/ffffff?text=+) `#606060` | ![#a8a8a8](https://placehold.it/15/a8a8a8/ffffff?text=+) `#a8a8a8` | ![#dcdcdc](https://placehold.it/15/dcdcdc/ffffff?text=+) `#dcdcdc` |\n| --color-dropdown-item-hover       | ![#3f3f3f](https://placehold.it/15/3f3f3f/ffffff?text=+) `#3f3f3f` | ![#606060](https://placehold.it/15/606060/ffffff?text=+) `#606060` | ![#a8a8a8](https://placehold.it/15/a8a8a8/ffffff?text=+) `#a8a8a8` | ![#dcdcdc](https://placehold.it/15/dcdcdc/ffffff?text=+) `#dcdcdc` |\n| --color-dropdown-item-selected    | ![#519dd6](https://placehold.it/15/519dd6/ffffff?text=+) `#519dd6` | ![#5b9bd3](https://placehold.it/15/5b9bd3/ffffff?text=+) `#5b9bd3` | ![#3868b2](https://placehold.it/15/3868b2/ffffff?text=+) `#3868b2` | ![#3d72b9](https://placehold.it/15/3d72b9/ffffff?text=+) `#3d72b9` |\n| --color-checkbox                  | ![#979797](https://placehold.it/15/979797/ffffff?text=+) `#979797` | ![#c8c8c8](https://placehold.it/15/c8c8c8/ffffff?text=+) `#c8c8c8` | ![#4b4b4b](https://placehold.it/15/4b4b4b/ffffff?text=+) `#4b4b4b` | ![#6d6d6d](https://placehold.it/15/6d6d6d/ffffff?text=+) `#6d6d6d` |\n| --color-checkbox-hover            | ![#cccccc](https://placehold.it/15/cccccc/ffffff?text=+) `#cccccc` | ![#ffffff](https://placehold.it/15/ffffff/ffffff?text=+) `#ffffff` | ![#232323](https://placehold.it/15/232323/ffffff?text=+) `#232323` | ![#484848](https://placehold.it/15/484848/ffffff?text=+) `#484848` |\n| --color-checkbox-disabled         | ![#545454](https://placehold.it/15/545454/ffffff?text=+) `#545454` | ![#757575](https://placehold.it/15/757575/ffffff?text=+) `#757575` | ![#8f8f8f](https://placehold.it/15/8f8f8f/ffffff?text=+) `#8f8f8f` | ![#bdbdbd](https://placehold.it/15/bdbdbd/ffffff?text=+) `#bdbdbd` |\n| --color-scrollbar                 | ![#2a2a2a](https://placehold.it/15/2a2a2a/ffffff?text=+) `#2a2a2a` | ![#4c4c4c](https://placehold.it/15/4c4c4c/ffffff?text=+) `#4c4c4c` | ![#c4c4c4](https://placehold.it/15/c4c4c4/ffffff?text=+) `#c4c4c4` | ![#ffffff](https://placehold.it/15/ffffff/ffffff?text=+) `#ffffff` |\n| --color-scrollbar-arrow           | ![#727272](https://placehold.it/15/727272/ffffff?text=+) `#727272` | ![#969696](https://placehold.it/15/969696/ffffff?text=+) `#969696` | ![#6f6f6f](https://placehold.it/15/6f6f6f/ffffff?text=+) `#6f6f6f` | ![#969696](https://placehold.it/15/969696/ffffff?text=+) `#969696` |\n| --color-scrollbar-thumb           | ![#3f3f3f](https://placehold.it/15/3f3f3f/ffffff?text=+) `#3f3f3f` | ![#606060](https://placehold.it/15/606060/ffffff?text=+) `#606060` | ![#a8a8a8](https://placehold.it/15/a8a8a8/ffffff?text=+) `#a8a8a8` | ![#dcdcdc](https://placehold.it/15/dcdcdc/ffffff?text=+) `#dcdcdc` |\n| --color-scrollbar-thumb-hover     | ![#545454](https://placehold.it/15/545454/ffffff?text=+) `#545454` | ![#757575](https://placehold.it/15/757575/ffffff?text=+) `#757575` | ![#8f8f8f](https://placehold.it/15/8f8f8f/ffffff?text=+) `#8f8f8f` | ![#bdbdbd](https://placehold.it/15/bdbdbd/ffffff?text=+) `#bdbdbd` |\n| --color-tooltip-border            | ![#767676](https://placehold.it/15/767676/ffffff?text=+) `#767676` | ![#787878](https://placehold.it/15/787878/ffffff?text=+) `#787878` | ![#777777](https://placehold.it/15/777777/ffffff?text=+) `#777777` | ![#777777](https://placehold.it/15/777777/ffffff?text=+) `#777777` |\n| --color-header                    | ![#262626](https://placehold.it/15/262626/ffffff?text=+) `#262626` | ![#434343](https://placehold.it/15/434343/ffffff?text=+) `#434343` | ![#a2a2a2](https://placehold.it/15/a2a2a2/ffffff?text=+) `#a2a2a2` | ![#dbdbdb](https://placehold.it/15/dbdbdb/ffffff?text=+) `#dbdbdb` |\n| --color-header-border             | ![#212121](https://placehold.it/15/212121/ffffff?text=+) `#212121` | ![#383838](https://placehold.it/15/383838/ffffff?text=+) `#383838` | ![#949494](https://placehold.it/15/949494/ffffff?text=+) `#949494` | ![#cccccc](https://placehold.it/15/cccccc/ffffff?text=+) `#cccccc` |\n\n---\n\n## After Effects (as gradient scale)\n\n| Variable Name                     | Darkest                                                            | Medium                                                             | Lightest                                                           |\n| --------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------ | ------------------------------------------------------------------ |\n| --color-bg                        | ![#232323](https://placehold.it/15/232323/ffffff?text=+) `#232323` | ![#3c3c3c](https://placehold.it/15/3c3c3c/ffffff?text=+) `#3c3c3c` | ![#565656](https://placehold.it/15/565656/ffffff?text=+) `#565656` |\n| --color-default                   | ![#8a8a8a](https://placehold.it/15/8a8a8a/ffffff?text=+) `#8a8a8a` | ![#a3a3a3](https://placehold.it/15/a3a3a3/ffffff?text=+) `#a3a3a3` | ![#bdbdbd](https://placehold.it/15/bdbdbd/ffffff?text=+) `#bdbdbd` |\n| --color-text-label                | ![#8a8a8a](https://placehold.it/15/8a8a8a/ffffff?text=+) `#8a8a8a` | ![#a3a3a3](https://placehold.it/15/a3a3a3/ffffff?text=+) `#a3a3a3` | ![#bdbdbd](https://placehold.it/15/bdbdbd/ffffff?text=+) `#bdbdbd` |\n| --color-icon                      | ![#b2b2b2](https://placehold.it/15/b2b2b2/ffffff?text=+) `#b2b2b2` | ![#cbcbcb](https://placehold.it/15/cbcbcb/ffffff?text=+) `#cbcbcb` | ![#e5e5e5](https://placehold.it/15/e5e5e5/ffffff?text=+) `#e5e5e5` |\n| --color-selection                 | ![#4892cb](https://placehold.it/15/4892cb/ffffff?text=+) `#4892cb` | ![#4892cb](https://placehold.it/15/4892cb/ffffff?text=+) `#4892cb` | ![#4892cb](https://placehold.it/15/4892cb/ffffff?text=+) `#4892cb` |\n| --color-divider                   | ![#2d2d2d](https://placehold.it/15/2d2d2d/ffffff?text=+) `#2d2d2d` | ![#464646](https://placehold.it/15/464646/ffffff?text=+) `#464646` | ![#606060](https://placehold.it/15/606060/ffffff?text=+) `#606060` |\n| --color-btn-default               | ![#232323](https://placehold.it/15/232323/ffffff?text=+) `#232323` | ![#3c3c3c](https://placehold.it/15/3c3c3c/ffffff?text=+) `#3c3c3c` | ![#565656](https://placehold.it/15/565656/ffffff?text=+) `#565656` |\n| --color-btn-hover                 | ![#8a8a8a](https://placehold.it/15/8a8a8a/ffffff?text=+) `#8a8a8a` | ![#a3a3a3](https://placehold.it/15/a3a3a3/ffffff?text=+) `#a3a3a3` | ![#bdbdbd](https://placehold.it/15/bdbdbd/ffffff?text=+) `#bdbdbd` |\n| --color-btn-border                | ![#8a8a8a](https://placehold.it/15/8a8a8a/ffffff?text=+) `#8a8a8a` | ![#a3a3a3](https://placehold.it/15/a3a3a3/ffffff?text=+) `#a3a3a3` | ![#bdbdbd](https://placehold.it/15/bdbdbd/ffffff?text=+) `#bdbdbd` |\n| --color-btn-primary               | ![#4885c6](https://placehold.it/15/4885c6/ffffff?text=+) `#4885c6` | ![#4885c6](https://placehold.it/15/4885c6/ffffff?text=+) `#4885c6` | ![#4885c6](https://placehold.it/15/4885c6/ffffff?text=+) `#4885c6` |\n| --color-btn-disabled              | ![#2a2a2a](https://placehold.it/15/2a2a2a/ffffff?text=+) `#2a2a2a` | ![#434343](https://placehold.it/15/434343/ffffff?text=+) `#434343` | ![#5d5d5d](https://placehold.it/15/5d5d5d/ffffff?text=+) `#5d5d5d` |\n| --color-btn-active                | ![#646464](https://placehold.it/15/646464/ffffff?text=+) `#646464` | ![#7d7d7d](https://placehold.it/15/7d7d7d/ffffff?text=+) `#7d7d7d` | ![#979797](https://placehold.it/15/979797/ffffff?text=+) `#979797` |\n| --color-btn-disabled-text         | ![#464646](https://placehold.it/15/464646/ffffff?text=+) `#464646` | ![#5f5f5f](https://placehold.it/15/5f5f5f/ffffff?text=+) `#5f5f5f` | ![#797979](https://placehold.it/15/797979/ffffff?text=+) `#797979` |\n| --color-btn-primary-text          | ![#ffffff](https://placehold.it/15/ffffff/ffffff?text=+) `#ffffff` | ![#ffffff](https://placehold.it/15/ffffff/ffffff?text=+) `#ffffff` | ![#ffffff](https://placehold.it/15/ffffff/ffffff?text=+) `#ffffff` |\n| --color-btn-pill-hover            | ![#8a8a8a](https://placehold.it/15/8a8a8a/ffffff?text=+) `#8a8a8a` | ![#a3a3a3](https://placehold.it/15/a3a3a3/ffffff?text=+) `#a3a3a3` | ![#bdbdbd](https://placehold.it/15/bdbdbd/ffffff?text=+) `#bdbdbd` |\n| --color-btn-pill-border           | ![#e2e2e2](https://placehold.it/15/e2e2e2/ffffff?text=+) `#e2e2e2` | ![#fbfbfb](https://placehold.it/15/fbfbfb/ffffff?text=+) `#fbfbfb` | ![#ffffff](https://placehold.it/15/ffffff/ffffff?text=+) `#ffffff` |\n| --color-btn-pill-active           | ![#8a8a8a](https://placehold.it/15/8a8a8a/ffffff?text=+) `#8a8a8a` | ![#a3a3a3](https://placehold.it/15/a3a3a3/ffffff?text=+) `#a3a3a3` | ![#bdbdbd](https://placehold.it/15/bdbdbd/ffffff?text=+) `#bdbdbd` |\n| --color-btn-icon-active           | ![#161616](https://placehold.it/15/161616/ffffff?text=+) `#161616` | ![#2f2f2f](https://placehold.it/15/2f2f2f/ffffff?text=+) `#2f2f2f` | ![#494949](https://placehold.it/15/494949/ffffff?text=+) `#494949` |\n| --color-btn-icon-active-border    | ![#2e2e2e](https://placehold.it/15/2e2e2e/ffffff?text=+) `#2e2e2e` | ![#474747](https://placehold.it/15/474747/ffffff?text=+) `#474747` | ![#616161](https://placehold.it/15/616161/ffffff?text=+) `#616161` |\n| --color-btn-icon-hover            | ![#2a2a2a](https://placehold.it/15/2a2a2a/ffffff?text=+) `#2a2a2a` | ![#434343](https://placehold.it/15/434343/ffffff?text=+) `#434343` | ![#5d5d5d](https://placehold.it/15/5d5d5d/ffffff?text=+) `#5d5d5d` |\n| --color-btn-icon-hover-border     | ![#2e2e2e](https://placehold.it/15/2e2e2e/ffffff?text=+) `#2e2e2e` | ![#474747](https://placehold.it/15/474747/ffffff?text=+) `#474747` | ![#616161](https://placehold.it/15/616161/ffffff?text=+) `#616161` |\n| --color-btn-toolbar-active        | ![#161616](https://placehold.it/15/161616/ffffff?text=+) `#161616` | ![#2f2f2f](https://placehold.it/15/2f2f2f/ffffff?text=+) `#2f2f2f` | ![#494949](https://placehold.it/15/494949/ffffff?text=+) `#494949` |\n| --color-btn-toolbar-active-border | ![#2e2e2e](https://placehold.it/15/2e2e2e/ffffff?text=+) `#2e2e2e` | ![#474747](https://placehold.it/15/474747/ffffff?text=+) `#474747` | ![#616161](https://placehold.it/15/616161/ffffff?text=+) `#616161` |\n| --color-btn-toolbar-hover         | ![#2a2a2a](https://placehold.it/15/2a2a2a/ffffff?text=+) `#2a2a2a` | ![#434343](https://placehold.it/15/434343/ffffff?text=+) `#434343` | ![#5d5d5d](https://placehold.it/15/5d5d5d/ffffff?text=+) `#5d5d5d` |\n| --color-btn-toolbar-hover-border  | ![#2e2e2e](https://placehold.it/15/2e2e2e/ffffff?text=+) `#2e2e2e` | ![#474747](https://placehold.it/15/474747/ffffff?text=+) `#474747` | ![#616161](https://placehold.it/15/616161/ffffff?text=+) `#616161` |\n| --color-input                     | ![#161616](https://placehold.it/15/161616/ffffff?text=+) `#161616` | ![#2f2f2f](https://placehold.it/15/2f2f2f/ffffff?text=+) `#2f2f2f` | ![#494949](https://placehold.it/15/494949/ffffff?text=+) `#494949` |\n| --color-input-border              | ![#2e2e2e](https://placehold.it/15/2e2e2e/ffffff?text=+) `#2e2e2e` | ![#474747](https://placehold.it/15/474747/ffffff?text=+) `#474747` | ![#616161](https://placehold.it/15/616161/ffffff?text=+) `#616161` |\n| --color-input-text                | ![#b2b2b2](https://placehold.it/15/b2b2b2/ffffff?text=+) `#b2b2b2` | ![#cbcbcb](https://placehold.it/15/cbcbcb/ffffff?text=+) `#cbcbcb` | ![#e5e5e5](https://placehold.it/15/e5e5e5/ffffff?text=+) `#e5e5e5` |\n| --color-input-focus               | ![#e8e8e8](https://placehold.it/15/e8e8e8/ffffff?text=+) `#e8e8e8` | ![#ffffff](https://placehold.it/15/ffffff/ffffff?text=+) `#ffffff` | ![#ffffff](https://placehold.it/15/ffffff/ffffff?text=+) `#ffffff` |\n| --color-input-focus-border        | ![#4892cb](https://placehold.it/15/4892cb/ffffff?text=+) `#4892cb` | ![#4892cb](https://placehold.it/15/4892cb/ffffff?text=+) `#4892cb` | ![#4892cb](https://placehold.it/15/4892cb/ffffff?text=+) `#4892cb` |\n| --color-input-focus-text          | ![#161616](https://placehold.it/15/161616/ffffff?text=+) `#161616` | ![#2f2f2f](https://placehold.it/15/2f2f2f/ffffff?text=+) `#2f2f2f` | ![#494949](https://placehold.it/15/494949/ffffff?text=+) `#494949` |\n| --color-dropdown                  | ![#1d1d1d](https://placehold.it/15/1d1d1d/ffffff?text=+) `#1d1d1d` | ![#363636](https://placehold.it/15/363636/ffffff?text=+) `#363636` | ![#505050](https://placehold.it/15/505050/ffffff?text=+) `#505050` |\n| --color-dropdown-active           | ![#232323](https://placehold.it/15/232323/ffffff?text=+) `#232323` | ![#3c3c3c](https://placehold.it/15/3c3c3c/ffffff?text=+) `#3c3c3c` | ![#565656](https://placehold.it/15/565656/ffffff?text=+) `#565656` |\n| --color-dropdown-hover            | ![#2a2a2a](https://placehold.it/15/2a2a2a/ffffff?text=+) `#2a2a2a` | ![#434343](https://placehold.it/15/434343/ffffff?text=+) `#434343` | ![#5d5d5d](https://placehold.it/15/5d5d5d/ffffff?text=+) `#5d5d5d` |\n| --color-dropdown-border           | ![#2e2e2e](https://placehold.it/15/2e2e2e/ffffff?text=+) `#2e2e2e` | ![#474747](https://placehold.it/15/474747/ffffff?text=+) `#474747` | ![#616161](https://placehold.it/15/616161/ffffff?text=+) `#616161` |\n| --color-dropdown-item             | ![#1d1d1d](https://placehold.it/15/1d1d1d/ffffff?text=+) `#1d1d1d` | ![#363636](https://placehold.it/15/363636/ffffff?text=+) `#363636` | ![#505050](https://placehold.it/15/505050/ffffff?text=+) `#505050` |\n| --color-dropdown-item-hover       | ![#464646](https://placehold.it/15/464646/ffffff?text=+) `#464646` | ![#5f5f5f](https://placehold.it/15/5f5f5f/ffffff?text=+) `#5f5f5f` | ![#797979](https://placehold.it/15/797979/ffffff?text=+) `#797979` |\n| --color-dropdown-item-selected    | ![#4c86c6](https://placehold.it/15/4c86c6/ffffff?text=+) `#4c86c6` | ![#4c86c6](https://placehold.it/15/4c86c6/ffffff?text=+) `#4c86c6` | ![#4c86c6](https://placehold.it/15/4c86c6/ffffff?text=+) `#4c86c6` |\n| --color-checkbox                  | ![#8a8a8a](https://placehold.it/15/8a8a8a/ffffff?text=+) `#8a8a8a` | ![#a3a3a3](https://placehold.it/15/a3a3a3/ffffff?text=+) `#a3a3a3` | ![#bdbdbd](https://placehold.it/15/bdbdbd/ffffff?text=+) `#bdbdbd` |\n| --color-checkbox-hover            | ![#bababa](https://placehold.it/15/bababa/ffffff?text=+) `#bababa` | ![#d3d3d3](https://placehold.it/15/d3d3d3/ffffff?text=+) `#d3d3d3` | ![#ededed](https://placehold.it/15/ededed/ffffff?text=+) `#ededed` |\n| --color-checkbox-disabled         | ![#464646](https://placehold.it/15/464646/ffffff?text=+) `#464646` | ![#5f5f5f](https://placehold.it/15/5f5f5f/ffffff?text=+) `#5f5f5f` | ![#797979](https://placehold.it/15/797979/ffffff?text=+) `#797979` |\n| --color-scrollbar                 | ![#1d1d1d](https://placehold.it/15/1d1d1d/ffffff?text=+) `#1d1d1d` | ![#363636](https://placehold.it/15/363636/ffffff?text=+) `#363636` | ![#505050](https://placehold.it/15/505050/ffffff?text=+) `#505050` |\n| --color-scrollbar-thumb           | ![#313131](https://placehold.it/15/313131/ffffff?text=+) `#313131` | ![#4a4a4a](https://placehold.it/15/4a4a4a/ffffff?text=+) `#4a4a4a` | ![#646464](https://placehold.it/15/646464/ffffff?text=+) `#646464` |\n| --color-scrollbar-arrow           | ![#919191](https://placehold.it/15/919191/ffffff?text=+) `#919191` | ![#aaaaaa](https://placehold.it/15/aaaaaa/ffffff?text=+) `#aaaaaa` | ![#c4c4c4](https://placehold.it/15/c4c4c4/ffffff?text=+) `#c4c4c4` |\n| --color-scrollbar-thumb-hover     | ![#464646](https://placehold.it/15/464646/ffffff?text=+) `#464646` | ![#5f5f5f](https://placehold.it/15/5f5f5f/ffffff?text=+) `#5f5f5f` | ![#797979](https://placehold.it/15/797979/ffffff?text=+) `#797979` |\n| --color-tooltip-border            | ![#777777](https://placehold.it/15/777777/ffffff?text=+) `#777777` | ![#909090](https://placehold.it/15/909090/ffffff?text=+) `#909090` | ![#aaaaaa](https://placehold.it/15/aaaaaa/ffffff?text=+) `#aaaaaa` |\n| --color-header                    | ![#333333](https://placehold.it/15/333333/ffffff?text=+) `#333333` | ![#4c4c4c](https://placehold.it/15/4c4c4c/ffffff?text=+) `#4c4c4c` | ![#666666](https://placehold.it/15/666666/ffffff?text=+) `#666666` |\n| --color-header-border             | ![#161616](https://placehold.it/15/161616/ffffff?text=+) `#161616` | ![#2f2f2f](https://placehold.it/15/2f2f2f/ffffff?text=+) `#2f2f2f` | ![#494949](https://placehold.it/15/494949/ffffff?text=+) `#494949` |\n\n---\n\n## Todo\n\n- `init()` should assign low-specificity base rules like `font-family: 'Open Sans', sans-serif;`, assign the `\u003cbody\u003e` tag's `background-color` to `--color-bg`, and automatically assign the scrollbar's style.\n- ~~Support all other apps (6 minimum to cover Typescript / Ovid Editor)~~\n- ~~Extend API and documentation~~\n\n## Notes about Host inconsistencies\n\n- Gradient buttons work much differently -- might be worth having a `button-text` variable\n- Photoshop's `dropdown` is anomalously white, causing the text to be unreadable -- maybe include a `dropdown-text` variable to combat this\n- There should be a `input-disabled` variable\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finventsable%2Fstarlette","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finventsable%2Fstarlette","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finventsable%2Fstarlette/lists"}