@ttoss/theme 1.2.2 → 1.2.4

package/src/themes/Bruttal/BruttalTheme.ts

@@ -0,0 +1,256 @@
+import { Theme } from 'theme-ui';
+import { fontSizes } from '../../tokens/fontSizes';
+import { fontWeights } from '../../tokens/fontWeights';
+import { letterSpacings } from '../../tokens/letterSpacings';
+import { space } from '../../tokens/space';
+
+const coreFonts = {
+  main: '"Atkinson Hyperlegible", sans-serif',
+  contrast: '"Work Sans", sans-serif',
+  monospace: '"Inconsolata", sans-serif',
+};
+
+const brandColors = {
+  complimentary: '#f5f5f5',
+  main: '#292c2a',
+  darkNeutral: '#515389',
+  accent: '#0000ff',
+  lightNeutral: '#e3e3e3',
+};
+
+const coreColors = {
+  ...brandColors,
+  gray100: '#f0f1f3',
+  gray200: '#ced1d7',
+  gray300: '#acb1ba',
+  gray400: '#8b919e',
+  gray500: '#6b7280',
+  gray600: '#535863',
+  gray700: '#3b3f46',
+  gray800: '#23252a',
+  gray900: '#0b0b0d',
+  black: '#000000',
+  red100: '#ffebeb',
+  red200: '#fdbfbf',
+  red300: '#f99595',
+  red400: '#f56c6c',
+  red500: '#ef4444',
+  red600: '#e42828',
+  red700: '#c62121',
+  white: '#ffffff',
+};
+
+const coreBorders = {
+  none: '0px solid',
+  thin: '1px solid',
+  medium: '2px solid',
+  thick: '4px solid',
+};
+
+const coreRadii = {
+  sharp: '0px',
+  xs: '2px',
+  sm: '4px',
+  md: '6px',
+  lg: '8px',
+  xl: '12px',
+  '2xl': '16px',
+  '3xl': '24px',
+  circle: '9999px',
+};
+
+export const BruttalTheme: Theme = {
+  /**
+   * Tokens
+   */
+  fontSizes,
+  fontWeights,
+  letterSpacings,
+  space,
+  colors: {
+    background: coreColors.lightNeutral,
+    text: coreColors.gray900,
+    muted: coreColors.gray200,
+    outline: coreColors.gray200,
+    primary: coreColors.main,
+    onPrimary: coreColors.white,
+    secondary: coreColors.gray500,
+    onSecondary: coreColors.white,
+    highlight: coreColors.darkNeutral,
+    onHighlight: coreColors.white,
+    accent: coreColors.accent,
+    onAccent: coreColors.white,
+    neutral: coreColors.white,
+    onNeutral: coreColors.gray900,
+  },
+  fonts: {
+    h1: coreFonts.contrast,
+    h2: coreFonts.contrast,
+    h3: coreFonts.contrast,
+    h4: coreFonts.contrast,
+    h5: coreFonts.contrast,
+    h6: coreFonts.contrast,
+    body: coreFonts.main,
+    highlight: coreFonts.main,
+    caption: coreFonts.monospace,
+  },
+  borders: {
+    default: coreBorders.medium,
+  },
+  radii: {
+    default: coreRadii.sm,
+  },
+  /**
+   * Global styles
+   */
+  styles: {
+    root: {
+      fontFamily: 'body',
+      fontWeight: 'normal',
+    },
+  },
+  /**
+   * Components
+   */
+  buttons: {
+    accent: {
+      backgroundColor: 'accent',
+      color: 'onAccent',
+      fontFamily: 'highlight',
+      fontWeight: 'bold',
+      border: 'default',
+      borderRadius: 'default',
+      borderColor: 'accent',
+      ':hover:not(:active,[disabled])': {
+        backgroundColor: 'highlight',
+        color: 'onHighlight',
+        borderColor: 'highlight',
+      },
+      ':disabled': {
+        cursor: 'default',
+        backgroundColor: 'muted',
+        borderColor: 'muted',
+      },
+    },
+    primary: {
+      backgroundColor: 'primary',
+      color: 'onPrimary',
+      fontFamily: 'body',
+      border: 'default',
+      borderRadius: 'default',
+      borderColor: 'outline',
+      ':hover:not(:active,[disabled])': {
+        backgroundColor: 'highlight',
+        color: 'onHighlight',
+        borderColor: 'highlight',
+      },
+      ':active': {
+        backgroundColor: 'primary',
+        color: 'onPrimary',
+        borderColor: 'outline',
+      },
+      ':disabled': {
+        cursor: 'default',
+        backgroundColor: 'muted',
+        borderColor: 'muted',
+      },
+    },
+    secondary: {
+      backgroundColor: 'secondary',
+      color: 'onSecondary',
+      fontFamily: 'body',
+      border: 'default',
+      borderRadius: 'default',
+      borderColor: 'outline',
+      ':hover:not(:active,[disabled])': {
+        backgroundColor: 'highlight',
+        color: 'onHighlight',
+        borderColor: 'highlight',
+      },
+      ':disabled': {
+        cursor: 'default',
+        backgroundColor: 'muted',
+        borderColor: 'muted',
+      },
+    },
+    neutral: {
+      backgroundColor: 'neutral',
+      color: 'onNeutral',
+      fontFamily: 'body',
+      border: 'default',
+      borderRadius: 'default',
+      borderColor: 'outline',
+      ':hover:not(:active,[disabled])': {
+        backgroundColor: 'highlight',
+        color: 'onHighlight',
+        borderColor: 'highlight',
+      },
+      ':disabled': {
+        cursor: 'default',
+        backgroundColor: 'muted',
+        borderColor: 'muted',
+      },
+    },
+    danger: {
+      color: 'white',
+      backgroundColor: 'danger',
+    },
+  },
+  cards: {
+    primary: {
+      backgroundColor: 'primary',
+      border: '1px solid black',
+      padding: [4, 5],
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      width: 'fit-content',
+    },
+  },
+  forms: {
+    input: {
+      fontFamily: 'body',
+    },
+  },
+  text: {
+    default: {
+      color: 'text',
+      fontFamily: 'body',
+    },
+    title: {
+      fontFamily: 'heading',
+      fontSize: 4,
+      lineSpace: '3.5',
+    },
+    h1: {
+      fontFamily: 'heading',
+      fontSize: '6xl',
+      fontWeight: 'bold',
+      letterSpacing: 'normal',
+    },
+    h2: {
+      fontFamily: 'heading',
+      fontSize: '5xl',
+      fontWeight: 'bold',
+      letterSpacing: 'normal',
+    },
+    h3: {
+      fontFamily: 'heading',
+      fontSize: '4xl',
+      fontWeight: 'bold',
+      letterSpacing: 'normal',
+    },
+    h4: {
+      fontFamily: 'heading',
+      fontSize: '2xl',
+      fontWeight: 'bold',
+      letterSpacing: 'normal',
+    },
+    h5: {
+      fontFamily: 'heading',
+      fontSize: 'xl',
+      fontWeight: 'bold',
+      letterSpacing: 'normal',
+    },
+  },
+};

package/src/tokens/fontSizes.ts

@@ -0,0 +1,16 @@
+export const fontSizes = {
+  '2xs': '0.5rem',
+  xs: '0.75rem',
+  sm: '0.875rem',
+  base: '1rem',
+  lg: '1.125rem',
+  xl: '1.25rem',
+  '2xl': '1.5rem',
+  '3xl': '1.875rem',
+  '4xl': '2.25rem',
+  '5xl': '3rem',
+  '6xl': '3.75rem',
+  '7xl': '4.5rem',
+  '8xl': '6rem',
+  '9xl': '8rem',
+};

package/src/tokens/fontWeights.ts

@@ -0,0 +1,10 @@
+export const fontWeights = {
+  thin: 100,
+  extralight: 200,
+  light: 300,
+  normal: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+  extrabold: 800,
+};

package/src/tokens/letterSpacings.ts

@@ -0,0 +1,8 @@
+export const letterSpacings = {
+  tighter: '-0.05em',
+  tight: '-0.025em',
+  normal: '0em',
+  wide: '0.025em',
+  wider: '0.05em',
+  widest: '0.1em',
+};

package/src/tokens/space.ts

@@ -0,0 +1,15 @@
+export const space = {
+  none: 0,
+  '2xs': '2px',
+  xs: '3px',
+  sm: '5px',
+  md: '8px',
+  lg: '13px',
+  xl: '21px',
+  '2xl': '34px',
+  '3xl': '55px',
+  '4xl': '89px',
+  '5xl': '144px',
+  '6xl': '233px',
+  '7xl': '377px',
+};

