Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add token-based CSS theming #11262 #11319

Merged
merged 22 commits into from
Oct 7, 2024
Merged

Add token-based CSS theming #11262 #11319

Show file tree
Hide file tree
Changes from 20 commits
Commits
Show all changes
22 commits
Select commit Hold shift + click to select a range
f7fd65e
Add token-based CSS theming #11262
jacobtylerwalls Aug 9, 2024
e7a0214
Create theme.ts
jacobtylerwalls Aug 12, 2024
e53594a
Stub out some primitive color tokens
jacobtylerwalls Aug 12, 2024
b75e002
Opt-in to primevue css layer
jacobtylerwalls Aug 12, 2024
607e866
Make themes a directory
jacobtylerwalls Aug 12, 2024
eefa2dd
Add css-reset selectors
jacobtylerwalls Aug 13, 2024
373cb9c
Remove "header" token
jacobtylerwalls Aug 19, 2024
14bbab4
Exclude theme files from vitest coverage
jacobtylerwalls Aug 19, 2024
5711938
Remove css-reset selectors and cssLayer
jacobtylerwalls Aug 20, 2024
b1dae72
Use legacy namespace
jacobtylerwalls Aug 20, 2024
e05e33e
Remove font-weight overrides
jacobtylerwalls Aug 20, 2024
6240034
Merge branch 'dev/8.0.x' into jtw/arches-theme
jacobtylerwalls Aug 28, 2024
82e22e5
Merge branch 'dev/8.0.x' into jtw/arches-theme
jacobtylerwalls Aug 29, 2024
174c5ae
Use palette util, avoid overwriting navigation, &c
jacobtylerwalls Sep 10, 2024
a9f4534
Override iconSize token and add custom content gap token
jacobtylerwalls Sep 10, 2024
e31736f
Merge branch 'dev/8.0.x' into jtw/arches-theme
jacobtylerwalls Sep 10, 2024
6914024
Add dark mode selector #11322
jacobtylerwalls Sep 10, 2024
6ebcb72
Add common toast styling
jacobtylerwalls Sep 12, 2024
7c8b6f0
Merge branch 'dev/8.0.x' into jtw/arches-theme
jacobtylerwalls Sep 12, 2024
fabd076
Add fontFamily token
jacobtylerwalls Oct 7, 2024
ed46cf2
Remove some tokens
jacobtylerwalls Oct 7, 2024
f5ff068
Rename navigation color token
jacobtylerwalls Oct 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 1 addition & 13 deletions arches/app/media/js/utils/create-vue-application.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,11 @@ import StyleClass from 'primevue/styleclass';
import ToastService from 'primevue/toastservice';
import Tooltip from 'primevue/tooltip';

import Aura from '@primevue/themes/aura';

import { createApp } from 'vue';
import { createGettext } from "vue3-gettext";

import arches from 'arches';

const DEFAULT_THEME = {
theme: {
preset: Aura,
options: {
prefix: 'p',
darkModeSelector: 'system',
cssLayer: false
}
}
};
import { DEFAULT_THEME } from "@/arches/themes/default.ts";

export default async function createVueApplication(vueComponent, themeConfiguration) {
/**
Expand Down
81 changes: 81 additions & 0 deletions arches/app/src/arches/themes/default.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
import { definePreset, palette } from "@primevue/themes";
import Aura from "@primevue/themes/aura";

const archesColors = Object.freeze({
blue: "#579ddb",
green: "#3acaa1",
red: "#f75d3f",
});

export const ArchesPreset = definePreset(Aura, {
jacobtylerwalls marked this conversation as resolved.
Show resolved Hide resolved
primitive: {
jacobtylerwalls marked this conversation as resolved.
Show resolved Hide resolved
arches: {
...archesColors,
legacy: {
sidebar: "#2d3c4b",
},
},
green: palette(archesColors.green),
red: palette(archesColors.red),
},
semantic: {
primary: palette(archesColors.blue),
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This avoids having to manually override every sky token. On our side, we just have to define one blue color and let primevue deal with gradients.

navigation: {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

IMO this needs to either be removed or have more descriptive naming. arches-navigation-list could refer to many things. arches-navigation-list-padding is better. same with color IMO but I feel less strongly there

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is another one that comes from primevue theming. (Sorry, tried to clarify this by putting "custom" tokens beneath a comment, but as of now we won't have any custom tokens.) This is what we get if we do nothing:

navigation
  item
    {padding: '0.5rem 0.75rem', borderRadius: '{border.radius.sm}', gap: '0.5rem'}
  list 
    {padding: '0.25rem 0.25rem', gap: '2px'}
  submenuIcon
    {size: '0.875rem'}
  submenuLabel
    {padding: '0.5rem 0.75rem', fontWeight: '600'}

I think leaving this in is less opinionated by taking some of these paddings down to 0 or at least equal X/Y

On second look, the navigation-color one is custom, so I'll find a way to rename/clarify.

list: {
padding: "0",
},
item: {
padding: "1rem",
},
color: "{arches.legacy.sidebar}",
},
iconSize: "small",
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would recommend remove this, I don't believe we should have our "default" icon size be small ( or that we should offer a "default" icon size)

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

PrimeVue themes come with an iconSize whether we like it or not (1rem), so I have a feeling we will want to override it with something. But we can definitely punt.

// custom tokens
content: {
gap: "1rem",
},
jacobtylerwalls marked this conversation as resolved.
Show resolved Hide resolved
fontFamily: "system-ui, sans-serif",
},
components: {
jacobtylerwalls marked this conversation as resolved.
Show resolved Hide resolved
button: {
root: {
label: {
fontWeight: 600,
},
},
},
menubar: {
border: {
radius: 0,
},
},
splitter: {
handle: {
background: "{surface.500}",
},
},
toast: {
summary: {
fontSize: "medium",
},
detail: {
fontSize: "small",
},
// custom token
messageIcon: {
marginTop: "0.5rem",
},
},
},
});

export const DEFAULT_THEME = {
theme: {
preset: ArchesPreset,
options: {
prefix: "p",
darkModeSelector: ".arches-dark",
cssLayer: false,
},
},
};
1 change: 1 addition & 0 deletions releases/8.0.0.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ Arches 8.0.0 Release Notes
### Major enhancements
- 9613 Adds editable_future_graphs and the ability to update Graphs without unpublishing.
- 11042 Adds `ResourceInstanceLifecycle`s and `ResourceInstanceLifecycleState`s
- Add token-based CSS theming [#11262](https://github.com/archesproject/arches/issues/11262)

### Additional highlights

Expand Down