The library has its own themes for dark and light modes - every component has it's own color configuration depending on the selected theme.
++ The library has its own themes for dark and light modes - every component has it's own color configuration depending + on the selected theme.{' '} +
Themes can be extended
Global styles set basic style resets and sets 1rem = 16px
-By using `
+ By using `
The library uses tokens instead of hardcoded values for consistency.
+The library uses tokens instead of hardcoded values for consistency.
## Colors @@ -515,6 +515,7 @@ dataSource={[ example:Quick brown fox
, desc:"Basis Grotesque Arabic Pro regular", usage:( +
font-family: "ArabicPro-Regular", sans-serif;
diff --git a/src/stories/guide/Typography.stories.mdx b/src/stories/guide/Typography.stories.mdx
index f4dcd0f..c3b43d0 100644
--- a/src/stories/guide/Typography.stories.mdx
+++ b/src/stories/guide/Typography.stories.mdx
@@ -32,7 +32,7 @@ import { CopyToClipboard, UIThemeProvider, GlobalStyles, Head1, Head2, Head3, He
# Typography
-The library comes with prestyled, themed text elements
+The library comes with prestyled, themed text elements
## Headings in light mode diff --git a/src/styles/theme.ts b/src/styles/theme.ts index 6883cc0..ae07d80 100644 --- a/src/styles/theme.ts +++ b/src/styles/theme.ts @@ -1,73 +1,73 @@ -import colors from "../_util/colors"; -import { DefaultTheme } from "styled-components"; -import { lagoonColors } from "../_util/lagoonColors"; +import colors from '../_util/colors'; +import { DefaultTheme } from 'styled-components'; +import { lagoonColors } from '../_util/lagoonColors'; export const darkTheme: DefaultTheme = { - colorScheme: "dark", - UI: { - backgrounds: { - primary: "#0E1117", - secondary: "#151922", - input: colors.backgrounds.primary.dark, - modal: colors.backgrounds.primary.dark, - dataCard: colors.darkGray, - selection: colors.gray, - lagoonCard: colors.backgrounds.primary.dark, - lagoonCardInverted: colors.backgrounds.primary.light, - footer: colors.backgrounds.primary.light, - header: colors.header.dark, - }, - texts: { - primary: colors.texts.primary.dark, - primaryInverted: colors.texts.primary.light, - label: "#dee2e5", - secondary: colors.texts.secondary.dark, - timeline:colors.texts.timeline.light, - nav:lagoonColors.monoWhite.dark, - }, - borders: { - box: "#D9D9D9", - card:"#fff", - cardInverted:colors.darkGray, - }, - highlights: { - selection: "#497ffa", - }, - notification: colors.backgrounds.primary.dark, - }, + colorScheme: 'dark', + UI: { + backgrounds: { + primary: '#0E1117', + secondary: '#151922', + input: colors.backgrounds.primary.dark, + modal: colors.backgrounds.primary.dark, + dataCard: colors.darkGray, + selection: colors.gray, + lagoonCard: colors.backgrounds.primary.dark, + lagoonCardInverted: colors.backgrounds.primary.light, + footer: colors.backgrounds.primary.light, + header: colors.header.dark, + }, + texts: { + primary: colors.texts.primary.dark, + primaryInverted: colors.texts.primary.light, + label: '#dee2e5', + secondary: colors.texts.secondary.dark, + timeline: colors.texts.timeline.light, + nav: lagoonColors.monoWhite.dark, + }, + borders: { + box: '#D9D9D9', + card: '#fff', + cardInverted: colors.darkGray, + }, + highlights: { + selection: '#497ffa', + }, + notification: colors.backgrounds.primary.dark, + }, }; export const lightTheme: DefaultTheme = { - colorScheme: "light", - UI: { - backgrounds: { - primary: "#101010", - secondary: "#fff", - input: colors.backgrounds.primary.light, - modal: colors.backgrounds.primary.light, - dataCard: colors.gray, - selection: "#e6f4ff", - lagoonCard: colors.backgrounds.primary.light, - lagoonCardInverted: colors.backgrounds.primary.dark, - footer: colors.backgrounds.primary.dark, - header: colors.header.light - }, - texts: { - primary: colors.texts.primary.light, - primaryInverted: colors.texts.primary.dark, - label: "#555", - secondary: colors.texts.secondary.dark, - timeline:colors.texts.timeline.dark, - nav:lagoonColors.monoWhite.light, - }, - borders: { - box: "#75715E", - card:colors.darkGray, - cardInverted:"#fff", - }, - highlights: { - selection: "#497ffa4d", - }, - notification: colors.backgrounds.primary.light, - }, + colorScheme: 'light', + UI: { + backgrounds: { + primary: '#101010', + secondary: '#fff', + input: colors.backgrounds.primary.light, + modal: colors.backgrounds.primary.light, + dataCard: colors.gray, + selection: '#e6f4ff', + lagoonCard: colors.backgrounds.primary.light, + lagoonCardInverted: colors.backgrounds.primary.dark, + footer: colors.backgrounds.primary.dark, + header: colors.header.light, + }, + texts: { + primary: colors.texts.primary.light, + primaryInverted: colors.texts.primary.dark, + label: '#555', + secondary: colors.texts.secondary.dark, + timeline: colors.texts.timeline.dark, + nav: lagoonColors.monoWhite.light, + }, + borders: { + box: '#75715E', + card: colors.darkGray, + cardInverted: '#fff', + }, + highlights: { + selection: '#497ffa4d', + }, + notification: colors.backgrounds.primary.light, + }, }; diff --git a/src/typings/fonts.d.ts b/src/typings/fonts.d.ts index e35fe85..7bbf68b 100644 --- a/src/typings/fonts.d.ts +++ b/src/typings/fonts.d.ts @@ -1,2 +1,2 @@ declare module '*.woff'; -declare module '*.woff2'; \ No newline at end of file +declare module '*.woff2'; diff --git a/src/typings/jpgs.d.ts b/src/typings/jpgs.d.ts index 4b33492..20c9243 100644 --- a/src/typings/jpgs.d.ts +++ b/src/typings/jpgs.d.ts @@ -1 +1 @@ -declare module "*.jpg"; \ No newline at end of file +declare module '*.jpg'; diff --git a/src/typings/styled.d.ts b/src/typings/styled.d.ts index ccad679..8e198c2 100644 --- a/src/typings/styled.d.ts +++ b/src/typings/styled.d.ts @@ -1,44 +1,43 @@ -import "styled-components"; +import 'styled-components'; export interface ThemeObject { - [key: string]: string | ThemeObject; + [key: string]: string | ThemeObject; } export interface UITheme { - colorScheme: "dark" | "light"; - UI: { - backgrounds: { - primary: string; - secondary: string; - input: string; - modal: string; - dataCard: string; - selection: string; - lagoonCard: string; - lagoonCardInverted: string; - footer: string; - header:string; - - }; - texts: { - primary: string; - primaryInverted: string; - label: string; - secondary: string; - timeline: string; - nav: string; - }; - highlights: { - selection: string; - }; - borders: { - box: string; - card: string; - cardInverted: string; - }; - notification: string; - }; + colorScheme: 'dark' | 'light'; + UI: { + backgrounds: { + primary: string; + secondary: string; + input: string; + modal: string; + dataCard: string; + selection: string; + lagoonCard: string; + lagoonCardInverted: string; + footer: string; + header: string; + }; + texts: { + primary: string; + primaryInverted: string; + label: string; + secondary: string; + timeline: string; + nav: string; + }; + highlights: { + selection: string; + }; + borders: { + box: string; + card: string; + cardInverted: string; + }; + notification: string; + }; } -declare module "styled-components" { - export interface DefaultTheme extends UITheme {} +declare module 'styled-components' { + export interface DefaultTheme extends UITheme {} } diff --git a/src/typings/vectors.d.ts b/src/typings/vectors.d.ts index 692d88b..bff9471 100644 --- a/src/typings/vectors.d.ts +++ b/src/typings/vectors.d.ts @@ -1 +1 @@ -declare module "*.svg"; \ No newline at end of file +declare module '*.svg'; diff --git a/tsconfig.json b/tsconfig.json index 9001b7e..048bf46 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,24 +1,23 @@ { "compilerOptions": { - "target": "ESNext", - "lib": ["dom", "DOM.Iterable", "esnext"], - "allowJs": true, - "skipLibCheck": true, - "esModuleInterop": true, - "allowSyntheticDefaultImports": true, - "strict": true, - "forceConsistentCasingInFileNames": true, - "noFallthroughCasesInSwitch": true, - "module": "ESNext", - "moduleResolution": "node", - "resolveJsonModule": true, - "isolatedModules": true, - "jsx": "react-jsx", - "declaration": true, - "outDir": "./dist", - "emitDeclarationOnly": true + "target": "ESNext", + "lib": ["dom", "DOM.Iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "ESNext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "react-jsx", + "declaration": true, + "outDir": "./dist", + "emitDeclarationOnly": true }, "include": ["src", "typings/**/*.d.ts"], "exclude": ["node_modules", "dist", "**/*.stories.tsx"] - } - \ No newline at end of file +}