package/src/index.spec.ts

@@ -1,8 +0,0 @@
-import * as allConfigs from '.';
-
-it('themes and fonts should be exported', () => {
-  expect(allConfigs.BruttalFonts).toBeDefined();
-  expect(allConfigs.BruttalTheme).toBeDefined();
-  expect(allConfigs.DefaultFonts).toBeDefined();
-  expect(allConfigs.DefaultTheme).toBeDefined();
-});

package/src/themes/bruttalTheme.ts

@@ -1,161 +0,0 @@
-import { Theme } from 'theme-ui';
-
-export const BruttalTheme: Theme = {
-  colors: {
-    text: '#0D0D0D',
-    background: '#fff',
-    backgroundBrand: '#C2C2C2',
-    primary: '#0D0D0D',
-    secondary: '#639',
-    gray: '#555',
-    muted: '#f6f6f6',
-    danger: 'red',
-    accent: '#0000FF',
-    textOnSurface: '#FFFFFF',
-  },
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
-  fonts: {
-    body: '"Inconsolata", sans-serif',
-    heading: '"Work Sans", sans-serif',
-    monospace: '"Inconsolata", sans-serif',
-  },
-  fontSizes: {
-    xxs: '0.5rem',
-    xs: '0.75rem',
-    sm: '0.875rem',
-    base: '1rem',
-    lg: '1.125rem',
-    xl: '1.25rem',
-    '2xl': '1.5rem',
-    '3xl': '1.875rem',
-    '4xl': '2.25rem',
-    '5xl': '3rem',
-    '6xl': '3.75rem',
-    '7xl': '4.5rem',
-    '8xl': '6rem',
-    '9xl': '8rem',
-  },
-  fontWeights: {
-    thin: 100,
-    extralight: 200,
-    light: 300,
-    normal: 400,
-    medium: 500,
-    semibold: 600,
-    bold: 700,
-    extrabold: 800,
-  },
-  letterSpacings: {
-    tighter: '-0.05em',
-    tight: '-0.025em',
-    normal: '0em',
-    wide: '0.025em',
-    wider: '0.05em',
-    widest: '0.1em',
-  },
-  styles: {
-    root: {
-      fontFamily: 'body',
-      fontWeight: 'normal',
-    },
-    a: {
-      color: 'primary',
-      textDecoration: 'underline',
-      cursor: 'pointer',
-      fontFamily: 'body',
-    },
-    progress: {
-      color: 'primary',
-      backgroundColor: 'background',
-    },
-  },
-  borders: [0, '3px solid #0D0D0D'],
-  buttons: {
-    cta: {
-      color: 'white',
-      backgroundColor: 'primary',
-    },
-    muted: {
-      color: 'text',
-      backgroundColor: 'muted',
-    },
-    danger: {
-      color: 'white',
-      backgroundColor: 'danger',
-    },
-    primary: {
-      ':disabled': {
-        backgroundColor: 'backgroundBrand',
-        cursor: 'default',
-      },
-    },
-    secondary: {
-      color: 'text',
-      backgroundColor: 'white',
-      borderColor: 'text',
-      borderWidth: 1,
-      borderStyle: 'solid',
-      ':disabled': {
-        opacity: 0.5,
-        cursor: 'default',
-      },
-    },
-  },
-  cards: {
-    primary: {
-      backgroundColor: 'background',
-      border: '1px solid black',
-      padding: [4, 5],
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      width: 'fit-content',
-    },
-  },
-  forms: {
-    input: {
-      fontFamily: 'body',
-    },
-  },
-  text: {
-    default: {
-      color: 'text',
-      fontFamily: 'body',
-    },
-    title: {
-      fontFamily: 'heading',
-      fontSize: 4,
-      lineSpace: '3.5',
-    },
-    h1: {
-      fontFamily: 'heading',
-      fontSize: '6xl',
-      fontWeight: 'bold',
-      letterSpacing: 'normal',
-    },
-    h2: {
-      fontFamily: 'heading',
-      fontSize: '5xl',
-      fontWeight: 'bold',
-      letterSpacing: 'normal',
-    },
-    h3: {
-      fontFamily: 'heading',
-      fontSize: '4xl',
-      fontWeight: 'bold',
-      letterSpacing: 'normal',
-    },
-    h4: {
-      fontFamily: 'heading',
-      fontSize: '2xl',
-      fontWeight: 'bold',
-      letterSpacing: 'normal',
-    },
-    h5: {
-      fontFamily: 'heading',
-      fontSize: 'xl',
-      fontWeight: 'bold',
-      letterSpacing: 'normal',
-    },
-  },
-};

