Skip to content

Expose dynamic CSS variables of all conceivable UI colors for any Adobe app and never worry about themes ever again

License

Notifications You must be signed in to change notification settings

dimasxp/starlette

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

10 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

starlette License: MIT

NPM

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.

• Stylesheets

The panel in the center is 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 already include starlette

Install the package from NPM:

npm install starlette

Now import starlette and call the init() function anywhere in your panel:

<!-- In a .vue file -->
<script>
  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:

.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.


Stylesheets


Illustrator

Variable Name Darkest Dark Light Lightest
--color-bg #323232 #323232 #535353 #535353 #b8b8b8 #b8b8b8 #f0f0f0 #f0f0f0
--color-default #cccccc #cccccc #f4f4f4 #f4f4f4 #232323 #232323 #484848 #484848
--color-text-label #979797 #979797 #c7c7c7 #c7c7c7 #232323 #232323 #6d6d6d #6d6d6d
--color-icon #b7b7b7 #b7b7b7 #c2c2c2 #c2c2c2 #414141 #414141 #535353 #535353
--color-selection #5b9bd3 #5b9bd3 #46a0f5 #46a0f5 #3468b2 #3468b2 #3d72b9 #3d72b9
--color-divider #2a2a2a #2a2a2a #4d4d4d #4d4d4d #a8a8a8 #a8a8a8 #dcdcdc #dcdcdc
--color-btn-hover #3f3f3f #3f3f3f #5f5f5f #5f5f5f #c4c4c4 #c4c4c4 #fcfcfc #fcfcfc
--color-btn-border #545454 #545454 #757575 #757575 #232323 #232323 #bdbdbd #bdbdbd
--color-btn-primary #5b9bd3 #5b9bd3 #5b9bd3 #5b9bd3 #3468b2 #3468b2 #3d72b9 #3d72b9
--color-btn-disabled #3a3a3a #3a3a3a #5a5a5a #5a5a5a #b0b0b0 #b0b0b0 #e6e6e6 #e6e6e6
--color-btn-active #1f1f1f #1f1f1f #303030 #303030 #4b4b4b #4b4b4b #bdbdbd #bdbdbd
--color-btn-disabled-text #545454 #545454 #757575 #757575 #8f8f8f #8f8f8f #bdbdbd #bdbdbd
--color-btn-primary-text #ffffff #ffffff #ffffff #ffffff #ffffff #ffffff #ffffff #ffffff
--color-btn-pill-hover #cccccc #cccccc #ffffff #ffffff #232323 #232323 #484848 #484848
--color-btn-pill-active #7f7f7f #7f7f7f #c8c8c8 #c8c8c8 #4b4b4b #4b4b4b #6d6d6d #6d6d6d
--color-btn-pill-border #cccccc #cccccc #ffffff #ffffff #232323 #232323 #484848 #484848
--color-btn-icon-active #2e2e2e #2e2e2e #4f4f4f #4f4f4f #b0b0b0 #b0b0b0 #e6e6e6 #e6e6e6
--color-btn-icon-active-border #4b4b4b #4b4b4b #6c6c6c #6c6c6c #adadad #adadad #dddddd #dddddd
--color-btn-icon-hover #3f3f3f #3f3f3f #606060 #606060 #c4c4c4 #c4c4c4 #fcfcfc #fcfcfc
--color-btn-icon-hover-border #4b4b4b #4b4b4b #6c6c6c #6c6c6c #adadad #adadad #dddddd #dddddd
--color-btn-toolbar-active #1f1f1f #1f1f1f #303030 #303030 #969696 #969696 #bdbdbd #bdbdbd
--color-btn-toolbar-active-border #3f3f3f #3f3f3f #575757 #575757 #838383 #838383 #a7a7a7 #a7a7a7
--color-btn-toolbar-hover #292929 #292929 #3e3e3e #3e3e3e #dcdcdc #dcdcdc #fafafa #fafafa
--color-btn-toolbar-hover-border #4b4b4b #4b4b4b #5a5a5a #5a5a5a #b4b4b4 #b4b4b4 #bdbdbd #bdbdbd
--color-input #262626 #262626 #464646 #464646 #e3e3e3 #e3e3e3 #ffffff #ffffff
--color-input-border #3a3a3a #3a3a3a #606060 #606060 #a8a8a8 #a8a8a8 #dcdcdc #dcdcdc
--color-input-text #cccccc #cccccc #ffffff #ffffff #232323 #232323 #484848 #484848
--color-input-focus #ffffff #ffffff #ffffff #ffffff #e3e3e3 #e3e3e3 #ffffff #ffffff
--color-input-focus-border #5b9bd3 #5b9bd3 #5b9bd3 #5b9bd3 #3468b2 #3468b2 #3d72b9 #3d72b9
--color-input-focus-text #2a2a2a #2a2a2a #4c4c4c #4c4c4c #232323 #232323 #484848 #484848
--color-dropdown #262626 #262626 #4c4c4c #4c4c4c #c4c4c4 #c4c4c4 #fcfcfc #fcfcfc
--color-dropdown-active #1e1e1e #1e1e1e #303030 #303030 #969696 #969696 #bdbdbd #bdbdbd
--color-dropdown-hover #3a3a3a #3a3a3a #5a5a5a #5a5a5a #cecece #cecece #ffffff #ffffff
--color-dropdown-border #3a3a3a #3a3a3a #606060 #606060 #a8a8a8 #a8a8a8 #dcdcdc #dcdcdc
--color-dropdown-item-hover #3f3f3f #3f3f3f #606060 #606060 #a8a8a8 #a8a8a8 #dcdcdc #dcdcdc
--color-dropdown-item-selected #519dd6 #519dd6 #5b9bd3 #5b9bd3 #3868b2 #3868b2 #3d72b9 #3d72b9
--color-checkbox #979797 #979797 #c8c8c8 #c8c8c8 #4b4b4b #4b4b4b #6d6d6d #6d6d6d
--color-checkbox-hover #cccccc #cccccc #ffffff #ffffff #232323 #232323 #484848 #484848
--color-checkbox-disabled #545454 #545454 #757575 #757575 #8f8f8f #8f8f8f #bdbdbd #bdbdbd
--color-scrollbar #2a2a2a #2a2a2a #4c4c4c #4c4c4c #c4c4c4 #c4c4c4 #ffffff #ffffff
--color-scrollbar-arrow #727272 #727272 #969696 #969696 #6f6f6f #6f6f6f #969696 #969696
--color-scrollbar-thumb #3f3f3f #3f3f3f #606060 #606060 #a8a8a8 #a8a8a8 #dcdcdc #dcdcdc
--color-scrollbar-thumb-hover #545454 #545454 #757575 #757575 #8f8f8f #8f8f8f #bdbdbd #bdbdbd
--color-tooltip-border #767676 #767676 #787878 #787878 #777777 #777777 #777777 #777777
--color-header #262626 #262626 #434343 #434343 #a2a2a2 #a2a2a2 #dbdbdb #dbdbdb
--color-header-border #212121 #212121 #383838 #383838 #949494 #949494 #cccccc #cccccc

