Design tokens: o que são e como contribuem para a acessibilidade

Ver planos

export const colors = {
    blue100: "#005BBB",  
    blue200: "#007AFF",  
    gray100: "#F0F0F0",  
    gray200: "#B3B3B3",  
    black: "#1A1A1A",    
    white: "#FFFFFF",  
    yellow100: "#E69500", 
    yellow200: "#FFC300", 
    transparent: "transparent"
};

export const breakpoints = {
    small: "600px",
    medium: "960px",
    large: "1280px",
    extraLarge: "1920px"
};
export const media = {
small: @media (min-width: ${breakpoints.small}),
medium: @media (min-width: ${breakpoints.medium}),
large: @media (min-width: ${breakpoints.large}),
extraLarge: @media (min-width: ${breakpoints.extraLarge})
};

import { colors } from "./colors";
import { breakpoints, media } from "./breakpoints";


export const lightTheme = {
breakpoints,
media,
typography: {
fontSize: {
title: "clamp(1.25rem, 1.5vw, 1.5rem)",
subtitle: "clamp(1rem, 1.2vw, 1.125rem)",
body: "clamp(0.875rem, 1vw, 1rem)"
},
fontFamily: {
primary: "sans-serif",
secondary: "serif"
}
},
colors: {
background: {
primary: colors.gray100,
secondary: colors.white
},
text: {
title: colors.black,
body: colors.black,
placeholder: colors.gray200,
button: colors.white
},
primary: colors.blue100,
secondary: colors.blue200,
focus: colors.yellow100,
disabled: colors.gray100,
transparent: colors.transparent
},
padding: {
small: "0.5rem",
medium: "1rem",
large: "1.5rem"
},
margin: {
small: "0.5rem",
medium: "1rem",
large: "1.5rem"
},
gap: {
small: "0.5rem",
medium: "1rem",
large: "1.5rem"
},
borderWidth: {
thin: "1px",
thick: "2px"
},
borderRadius: {
small: "4px",
medium: "8px"
},
boxShadow: {
soft: 0px 2px 4px ${colors.black}1A,
medium: 0px 4px 8px ${colors.black}26,
strong: 0px 6px 12px ${colors.black}33
}
};


export const darkTheme = {
...lightTheme,
colors: {
background: {
primary: colors.black,
secondary: colors.black
},
text: {
title: colors.white,
body: colors.white,
placeholder: colors.gray100,
button: colors.white
},
primary: colors.blue200,
secondary: colors.blue100,
focus: colors.yellow200,
disabled: colors.gray200,
transparent: colors.transparent
}
};

padding: {
    small: "0.5rem",
    medium: "1rem",
    large: "1.5rem"
},
margin: {
    small: "0.5rem",
    medium: "1rem",
    large: "1.5rem"
},
gap: {
    small: "0.5rem",
    medium: "1rem",
    large: "1.5rem"
},

borderRadius: {
        small: "4px",
        medium: "8px"
    },
    boxShadow: {
        soft: `0px 2px 4px ${colors.black}1A`,
        medium: `0px 4px 8px ${colors.black}26`,
        strong: `0px 6px 12px ${colors.black}33`
    }
};

import React, { useState } from "react";
import { ThemeProvider as StyledThemeProvider } from "styled-components";
import { lightTheme, darkTheme } from "./theme/theme"; 
import GlobalStyle from "./theme/GlobalStyle"; 
import Button from "./components/Button";
import ToggleButton from "./components/ToggleButton";
import styled from "styled-components";


const AppContainer = styled.main    background-color: ${({ theme }) =&gt; theme.colors.background.primary};     min-height: 100vh;     padding: ${({ theme }) =&gt; theme.padding.medium};     color: ${({ theme }) =&gt; theme.colors.text.body};     display: flex;     flex-direction: column;     gap: ${({ theme }) =&gt; theme.gap.medium};;




const ButtonContainer = styled.div  display: flex;   gap: ${({ theme }) =&gt; theme.gap.medium};   justify-content: center;;




