https://github.com/inventsable/starlette
Expose dynamic CSS variables of all conceivable UI colors for any Adobe app and never worry about themes ever again
https://github.com/inventsable/starlette
adobe after-effects audition illustrator indesign photoshop premiere-pro
Last synced: 14 days ago
JSON representation
Expose dynamic CSS variables of all conceivable UI colors for any Adobe app and never worry about themes ever again
- Host: GitHub
- URL: https://github.com/inventsable/starlette
- Owner: Inventsable
- License: mit
- Created: 2019-07-15T03:02:13.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2023-07-17T15:17:37.000Z (almost 2 years ago)
- Last Synced: 2025-05-07T22:12:47.073Z (14 days ago)
- Topics: adobe, after-effects, audition, illustrator, indesign, photoshop, premiere-pro
- Language: TypeScript
- Homepage:
- Size: 39.1 KB
- Stars: 23
- Watchers: 3
- Forks: 4
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# starlette [](https://opensource.org/licenses/MIT)
[](https://nodei.co/npm/starlette/)
Library 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.
| App | Illustrator | After Effects | Photoshop | Premiere Pro | InDesign | Audition |
| :------------- | ----------: | ------------: | --------: | -----------: | -------: | -------: |
| **Support** | 100% | 100% | 98%\* | 98%\* | 98%\* | 98%\* |
| **Theme Type** | 4-tier | Gradient | 4-tier | Gradient | 4-tier | Gradient |
> \* Base calculations done in Illustrator and After Effects. If you notice inaccuracies in other apps, let me know and I'll update them.
## • [Getting Started](#getting-started)
## • [Stylesheets](#stylesheets)
> 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.
> 
> 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:
> 
---
## Getting Started
> Templates from [generator-cep-vue-cli](https://github.com/Inventsable/generator-cep-vue-cli) already include starlette
Install the package from NPM:
```bash
npm install starlette
```
Now import `starlette` and call the `init()` function anywhere in your panel:
```html
import starlette from 'starlette'
// Or via require:
const starlette = require('starlette').default;
export default {
name: 'yourComponent',
mounted() {
starlette.init();
// Now all CSS variables are exposed and reactive.
// Can also do import and init all at once:
require('starlette').default.init();
},
}
```
This gives you the freedom to write concise CSS with no need for any logic about the theme, simply assign the appropriate color:
```css
.checkbox {
/* This takes care of every theme, matching the host app exactly */
fill: var(--color-checkbox);
}
/* Easily apply the hover state with a single line of CSS via the hover variable */
.checkbox:hover {
fill: var(--color-checkbox-hover);
}
.checkbox-disabled {
fill: var(--color-checkbox-disabled);
}
```
This is the literal CSS from the screen capture above, located in UI Spy's components/preview/checkbox.vue file.
### Optional Custom Prefix (Namespacing)
To avoid overriding any existing CSS variables, you can set a custom prefix for all variables before calling `init()`
```js
...
starlette.setPrefix('myCustomPrefix-');
starlette.init();
``````
Now, all variables will be prefixed with `myCustomPrefix-`:
```css
.checkbox {
fill: var(--myCustomPrefix-color-checkbox);
}
.checkbox:hover {
fill: var(--myCustomPrefix-color-checkbox-hover);
}
.checkbox-disabled {
fill: var(--myCustomPrefix-color-checkbox-disabled);
}
```
---
## Stylesheets
---
## Illustrator
| Variable Name | Darkest | Dark | Light | Lightest |
| --------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------ | ------------------------------------------------------------------ | ------------------------------------------------------------------ |
| --color-bg |  `#323232` |  `#535353` |  `#b8b8b8` |  `#f0f0f0` |
| --color-default |  `#cccccc` |  `#f4f4f4` |  `#232323` |  `#484848` |
| --color-text-label |  `#979797` |  `#c7c7c7` |  `#232323` |  `#6d6d6d` |
| --color-icon |  `#b7b7b7` |  `#c2c2c2` |  `#414141` |  `#535353` |
| --color-selection |  `#5b9bd3` |  `#46a0f5` |  `#3468b2` |  `#3d72b9` |
| --color-divider |  `#2a2a2a` |  `#4d4d4d` |  `#a8a8a8` |  `#dcdcdc` |
| --color-btn-hover |  `#3f3f3f` |  `#5f5f5f` |  `#c4c4c4` |  `#fcfcfc` |
| --color-btn-border |  `#545454` |  `#757575` |  `#232323` |  `#bdbdbd` |
| --color-btn-primary |  `#5b9bd3` |  `#5b9bd3` |  `#3468b2` |  `#3d72b9` |
| --color-btn-disabled |  `#3a3a3a` |  `#5a5a5a` |  `#b0b0b0` |  `#e6e6e6` |
| --color-btn-active |  `#1f1f1f` |  `#303030` |  `#4b4b4b` |  `#bdbdbd` |
| --color-btn-disabled-text |  `#545454` |  `#757575` |  `#8f8f8f` |  `#bdbdbd` |
| --color-btn-primary-text |  `#ffffff` |  `#ffffff` |  `#ffffff` |  `#ffffff` |
| --color-btn-pill-hover |  `#cccccc` |  `#ffffff` |  `#232323` |  `#484848` |
| --color-btn-pill-active |  `#7f7f7f` |  `#c8c8c8` |  `#4b4b4b` |  `#6d6d6d` |
| --color-btn-pill-border |  `#cccccc` |  `#ffffff` |  `#232323` |  `#484848` |
| --color-btn-icon-active |  `#2e2e2e` |  `#4f4f4f` |  `#b0b0b0` |  `#e6e6e6` |
| --color-btn-icon-active-border |  `#4b4b4b` |  `#6c6c6c` |  `#adadad` |  `#dddddd` |
| --color-btn-icon-hover |  `#3f3f3f` |  `#606060` |  `#c4c4c4` |  `#fcfcfc` |
| --color-btn-icon-hover-border |  `#4b4b4b` |  `#6c6c6c` |  `#adadad` |  `#dddddd` |
| --color-btn-toolbar-active |  `#1f1f1f` |  `#303030` |  `#969696` |  `#bdbdbd` |
| --color-btn-toolbar-active-border |  `#3f3f3f` |  `#575757` |  `#838383` |  `#a7a7a7` |
| --color-btn-toolbar-hover |  `#292929` |  `#3e3e3e` |  `#dcdcdc` |  `#fafafa` |
| --color-btn-toolbar-hover-border |  `#4b4b4b` |  `#5a5a5a` |  `#b4b4b4` |  `#bdbdbd` |
| --color-input |  `#262626` |  `#464646` |  `#e3e3e3` |  `#ffffff` |
| --color-input-border |  `#3a3a3a` |  `#606060` |  `#a8a8a8` |  `#dcdcdc` |
| --color-input-text |  `#cccccc` |  `#ffffff` |  `#232323` |  `#484848` |
| --color-input-focus |  `#ffffff` |  `#ffffff` |  `#e3e3e3` |  `#ffffff` |
| --color-input-focus-border |  `#5b9bd3` |  `#5b9bd3` |  `#3468b2` |  `#3d72b9` |
| --color-input-focus-text |  `#2a2a2a` |  `#4c4c4c` |  `#232323` |  `#484848` |
| --color-dropdown |  `#262626` |  `#4c4c4c` |  `#c4c4c4` |  `#fcfcfc` |
| --color-dropdown-active |  `#1e1e1e` |  `#303030` |  `#969696` |  `#bdbdbd` |
| --color-dropdown-hover |  `#3a3a3a` |  `#5a5a5a` |  `#cecece` |  `#ffffff` |
| --color-dropdown-border |  `#3a3a3a` |  `#606060` |  `#a8a8a8` |  `#dcdcdc` |
| --color-dropdown-item-hover |  `#3f3f3f` |  `#606060` |  `#a8a8a8` |  `#dcdcdc` |
| --color-dropdown-item-selected |  `#519dd6` |  `#5b9bd3` |  `#3868b2` |  `#3d72b9` |
| --color-checkbox |  `#979797` |  `#c8c8c8` |  `#4b4b4b` |  `#6d6d6d` |
| --color-checkbox-hover |  `#cccccc` |  `#ffffff` |  `#232323` |  `#484848` |
| --color-checkbox-disabled |  `#545454` |  `#757575` |  `#8f8f8f` |  `#bdbdbd` |
| --color-scrollbar |  `#2a2a2a` |  `#4c4c4c` |  `#c4c4c4` |  `#ffffff` |
| --color-scrollbar-arrow |  `#727272` |  `#969696` |  `#6f6f6f` |  `#969696` |
| --color-scrollbar-thumb |  `#3f3f3f` |  `#606060` |  `#a8a8a8` |  `#dcdcdc` |
| --color-scrollbar-thumb-hover |  `#545454` |  `#757575` |  `#8f8f8f` |  `#bdbdbd` |
| --color-tooltip-border |  `#767676` |  `#787878` |  `#777777` |  `#777777` |
| --color-header |  `#262626` |  `#434343` |  `#a2a2a2` |  `#dbdbdb` |
| --color-header-border |  `#212121` |  `#383838` |  `#949494` |  `#cccccc` |
---
## After Effects (as gradient scale)
| Variable Name | Darkest | Medium | Lightest |
| --------------------------------- | ------------------------------------------------------------------ | ------------------------------------------------------------------ | ------------------------------------------------------------------ |
| --color-bg |  `#232323` |  `#3c3c3c` |  `#565656` |
| --color-default |  `#8a8a8a` |  `#a3a3a3` |  `#bdbdbd` |
| --color-text-label |  `#8a8a8a` |  `#a3a3a3` |  `#bdbdbd` |
| --color-icon |  `#b2b2b2` |  `#cbcbcb` |  `#e5e5e5` |
| --color-selection |  `#4892cb` |  `#4892cb` |  `#4892cb` |
| --color-divider |  `#2d2d2d` |  `#464646` |  `#606060` |
| --color-btn-default |  `#232323` |  `#3c3c3c` |  `#565656` |
| --color-btn-hover |  `#8a8a8a` |  `#a3a3a3` |  `#bdbdbd` |
| --color-btn-border |  `#8a8a8a` |  `#a3a3a3` |  `#bdbdbd` |
| --color-btn-primary |  `#4885c6` |  `#4885c6` |  `#4885c6` |
| --color-btn-disabled |  `#2a2a2a` |  `#434343` |  `#5d5d5d` |
| --color-btn-active |  `#646464` |  `#7d7d7d` |  `#979797` |
| --color-btn-disabled-text |  `#464646` |  `#5f5f5f` |  `#797979` |
| --color-btn-primary-text |  `#ffffff` |  `#ffffff` |  `#ffffff` |
| --color-btn-pill-hover |  `#8a8a8a` |  `#a3a3a3` |  `#bdbdbd` |
| --color-btn-pill-border |  `#e2e2e2` |  `#fbfbfb` |  `#ffffff` |
| --color-btn-pill-active |  `#8a8a8a` |  `#a3a3a3` |  `#bdbdbd` |
| --color-btn-icon-active |  `#161616` |  `#2f2f2f` |  `#494949` |
| --color-btn-icon-active-border |  `#2e2e2e` |  `#474747` |  `#616161` |
| --color-btn-icon-hover |  `#2a2a2a` |  `#434343` |  `#5d5d5d` |
| --color-btn-icon-hover-border |  `#2e2e2e` |  `#474747` |  `#616161` |
| --color-btn-toolbar-active |  `#161616` |  `#2f2f2f` |  `#494949` |
| --color-btn-toolbar-active-border |  `#2e2e2e` |  `#474747` |  `#616161` |
| --color-btn-toolbar-hover |  `#2a2a2a` |  `#434343` |  `#5d5d5d` |
| --color-btn-toolbar-hover-border |  `#2e2e2e` |  `#474747` |  `#616161` |
| --color-input |  `#161616` |  `#2f2f2f` |  `#494949` |
| --color-input-border |  `#2e2e2e` |  `#474747` |  `#616161` |
| --color-input-text |  `#b2b2b2` |  `#cbcbcb` |  `#e5e5e5` |
| --color-input-focus |  `#e8e8e8` |  `#ffffff` |  `#ffffff` |
| --color-input-focus-border |  `#4892cb` |  `#4892cb` |  `#4892cb` |
| --color-input-focus-text |  `#161616` |  `#2f2f2f` |  `#494949` |
| --color-dropdown |  `#1d1d1d` |  `#363636` |  `#505050` |
| --color-dropdown-active |  `#232323` |  `#3c3c3c` |  `#565656` |
| --color-dropdown-hover |  `#2a2a2a` |  `#434343` |  `#5d5d5d` |
| --color-dropdown-border |  `#2e2e2e` |  `#474747` |  `#616161` |
| --color-dropdown-item |  `#1d1d1d` |  `#363636` |  `#505050` |
| --color-dropdown-item-hover |  `#464646` |  `#5f5f5f` |  `#797979` |
| --color-dropdown-item-selected |  `#4c86c6` |  `#4c86c6` |  `#4c86c6` |
| --color-checkbox |  `#8a8a8a` |  `#a3a3a3` |  `#bdbdbd` |
| --color-checkbox-hover |  `#bababa` |  `#d3d3d3` |  `#ededed` |
| --color-checkbox-disabled |  `#464646` |  `#5f5f5f` |  `#797979` |
| --color-scrollbar |  `#1d1d1d` |  `#363636` |  `#505050` |
| --color-scrollbar-thumb |  `#313131` |  `#4a4a4a` |  `#646464` |
| --color-scrollbar-arrow |  `#919191` |  `#aaaaaa` |  `#c4c4c4` |
| --color-scrollbar-thumb-hover |  `#464646` |  `#5f5f5f` |  `#797979` |
| --color-tooltip-border |  `#777777` |  `#909090` |  `#aaaaaa` |
| --color-header |  `#333333` |  `#4c4c4c` |  `#666666` |
| --color-header-border |  `#161616` |  `#2f2f2f` |  `#494949` |
---
## Todo
- `init()` should assign low-specificity base rules like `font-family: 'Open Sans', sans-serif;`, assign the `<body>` tag's `background-color` to `--color-bg`, and automatically assign the scrollbar's style.
- ~~Support all other apps (6 minimum to cover Typescript / Ovid Editor)~~
- ~~Extend API and documentation~~
## Notes about Host inconsistencies
- Gradient buttons work much differently -- might be worth having a `button-text` variable
- Photoshop's `dropdown` is anomalously white, causing the text to be unreadable -- maybe include a `dropdown-text` variable to combat this
- There should be a `input-disabled` variable