Hello everyone at auth0. Thank you for the amazing project. I'm havi

Hey <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url=

Expose tokens through a theme api about cosmos HOT 3 CLOSED

rodrigo-picanco commented on June 8, 2024 4

Expose tokens through a theme api

from cosmos.

Comments (3)

francocorreasosa commented on June 8, 2024 3

Hey @rodrigo-picanco 👋 We're working on it, but have to do some prior work like updating styled-components (#1697) and fixing the way we inject global styles (#1699) to the cosmos-consuming apps first.

Thank you for reaching out! 😃

from cosmos.

rodrigo-picanco commented on June 8, 2024 2

Hey @francocorreasosa, thank you for your answer. If there's anything I can do to help let me know.

from cosmos.

ferreiravinicius commented on June 8, 2024

While we can't extend the cosmos theme I managed to tweak fonts in 2 different ways:

Using createGlobalStyle - need to be placed after their CssBaseline

import React from 'react';
import { CssBaseline } from '@auth0/cosmos';
import { createGlobalStyle } from '@auth0/cosmos/styled';

const CustomBaseline = createGlobalStyle`
  body {
    font-family: 'Roboto', 'Arial', 'sans-serif';
  }
`
const App = () => {
  return (
    <>
      <CssBaseline />
      <CustomBaseline /> 
      {/* <YourRealAppGoesHere /> */} 
    </>
  );
}

export default App;

Creating wrapper div with styled

import React from 'react';
import { CssBaseline } from '@auth0/cosmos';
import styled from '@auth0/cosmos/styled';

const Wrapper = styled.div`
  font-family: 'Roboto', 'Arial', 'sans-serif';
`;

const App = () => {
  return (
    <>
      <CssBaseline />
      <Wrapper>
        {/* <YourRealAppGoesHere /> */}
      </Wrapper>
    </>
  );
}

export default App;