package/src/themes/defaultFonts.ts

@@ -1,6 +0,0 @@
-export const DefaultFonts = [
-  'https://fonts.googleapis.com/css?family=Asap',
-  'https://fonts.googleapis.com/css?family=Overpass',
-  'https://fonts.googleapis.com/css?family=Overpass+Mono',
-  'https://fonts.googleapis.com/css?family=Flamenco',
-];

package/src/themes/defaultTheme.ts

@@ -1,76 +0,0 @@
-import { Theme } from 'theme-ui';
-
-export const DefaultTheme: Theme = {
-  colors: {
-    text: '#000',
-    background: '#fff',
-    primary: '#07c',
-    secondary: '#639',
-    gray: '#555',
-    muted: '#f6f6f6',
-    danger: 'red',
-  },
-  space: [0, 4, 8, 16, 32, 64, 128, 256, 512, 1024],
-  fonts: {
-    body: '"Asap", sans-serif',
-    heading: '"Overpass", sans-serif',
-    monospace: '"Overpass Mono", sans-serif',
-  },
-  styles: {
-    root: {
-      fontFamily: 'body',
-      fontWeight: 'body',
-    },
-    a: {
-      color: 'primary',
-      textDecoration: 'underline',
-      cursor: 'pointer',
-      fontFamily: 'body',
-    },
-    progress: {
-      color: 'primary',
-      backgroundColor: 'background',
-    },
-  },
-  buttons: {
-    cta: {
-      color: 'white',
-      backgroundColor: 'primary',
-    },
-    muted: {
-      color: 'text',
-      backgroundColor: 'muted',
-    },
-    danger: {
-      color: 'white',
-      backgroundColor: 'danger',
-    },
-  },
-  cards: {
-    primary: {
-      backgroundColor: 'background',
-      border: '1px solid black',
-      padding: [4, 5],
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      width: 'fit-content',
-    },
-  },
-  forms: {
-    input: {
-      fontFamily: 'body',
-    },
-  },
-  text: {
-    default: {
-      color: 'text',
-      fontFamily: 'body',
-    },
-    title: {
-      fontFamily: 'heading',
-      fontSize: 4,
-      lineSpace: '3.5',
-    },
-  },
-};

package/src/themes/fonts.ts

@@ -1,2 +0,0 @@
-export { BruttalFonts } from './bruttalFonts';
-export { DefaultFonts } from './defaultFonts';

package/src/themes/themes.ts

@@ -1,2 +0,0 @@
-export { DefaultTheme } from './defaultTheme';
-export { BruttalTheme } from './bruttalTheme';