Skip to content

Instantly share code, notes, and snippets.

@jthoms1

jthoms1/styles.d.ts

Created July 21, 2020 03:01
Show Gist options
  • Save jthoms1/5e1a8c9c6c9e19e4ce48157b3738a5d0 to your computer and use it in GitHub Desktop.
Save jthoms1/5e1a8c9c6c9e19e4ce48157b3738a5d0 to your computer and use it in GitHub Desktop.
Download ZIP
Much better way of using tokens in Styled Components
Raw
styles.d.ts
import { ThemeType } from 'some/path/to/my/tokens';
import 'styled-components';
declare module 'styled-components' {
export interface DefaultTheme extends ThemeType {}
}
Raw
tokens.ts
export const themeData = {
"fontFamilies": {
"display": "Eina, \"Helvetica Neue\", Helvetica, sans-serif",
"text": "Inter, \"Inter UI\", Helvetica, Arial, sans-serif",
"system": "apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif",
"monospace": "\"SF Mono\", \"Roboto Mono\", Menlo, monospace",
"serif": "\"Adobe Caslon\", Georgia, Times, \"Times New Roman\", serif"
},
"fontWeights": {
"light": 300,
"regular": 400,
"medium": 500,
"semibold": 600,
"bold": 700
},
"fontSizes": [
"0.625rem",
"0.6875rem",
"0.75rem",
"0.8125rem",
"0.875rem",
"1.00rem",
"1.25rem",
"1.50rem",
"2.00rem",
"2.50rem",
"3.00rem",
"3.50rem",
"4.00rem",
"4.50rem",
"5.00rem",
"5.50rem",
"6.00rem"
],
"lineHeights": {
"solid": 1,
"title": 1.12,
"body": 1.6,
"prose": 1.8
},
"letterSpacing": {
"dense": "-0.04em",
"tight": "-0.02em",
"solid": "0.00em",
"wide": "0.04em",
"super": "0.08em",
"extra": "0.16em"
},
"spaces": [
"0.25rem",
"0.50rem",
"0.75rem",
"1.00rem",
"1.25rem",
"1.5rem",
"2.00rem",
"2.50rem",
"3.00rem",
"4.00rem",
"5.00rem",
"6.00rem",
"8.00rem",
"10.00rem",
"12.00rem",
"14.00rem",
"16.00rem"
],
"breakpoints": [
"640px",
"768px",
"1024px",
"1280px"
],
"radii": [
"0px",
"6px",
"8px",
"16px",
"100%"
],
"border": {
"regular": "1px solid",
"dashed": "1px dashed",
"heavy": "2px solid"
},
"elevation": [
"none",
"0px 1px 2px rgba(2, 8, 20, 0.10), 0px 0px 1px rgba(2, 8, 20, 0.08)",
"0px 2px 4px rgba(2, 8, 20, 0.10), 0px 1px 2px rgba(2, 8, 20, 0.08)",
"0px 4px 8px rgba(2, 8, 20, 0.08), 0px 2px 4px rgba(2, 8, 20, 0.08)",
"0px 8px 16px rgba(2, 8, 20, 0.08), 0px 4px 8px rgba(2, 8, 20, 0.08)",
"0px 16px 32px rgba(2, 8, 20, 0.08), 0px 8px 16px rgba(2, 8, 20, 0.08)",
"0px 32px 64px rgba(2, 8, 20, 0.08), 0px 16px 32px rgba(2, 8, 20, 0.10)"
],
"duration": {
"instantly": "0s",
"quickly": "0.15s"
},
"colors": {
"black": "#000000",
"white": "#ffffff",
"blue": {
"0": "#f0f6ff",
"10": "#e3edff",
"20": "#cddfff",
"30": "#b2ceff",
"40": "#97bdff",
"50": "#7cabff",
"60": "#639bff",
"70": "#4d8dff",
"80": "#3880ff",
"90": "#1b6dff",
"100": "#0054e9"
},
"gray": {
"0": "#f3f3f3",
"10": "#e4e4e4",
"20": "#c8c8c8",
"30": "#aeaeae",
"40": "#959595",
"50": "#818181",
"60": "#6d6d6d",
"70": "#5f5f5f",
"80": "#474747",
"90": "#2f2f2f",
"100": "#141414"
},
"carbon": {
"0": "#eef1f3",
"10": "#d7dde2",
"20": "#b4bcc6",
"30": "#98a2ad",
"40": "#7d8894",
"50": "#677483",
"60": "#556170",
"70": "#434f5e",
"80": "#35404e",
"90": "#222d3a",
"100": "#03060b"
},
"indigo": {
"0": "#fbfbfd",
"10": "#f6f8fb",
"20": "#e9edf3",
"30": "#dee3ea",
"40": "#ced6e0",
"50": "#b2becd",
"60": "#92a0b3",
"70": "#73849a",
"80": "#445b78",
"90": "#2d4665",
"100": "#001a3a"
},
"green": {
"0": "#effff3",
"10": "#e7ffee",
"20": "#d0ffdd",
"30": "#b8ffcb",
"40": "#97ffb3",
"50": "#71f895",
"60": "#4ef27a",
"70": "#31e962",
"80": "#18dd4c",
"90": "#00d338",
"100": "#00b831"
},
"lime": {
"0": "#f8fff0",
"10": "#f2ffe1",
"20": "#eeffd8",
"30": "#e5ffc3",
"40": "#d8ffa7",
"50": "#c8ff83",
"60": "#b7f964",
"70": "#a7f544",
"80": "#97ec2d",
"90": "#87e017",
"100": "#75d100"
},
"lavender": {
"0": "#f6f8ff",
"10": "#e5ebff",
"20": "#ced9ff",
"30": "#b6c6ff",
"40": "#9fb5ff",
"50": "#8aa4ff",
"60": "#7493ff",
"70": "#597eff",
"80": "#3c67ff",
"90": "#194bfd",
"100": "#0033e8"
},
"purple": {
"0": "#f4f4ff",
"10": "#e9eaff",
"20": "#d0d2ff",
"30": "#b6b9f9",
"40": "#9a99fc",
"50": "#8482fb",
"60": "#786df9",
"70": "#6e5afd",
"80": "#6030ff",
"90": "#4712fb",
"100": "#3400e5"
},
"pink": {
"0": "#fff2fb",
"10": "#ffe3f6",
"20": "#ffd4f1",
"30": "#ffc7ec",
"40": "#ffb6e8",
"50": "#ff9cdf",
"60": "#fc82d5",
"70": "#f567c8",
"80": "#ef4cbb",
"90": "#f02fb2",
"100": "#e410a1"
},
"red": {
"0": "#fff2f2",
"10": "#ffdddd",
"20": "#ffc8c7",
"30": "#ffb6b5",
"40": "#ff9e9c",
"50": "#ff8a88",
"60": "#ff7370",
"70": "#ff605b",
"80": "#ff4747",
"90": "#ff201a",
"100": "#e70700"
},
"orange": {
"0": "#fff5f0",
"10": "#ffede5",
"20": "#ffdfd1",
"30": "#ffd0bc",
"40": "#ffc0a5",
"50": "#ffaf8c",
"60": "#ff9b70",
"70": "#ff8753",
"80": "#ff7336",
"90": "#ff5b13",
"100": "#eb4700"
},
"yellow": {
"0": "#fffbef",
"10": "#fff8e3",
"20": "#fff6d8",
"30": "#fff3c9",
"40": "#ffedad",
"50": "#ffe78f",
"60": "#ffe072",
"70": "#ffd84d",
"80": "#ffd130",
"90": "#ffc805",
"100": "#f5bf00"
},
"aqua": {
"0": "#f0fff9",
"10": "#e5fff6",
"20": "#d5ffef",
"30": "#c0ffe8",
"40": "#aaffe0",
"50": "#90fbd4",
"60": "#70f6c5",
"70": "#4deeb2",
"80": "#32e2a1",
"90": "#00db8a",
"100": "#00cc80"
},
"teal": {
"0": "#eefeff",
"10": "#dffdff",
"20": "#d0fdff",
"30": "#bbfcff",
"40": "#a2fcff",
"50": "#8bfbff",
"60": "#73f6fb",
"70": "#55ecf2",
"80": "#35e2e9",
"90": "#1bd2d9",
"100": "#00b9c0"
},
"cyan": {
"0": "#f3faff",
"10": "#e8f5ff",
"20": "#d3ecff",
"30": "#bfe4ff",
"40": "#a7daff",
"50": "#8dcfff",
"60": "#77c6ff",
"70": "#62bdff",
"80": "#46b1ff",
"90": "#24a3ff",
"100": "#0091fa"
}
}
} as const;
export type ThemeType = typeof themeData;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment