design issueshttps://gitlab.coko.foundation/pubsweet/design/-/issues2018-03-19T09:51:47Zhttps://gitlab.coko.foundation/pubsweet/design/-/issues/13Box sizing2018-03-19T09:51:47ZYannis BarlasBox sizingShould we use `box-sizing: border-box` on the themes by default?Should we use `box-sizing: border-box` on the themes by default?https://gitlab.coko.foundation/pubsweet/design/-/issues/12Animations2018-01-26T00:26:52ZYannis BarlasAnimations`styled-components` [lets us](https://www.styled-components.com/docs/basics#animations) easily store animations in js.
It's worth thinking about creating and exposing some common ones so that they could be reused by different component...`styled-components` [lets us](https://www.styled-components.com/docs/basics#animations) easily store animations in js.
It's worth thinking about creating and exposing some common ones so that they could be reused by different components and applications.https://gitlab.coko.foundation/pubsweet/design/-/issues/11Focused elements2018-06-27T15:19:28ZYannis BarlasFocused elementsWe still need to figure out what happens to elements that are focused (eg. buttons, inputs etc).
Potential solutions are a variation on the current color, or maybe an outline like bootstrap does to its elements.We still need to figure out what happens to elements that are focused (eg. buttons, inputs etc).
Potential solutions are a variation on the current color, or maybe an outline like bootstrap does to its elements.https://gitlab.coko.foundation/pubsweet/design/-/issues/10Padding variable2018-06-20T16:16:16ZYannis BarlasPadding variableShould we add a `padding` variable to the theme, that is separate from the `gridUnit`, but could use potentially use it?Should we add a `padding` variable to the theme, that is separate from the `gridUnit`, but could use potentially use it?https://gitlab.coko.foundation/pubsweet/design/-/issues/9Hover / Interaction colors2018-01-26T00:21:18ZYannis BarlasHover / Interaction colorsIt is very common to use a variation of the color of an element when hovering over it to indicate interaction.
It becomes hard though to be generic.
If we were to define a `primaryColor`, then we'd also need a `primaryColorInteracti...It is very common to use a variation of the color of an element when hovering over it to indicate interaction.
It becomes hard though to be generic.
If we were to define a `primaryColor`, then we'd also need a `primaryColorInteraction`.
We could do the same for a `secondaryColor`, but if one were to introduce another one, then you'd need yet another variable for interaction.
A smarter approach might be to use a function on the components along the lines of [this one](https://css-tricks.com/snippets/javascript/lighten-darken-color/) that would shade the current background color of an element.
An alternative approach would be to have one interactive color for all elements, regardless of their current color.
It goes without saying that any of the above could be overriden in a custom theme, so this is more of a question of what is a more sensible default approach.https://gitlab.coko.foundation/pubsweet/design/-/issues/8Scaling function2018-01-26T10:59:52ZYannis BarlasScaling functionAs discussed in the last meeting, we should build a scaling function for heading fonts.
The purpose for this would be to use the base font size (or another font size) and apply a specific scale on it to get the size of a specific head...As discussed in the last meeting, we should build a scaling function for heading fonts.
The purpose for this would be to use the base font size (or another font size) and apply a specific scale on it to get the size of a specific heading.
```
ratio = '4:5'
fontSizeBase = '12px'
fontSizeH3 = scale('h3', ratio, fontSizeBase)
```https://gitlab.coko.foundation/pubsweet/design/-/issues/7Accessibility tools2018-03-22T15:44:57ZYannis BarlasAccessibility toolsWe should find tools that run accessibility tests.
It would be useful if we all ran our designs through the same tools, so that we can be sure that all themes meet the same set of standards.We should find tools that run accessibility tests.
It would be useful if we all ran our designs through the same tools, so that we can be sure that all themes meet the same set of standards.https://gitlab.coko.foundation/pubsweet/design/-/issues/6Athens meet agenda (January 22-24, 2018)2018-01-25T23:57:57ZYannis BarlasAthens meet agenda (January 22-24, 2018)This is the agenda for the upcoming Athens meet.
## Theming
#### Make a list of components in code.
Display three different versions of them side by side, each set of them themed with the coko theme, the elife theme and the vanilla ...This is the agenda for the upcoming Athens meet.
## Theming
#### Make a list of components in code.
Display three different versions of them side by side, each set of them themed with the coko theme, the elife theme and the vanilla theme respectively.
The purpose of this is to use the same set of variables to create three different looks and to validate that the variables cover the requirements for these themes to be produced.
#### Vanilla theme
Discuss and write down the design principles and rationale behind the vanilla theme. This theme should be as generic as possible and created with the purpose of being extended by organisations to fit their own brand look without limiting them.
## Tools
Discuss and compare the tools that should be used to build our designs. If different teams decide to use different tools, we should make sure that the content produced in each tool is interoperable / compliant with the others.
Follow preliminary discussion in #5.
<hr/>
In general, the overall outcome of these three days should be that we solve the basics, so that we can move forward after it with fast and frictionless collaboration.
Will post a summary of the meeting here when we're done.https://gitlab.coko.foundation/pubsweet/design/-/issues/5Design tools2018-03-08T16:20:28Zjulientaqjulien@coko.foundationDesign tools## Requirements
* We need a common format for easily sharable assets
* We should be able to break larger components back down to atoms to build your own bespoke components
* It should be easy to contribute back to the master library/coll...## Requirements
* We need a common format for easily sharable assets
* We should be able to break larger components back down to atoms to build your own bespoke components
* It should be easy to contribute back to the master library/collection through upload or another method
* It should be easy to add components from the library/collection into your software for use
* It should be easy to view all available components, categorised by atoms, molecules, organisms. This should mirror the actual system for clarity between designers and developers
* We should be able to override vanilla styles with our organisation specific styles globally (a good constant trial for our theming system)
* Our assets should work with commonly used software so that others joining can get started easily
* We need to be able to add details to the component library per component to describe purpose and other details
## Proposed tools by category
#### Editing and creation
* inVision Studio (not yet available)
* Sketch
* Figma
* Adobe XD
* Marvel
* UX Pin
* Affinity Designer
#### Sharing and documenting
* Lingo
* Brand ai
* inVision design system manager
* UX Pin
* Marvel
#### Rapid prototyping
* inVision
* Adobe XD
* Marvel
* UX Pinhttps://gitlab.coko.foundation/pubsweet/design/-/issues/4Spacing variables2018-06-20T16:14:57ZYannis BarlasSpacing variablesThe purpose of this issue is to come up with a common list of variables related to spacing for theming in pubsweet applications.
| Elife asset name|Elife suggested variable|Coko suggested variable|Vanilla variable|Notes
|---|---|---|-...The purpose of this issue is to come up with a common list of variables related to spacing for theming in pubsweet applications.
| Elife asset name|Elife suggested variable|Coko suggested variable|Vanilla variable|Notes
|---|---|---|---|---|
|Divider|`$border-width`, `$color-text-dividers`|
|Base spacing value (12px) || `$base-grid`
|Base spacing value x2 (24px) | | `$base-grid` * 2
|Base spacing value x4 (48px) | | `$base-grid` * 4
|Base spacing value x6 (72px) | | `$base-grid` * 6
|Line height spacing||||To be discussed
@Nick @julientaq https://gitlab.coko.foundation/pubsweet/design/-/issues/3Form variables2018-01-17T07:38:53ZYannis BarlasForm variablesThe purpose of this issue is to come up with a common list of variables for theming form inputs in pubsweet applications.
| Elife component name|Image of Elife component|Collabra component name|Image of Collabra component|Elife suggeste...The purpose of this issue is to come up with a common list of variables for theming form inputs in pubsweet applications.
| Elife component name|Image of Elife component|Collabra component name|Image of Collabra component|Elife suggested variable|Coko suggested variable|Vanilla variable|Notes
|---|---|---|---|---|---|---|---|
|Button primary |[Button primary](https://drive.google.com/open?id=1HR9gkCFs7-0QR3pd7tvWE2H2R28uuQ56)|button|[Button](https://ui-staging-zpqsip.gateway.ps.semioticsquares.com/#button) |`$border-radius`, `$color-primary`, `$primary-text-color`|`$button-background` ,`$button-borders`, `$button-border-radius`, `$button-border-color`
Button primary small|[Button primary small](https://drive.google.com/open?id=1vA2IEpBAxK6eYJGz1kNhqa81XONcwFlF)| *na* | *na* |`$border-radius`, `$color-primary`, `$primary-text-color` |`$button-background` ,`$button-borders`, `$button-border-radius`, `$button-border-color` | | the only change in the css would be the font-size (as every size should be in *em* for the atoms, so their size will be set by their parent)
Button secondary|[Button secondary](https://drive.google.com/open?id=1BEza2OI-iR1b1U0Y71LAVk3GjQD9ixmD)|Button secondary|[button](https://ui-staging-zpqsip.gateway.ps.semioticsquares.com/#button)|`$border-radius`, `$border-width`, `$secondary-border-color`| `$button-background` ,`$button-borders`, `$button-border-radius`, `$button-border-color`
Text input|[Text input](https://drive.google.com/open?id=1nfPD9_QGnexMv5H_CnrMGrccHsIJUcGu)|Text field|[text-field](https://ui-staging-zpqsip.gateway.ps.semioticsquares.com/#textfield)|`$border-radius`, `$border-width`, `$color-text-dividers`| `$border-color`, `$border-width`, `$background`
Text area|[Text area](https://drive.google.com/open?id=1TXdUuasJ50drfvy55XUg1f7WOA4uL0xr)|Text area| Not in the style guide yet|`$border-radius`, `$border-width`, `$color-text-dividers`
Select menu|[Select menu](https://drive.google.com/open?id=1rZc6Jz5ejI79iKNfQ6kOn7aGs4JEWs8i)|Menu|[Menu](https://ui-staging-zpqsip.gateway.ps.semioticsquares.com/#menu)|`$border-radius`, `$border-width`, `$color-text-dividers`
Check box|[Check box](https://drive.google.com/open?id=1e4XVh1HJNeX8MXfOzAp9kDc7pjWb4RC2)|checkbox|[checkbox](https://ui-staging-zpqsip.gateway.ps.semioticsquares.com/#checkbox) |`$border-radius`, `$border-width`|`$color-primary`, `$color-text`,|| checkboxes and radio buttons are a little tricky as it's using some specific css for collabra, and i think that elife ones relies on SVG. SVG could be a simple way to change element in the vanilla theme though.
Radio button|[Radio button](https://drive.google.com/open?id=1nDKOmjGgofqshe_sRqBugMj7YBnG1uX6)|radio|[radio](https://ui-staging-zpqsip.gateway.ps.semioticsquares.com/#radio)|`$border-radius`, `$border-width`|`$color-primary`, `$color-text`
https://gitlab.coko.foundation/pubsweet/design/-/issues/2Typography variables2018-01-26T00:02:06ZYannis BarlasTypography variablesThe purpose of this issue is to come up with a common list of typography variables for theming in pubsweet applications.
## Size variables
| Elife asset name|Elife suggested variable|Coko suggested variable|Vanilla variable|Notes
|-...The purpose of this issue is to come up with a common list of typography variables for theming in pubsweet applications.
## Size variables
| Elife asset name|Elife suggested variable|Coko suggested variable|Vanilla variable|Notes
|---|---|---|---|---|
|**Body**|`$font-size-base-in-px`|`$font-size-base`||Base measure to set hierarchy from |
|**Scale**||`$font-size-scale`|| This variable is used to calculate the font size of all elements. Check this link for example http://type-scale.com/|
|**h1**|`$font-size-h1-in-px`|`$font-size * 2`| | This font-size should be based on the scale and the font-size-base, meanwhile, the calculation here is a example of how it could work. (using rem should achieve the same result, but break if we use different font for the body and for other elements, as x-height is different -- check the ressource: https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
|**h2**|`$font-size-h2-in-px`| `$font-size * 1.6` |
|**h3**|`$font-size-h3-in-px`| `$font-size * 1.3` |
|**h4**|`$font-size-h4-in-px`| `$font-size * 1.0` |
|**h5**|`$font-size-h5-in-px`| `$font-size * 1.0` |
|**h6**|`$font-size-h6-in-px`| `$font-size * 1.0` |
|**p**||||inherited from the parent element. For example, if the p is part of an interface element, it will get the `$font-interface` value as it will be used by the parent.
|**li**||||inherited from the parent element. For example, if the p is part of an interface element, it will get the `$font-interface` value as it will be used by the parent.
|**ol**||||inherited from the parent element. For example, if the p is part of an interface element, it will get the `$font-interface` value as it will be used by the parent.
|**label (form)**||||inherited from the parent element. For example, if the p is part of an interface element, it will get the `$font-interface` value as it will be used by the parent.
|**a**|`$link-font-family`, `$link-color`, `$link-font-style`, `$link-font-weight`, `$link-underline-color` |||Link need some styling to be different from the content, let's add some variable that you can change for the link and see what's missing from there.
## Typefaces variables
| Elife asset name|Elife suggested variable|Coko suggested variable|Vanilla variable|Notes
|---|---|---|---|---|
|**Primary font style**|`$font-primary`| | | Collabra font variables are named based on what the font is refering to. Check below.
|**Secondary font style**|`$font-secondary`
|**Contextual label**|`$font-contextual-label`
|**Date**|`$font-contextual-label-date`|||Treated as part of the label|
|**Section label**|`$font-section-label`
|**Teaser header**|`$font-teaser-header`
| *font family set for the whole app* |
|**Author font**| | `$font-author` | | This font will be used for all the element that the author work on: manuscript and form to submit.
|**Reviewer font**| | `$font-reviewer` | | This font will be used for all the element that the reviewer work on: reviewing draft and review letter.
|**Interface font**| | `$font-interface` | | This font is the one use for all the interface element
@julientaq @Nickhttps://gitlab.coko.foundation/pubsweet/design/-/issues/1Color variables2018-01-29T07:20:03ZYannis BarlasColor variablesThe purpose of this issue is to come up with a common list of color variables for theming in pubsweet applications.
The idea is to compare the ideas that elife and coko/collabra have on the subject and find a "vanilla" list that organi...The purpose of this issue is to come up with a common list of color variables for theming in pubsweet applications.
The idea is to compare the ideas that elife and coko/collabra have on the subject and find a "vanilla" list that organisations can build on.
| Elife asset name|Elife suggested variable|Coko suggested variable|Vanilla variable|Notes
|---|---|---|---|---|
|**Primary color**|`$color-primary`|`$color-primary`||This color is the branding main color|
|**Primary secodary**| |`$color-secondary`||This color is the branding secondary color|
|**Interation color**|`$hover-focus`|`$color-action`| | This color is the color used when hovering a button, a link.
|**Text color**|`$color-text`|`$color-text`| | Main color for the text, which should be inherited by all elements
|**Text secondary color**|`$color-text-secondary`| ||What is the use of this color?
|**Text placeholder / disabled color**|`$color-tex-placeholder`
|**Furniture color (dividers)**|`$color-text-dividers`
|**Background color hue**|`$color-text-background-hue`| | | Where is that variable used?
|**Success color**|`$color-success`|`$color-valid`
|**Attention color**|`$attention-color`| `$color-warning`|
|**Attention color**|| `$color-danger`
|**Attention color**|| `$attention-color`
|**light grey **|| || This color comes from editoria alignmentBox, need to be updated
|**grey **|| || This color comes from editoria alignmentBox, need to be updated
|**dark grey**||| | This color comes from editoria alignmentBox, need to be updated
|**whitergba**|| || This color comes from editoria alignmentBox, need to be updated (used for the inset of the alignmentBox)
@julientaq @Nick