After Effects (as gradient scale)

Variable Name Darkest Medium Lightest
--color-bg #232323 #232323 #3c3c3c #3c3c3c #565656 #565656
--color-default #8a8a8a #8a8a8a #a3a3a3 #a3a3a3 #bdbdbd #bdbdbd
--color-text-label #8a8a8a #8a8a8a #a3a3a3 #a3a3a3 #bdbdbd #bdbdbd
--color-icon #b2b2b2 #b2b2b2 #cbcbcb #cbcbcb #e5e5e5 #e5e5e5
--color-selection #4892cb #4892cb #4892cb #4892cb #4892cb #4892cb
--color-divider #2d2d2d #2d2d2d #464646 #464646 #606060 #606060
--color-btn-default #232323 #232323 #3c3c3c #3c3c3c #565656 #565656
--color-btn-hover #8a8a8a #8a8a8a #a3a3a3 #a3a3a3 #bdbdbd #bdbdbd
--color-btn-border #8a8a8a #8a8a8a #a3a3a3 #a3a3a3 #bdbdbd #bdbdbd
--color-btn-primary #4885c6 #4885c6 #4885c6 #4885c6 #4885c6 #4885c6
--color-btn-disabled #2a2a2a #2a2a2a #434343 #434343 #5d5d5d #5d5d5d
--color-btn-active #646464 #646464 #7d7d7d #7d7d7d #979797 #979797
--color-btn-disabled-text #464646 #464646 #5f5f5f #5f5f5f #797979 #797979
--color-btn-primary-text #ffffff #ffffff #ffffff #ffffff #ffffff #ffffff
--color-btn-pill-hover #8a8a8a #8a8a8a #a3a3a3 #a3a3a3 #bdbdbd #bdbdbd
--color-btn-pill-border #e2e2e2 #e2e2e2 #fbfbfb #fbfbfb #ffffff #ffffff
--color-btn-pill-active #8a8a8a #8a8a8a #a3a3a3 #a3a3a3 #bdbdbd #bdbdbd
--color-btn-icon-active #161616 #161616 #2f2f2f #2f2f2f #494949 #494949
--color-btn-icon-active-border #2e2e2e #2e2e2e #474747 #474747 #616161 #616161
--color-btn-icon-hover #2a2a2a #2a2a2a #434343 #434343 #5d5d5d #5d5d5d
--color-btn-icon-hover-border #2e2e2e #2e2e2e #474747 #474747 #616161 #616161
--color-btn-toolbar-active #161616 #161616 #2f2f2f #2f2f2f #494949 #494949
--color-btn-toolbar-active-border #2e2e2e #2e2e2e #474747 #474747 #616161 #616161
--color-btn-toolbar-hover #2a2a2a #2a2a2a #434343 #434343 #5d5d5d #5d5d5d
--color-btn-toolbar-hover-border #2e2e2e #2e2e2e #474747 #474747 #616161 #616161
--color-input #161616 #161616 #2f2f2f #2f2f2f #494949 #494949
--color-input-border #2e2e2e #2e2e2e #474747 #474747 #616161 #616161
--color-input-text #b2b2b2 #b2b2b2 #cbcbcb #cbcbcb #e5e5e5 #e5e5e5
--color-input-focus #e8e8e8 #e8e8e8 #ffffff #ffffff #ffffff #ffffff
--color-input-focus-border #4892cb #4892cb #4892cb #4892cb #4892cb #4892cb
--color-input-focus-text #161616 #161616 #2f2f2f #2f2f2f #494949 #494949
--color-dropdown #1d1d1d #1d1d1d #363636 #363636 #505050 #505050
--color-dropdown-active #232323 #232323 #3c3c3c #3c3c3c #565656 #565656
--color-dropdown-hover #2a2a2a #2a2a2a #434343 #434343 #5d5d5d #5d5d5d
--color-dropdown-border #2e2e2e #2e2e2e #474747 #474747 #616161 #616161
--color-dropdown-item #1d1d1d #1d1d1d #363636 #363636 #505050 #505050
--color-dropdown-item-hover #464646 #464646 #5f5f5f #5f5f5f #797979 #797979
--color-dropdown-item-selected #4c86c6 #4c86c6 #4c86c6 #4c86c6 #4c86c6 #4c86c6
--color-checkbox #8a8a8a #8a8a8a #a3a3a3 #a3a3a3 #bdbdbd #bdbdbd
--color-checkbox-hover #bababa #bababa #d3d3d3 #d3d3d3 #ededed #ededed
--color-checkbox-disabled #464646 #464646 #5f5f5f #5f5f5f #797979 #797979
--color-scrollbar #1d1d1d #1d1d1d #363636 #363636 #505050 #505050
--color-scrollbar-thumb #313131 #313131 #4a4a4a #4a4a4a #646464 #646464
--color-scrollbar-arrow #919191 #919191 #aaaaaa #aaaaaa #c4c4c4 #c4c4c4
--color-scrollbar-thumb-hover #464646 #464646 #5f5f5f #5f5f5f #797979 #797979
--color-tooltip-border #777777 #777777 #909090 #909090 #aaaaaa #aaaaaa
--color-header #333333 #333333 #4c4c4c #4c4c4c #666666 #666666
--color-header-border #161616 #161616 #2f2f2f #2f2f2f #494949 #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

About

Expose dynamic CSS variables of all conceivable UI colors for any Adobe app and never worry about themes ever again

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 99.4%
  • CSS 0.6%