function App() {
const [isDarkMode, setIsDarkMode] = useState(false);
const theme = isDarkMode ? darkTheme : lightTheme;




const toggleTheme = () => setIsDarkMode(!isDarkMode);




return (
<StyledThemeProvider theme={theme}>
<GlobalStyle />
<AppContainer>
<ButtonContainer>
<ToggleButton onClick={toggleTheme}>
{isDarkMode ? "Mudar para tema claro" : "Mudar para tema escuro"}
</ToggleButton>
<Button>Botão acessível</Button>
</ButtonContainer>
</AppContainer>
</StyledThemeProvider>
);
}


export default App;

import { createGlobalStyle } from "styled-components";


const GlobalStyle = createGlobalStyle  body {     margin: 0;     padding: 0;     font-family: ${({ theme }) =&gt; theme.typography.fontFamily.primary};     background-color: ${({ theme }) =&gt; theme.colors.background.primary};     color: ${({ theme }) =&gt; theme.colors.text.body};     transition: all 0.3s ease-in-out;   };


export default GlobalStyle;

import styled from "styled-components";


const Button = styled.button`
background-color: ${({ theme }) => theme.colors.secondary};
color: ${({ theme }) => theme.colors.text.button};
border: ${({ theme }) => theme.borderWidth.thin} solid ${({ theme }) => theme.colors.primary};
border-radius: ${({ theme }) => theme.borderRadius.small};
padding: ${({ theme }) => theme.padding.medium};
cursor: pointer;
transition: all 0.3s ease-in-out;




&:hover {
background-color: ${({ theme }) => theme.colors.secondary};
}




&:focus {
outline: 2px solid ${({ theme }) => theme.colors.focus};
outline-offset: 2px;
}




&:disabled {
background-color: ${({ theme }) => theme.colors.disabled};
cursor: not-allowed;
}
`;


export default Button;

import React, { createContext, useState, useContext } from "react";
import { lightTheme, darkTheme } from "../theme/theme";
import { ThemeProvider as StyledThemeProvider } from "styled-components";


const ThemeContext = createContext();




export const useTheme = () => useContext(ThemeContext);




export const ThemeProvider = ({ children }) => {
const [isDarkMode, setIsDarkMode] = useState(false);
const toggleTheme = () => setIsDarkMode(!isDarkMode);



const theme = isDarkMode ? darkTheme : lightTheme;

return (
    &lt;ThemeContext.Provider value={{ theme, isDarkMode, toggleTheme }}&gt;
        &lt;StyledThemeProvider theme={theme}&gt;{children}&lt;/StyledThemeProvider&gt;
    &lt;/ThemeContext.Provider&gt;
);


};

import styled from "styled-components";
import Button from "../Button";


const ToggleButton = styled(Button)`
background-color: ${({ theme }) => theme.colors.background.primary};
color: ${({ theme }) => theme.colors.primary};
border: ${({ theme }) => theme.borderWidth.thin} solid ${({ theme }) => theme.colors.primary};
border-radius: ${({ theme }) => theme.borderRadius.small};
padding: ${({ theme }) => theme.padding.small};




&:hover {
background-color: ${({ theme }) => theme.colors.background.primary};

color: ${({ theme }) => theme.colors.primary};
}
`;


export default ToggleButton;

function App() {
  const { theme, isDarkMode, toggleTheme } = useTheme();


return (
<AppContainer theme={theme}>
<ButtonContainer>
<ToggleButton onClick={toggleTheme}>
{isDarkMode ? "Mudar para tema claro" : "Mudar para tema escuro"}
</ToggleButton>
<Button>Botão acessível</Button>
</ButtonContainer>
</AppContainer>
);
}


export default App;

Design tokens: o que são e como contribuem para a acessibilidade | Alura Cursos Online

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Outras empresas do Grupo Alun

Outras empresas do Grupo Alun

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Design tokens: o que são e como contribuem para a acessibilidade

Lorena Garcia

Explore por tópico

O que são design tokens?

Acessibilidade e design tokens

Implementação com styled components

Instalação do Styled Components

Criando um botão acessível com tokens

Modo escuro com design tokens

Conclusão

Referências

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Carreiras

Área de Interesse

Aulas ao Vivo - Skills & Go

Senioridade

Eventos Alura

Lorena Garcia

Inscreva-se em nossa Newsletter

Explore por tópico

O que são design tokens?

Acessibilidade e design tokens

Implementação com styled components

Instalação do Styled Components

Criando um botão acessível com tokens

Modo escuro com design tokens

Conclusão

Referências

Leia também