feat(components): Export ThemeProvider #434

nebula-aac · 2023-12-13T02:21:50Z

UPDATE: I have released an alpha version to test, and the theme provider works as intended in a new app. Using this in Meshery UI will require refactoring, which is what I'm working on.

fix #368

Notes for Reviewers

This PR fixes #

Signed commits

Yes, I signed my commits.

fix #368 Signed-off-by: Antonette Caldwell <[email protected]>

add the rest of the components for theme Signed-off-by: Antonette Caldwell <[email protected]>

Signed-off-by: Antonette Caldwell <[email protected]>

nebula-aac · 2023-12-19T15:33:31Z

Ignore the merge conflict, this is only because I release an alpha at v0.13, and I can clean this up when it is approved

leecalcote · 2023-12-20T15:44:34Z

packages/components/src/theme/colors.ts

+  hover: darkTeal.dark
+};
+
+export const tabeMenu = {


I wonder if this is an erroneous "e".

Good eye, Ill make changes

leecalcote · 2023-12-20T16:06:28Z

packages/components/src/theme/components/cssbaseline.modifier.ts

+      src: 
+        local('QanelasSoftRegular'),
+        local('Quanelas Soft Regular'),
+        url('/assets/fonts/QanelasSoftRegular.woff2') format('woff2');


It's nice to see that we're preferring woff2.

leecalcote · 2023-12-20T16:07:09Z

packages/components/src/theme/index.tsx

+function SistentThemeProvider({
+  children,
+  emotionCache,
+  initialMode = 'light'


Suggested change

initialMode = 'light'

initialMode = 'dark'

leecalcote · 2023-12-20T16:07:46Z

packages/components/src/theme/typography.ts

+  return {
+    fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','),
+    body1: {
+      fontFamily: ['Open Sans', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','),


@Rexford74 look! 👀 🙂

Hmm.. nice. Seems the font pairing is being incorporated 🙂

leecalcote · 2023-12-20T16:08:22Z

packages/components/src/theme/typography.ts

+    fontFamily: ['Qanelas Soft Regular', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','),
+    body1: {
+      fontFamily: ['Open Sans', 'Roboto', 'Helvectica', 'Arial', 'sans-serif'].join(','),
+      fontSize: '16px'


@Rexford74 do we have our fonts defined in rem? If so, could you update the list here? If not, could we?

It's supposed to be rem. I have different theme palettes, so I forgot to add change px to rem here

Yes, @leecalcote. They are defined in both rem and px. Not only font sizes though.. even line heights are defined in rem and px as well. The font weight for the different sizes was also specified, but I think it is still subject to review.
The idea is not to have too many options to choose from and ensure efficiency in application of the fonts.

rem and only rem is needed.

Well, actually, including px was for designers using Sistent since rem is not a unit for designing in Figma. I included the rem units specifically because of the engineering end of things to make for seamless handoff.
If I misunderstand your point, please kindly clarify. However, this is the reasoning behind having both units available on Sistent.

sudhanshutech · 2023-12-22T05:20:50Z

@nebula-aac when you get time can you quickly toss a doc/readme, i was testing with inline styling but i was getting confused

Signed-off-by: Antonette Caldwell <[email protected]>

nebula-aac · 2024-01-08T23:04:54Z

@sudhanshutech What issues were you having?

…nto 368-themeprovider Signed-off-by: Antonette Caldwell <[email protected]>

Signed-off-by: Antonette Caldwell <[email protected]>

leecalcote · 2024-01-13T17:34:53Z

Yay!

leecalcote · 2024-01-13T17:35:00Z

@senali-d @sudhanshutech fyi

feat(components): Export ThemeProvider

4c6864b

fix #368 Signed-off-by: Antonette Caldwell <[email protected]>

github-actions bot added the component/components label Dec 13, 2023

nebula-aac added pr/draft WIP/Draft pull request and removed component/components labels Dec 13, 2023

nebula-aac mentioned this pull request Dec 13, 2023

[components] feat: Setup ThemeProvider (WIP) #115

Closed

1 task

nebula-aac added the v0.13.0-planning label Dec 13, 2023

nebula-aac force-pushed the 368-themeprovider branch from 4c6864b to b0e3dc6 Compare December 14, 2023 00:11

github-actions bot added the component/components label Dec 14, 2023

feat(components): add fonts to assets

cf39047

add the rest of the components for theme Signed-off-by: Antonette Caldwell <[email protected]>

nebula-aac force-pushed the 368-themeprovider branch from b0e3dc6 to cf39047 Compare December 14, 2023 00:41

nebula-aac added 12 commits December 13, 2023 18:59

chore(components): fix linting issue

a318d99

Signed-off-by: Antonette Caldwell <[email protected]>

style(components): format files

7383b52

Signed-off-by: Antonette Caldwell <[email protected]>

chore(components): publish v0.13.0-alpha.0

e46e3a0

Signed-off-by: Antonette Caldwell <[email protected]>

chore(components): verison bump

30ea6e6

Signed-off-by: Antonette Caldwell <[email protected]>

chore: version bump

421f1ea

Signed-off-by: Antonette Caldwell <[email protected]>

fix(components): return the theme

13e4229

Signed-off-by: Antonette Caldwell <[email protected]>

chore(components): alpha version bump

74e35fc

Signed-off-by: Antonette Caldwell <[email protected]>

chore(componenets): add fonts assets to path

30e1e76

Signed-off-by: Antonette Caldwell <[email protected]>

chore(compoenents): version bump

22596c4

Signed-off-by: Antonette Caldwell <[email protected]>

feat(components): change path to fonts, and add other colors

b48a889

Signed-off-by: Antonette Caldwell <[email protected]>

style(components): format changelog

0d9919b

Signed-off-by: Antonette Caldwell <[email protected]>

chore(components): version bump

2244389

Signed-off-by: Antonette Caldwell <[email protected]>

nebula-aac added the pr/do-not-merge PRs not ready to be merged label Dec 15, 2023

nebula-aac added 7 commits December 15, 2023 09:30

feat(components): add outlined input component

13da43f

Signed-off-by: Antonette Caldwell <[email protected]>

fix(components): fix font path again

f524e6f

Signed-off-by: Antonette Caldwell <[email protected]>

feat(components): add placeholder for button style

b3f2568

Signed-off-by: Antonette Caldwell <[email protected]>

refactor(components): rename sistentprovider to SistentThemeProvider

b114360

Signed-off-by: Antonette Caldwell <[email protected]>

style(components): format CHANGELOG.md

6b7852c

Signed-off-by: Antonette Caldwell <[email protected]>

chore(components): version bump

e6692bb

Signed-off-by: Antonette Caldwell <[email protected]>

feat(components): Move initialMode state into props

a36ddef

Signed-off-by: Antonette Caldwell <[email protected]>

nebula-aac and others added 9 commits December 15, 2023 14:06

chore(componenets): version bump

e33761f

Signed-off-by: Antonette Caldwell <[email protected]>

fix(components): Fix Drawer's color in theme mode

9d5c28a

Signed-off-by: Antonette Caldwell <[email protected]>

chore(components): version bump

cd07a93

Signed-off-by: Antonette Caldwell <[email protected]>

fix(components): add fallback fonts

f937a2f

Signed-off-by: Antonette Caldwell <[email protected]>

chore(components): verison bump

6038573

Signed-off-by: Antonette Caldwell <[email protected]>

fix(components): remove font import

762cae2

Signed-off-by: Antonette Caldwell <[email protected]>

chore(components): version bump

2b6be9c

Signed-off-by: Antonette Caldwell <[email protected]>

chore: update fork

cd77487

Signed-off-by: Antonette Caldwell <[email protected]>

chore: update fork

718e1b8

nebula-aac requested review from leecalcote and aabidsofi19 December 19, 2023 14:23

nebula-aac added ready-for-review and removed pr/do-not-merge PRs not ready to be merged pr/draft WIP/Draft pull request labels Dec 19, 2023

leecalcote reviewed Dec 20, 2023

View reviewed changes

chore: update

e4b1723

Signed-off-by: Antonette Caldwell <[email protected]>

nebula-aac added 2 commits January 8, 2024 23:10

chore: Merge branch 'master' of https://github.com/layer5io/sistent i…

c8c2adf

…nto 368-themeprovider Signed-off-by: Antonette Caldwell <[email protected]>

style: format

b626ec1

Signed-off-by: Antonette Caldwell <[email protected]>

github-actions bot added the component/icons label Jan 8, 2024

nebula-aac merged commit f9b7c8a into master Jan 13, 2024
11 checks passed

nebula-aac deleted the 368-themeprovider branch January 13, 2024 16:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(components): Export ThemeProvider #434

feat(components): Export ThemeProvider #434

nebula-aac commented Dec 13, 2023 •

edited

Loading

nebula-aac commented Dec 19, 2023

leecalcote Dec 20, 2023

nebula-aac Dec 20, 2023

leecalcote Dec 20, 2023

leecalcote Dec 20, 2023

leecalcote Dec 20, 2023

Rexford74 Dec 21, 2023

leecalcote Dec 20, 2023 •

edited

Loading

nebula-aac Dec 20, 2023

Rexford74 Dec 21, 2023 •

edited

Loading

leecalcote Dec 21, 2023

Rexford74 Dec 21, 2023

sudhanshutech commented Dec 22, 2023

nebula-aac commented Jan 8, 2024

leecalcote commented Jan 13, 2024

leecalcote commented Jan 13, 2024

feat(components): Export ThemeProvider #434

feat(components): Export ThemeProvider #434

Conversation

nebula-aac commented Dec 13, 2023 • edited Loading

nebula-aac commented Dec 19, 2023

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

leecalcote Dec 20, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Rexford74 Dec 21, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sudhanshutech commented Dec 22, 2023

nebula-aac commented Jan 8, 2024

leecalcote commented Jan 13, 2024

leecalcote commented Jan 13, 2024

nebula-aac commented Dec 13, 2023 •

edited

Loading

leecalcote Dec 20, 2023 •

edited

Loading

Rexford74 Dec 21, 2023 •

edited

Loading