Styling Overview

Styles in corrosive components consist of two parts, Resources which contain the variables and Styles which contain the regular styles.

Default style is DefaultStyle and resources are DefaultResources and DefaultDarkResources which are compiled inline CSS files.

Resources

Resources contain the following variables. note that each colour has 3 variants with multiple shades of the same color.

:root {
  --primary-0: #000000;
  --primary-1: #252525;
  --primary-2: #3b3b3b;
  --secondary-0: #ffffff;
  --secondary-1: #d7d7d7;
  --secondary-2: #afafaf;
  --tertiary-0: #838383;
  --tertiary-1: #656565;
  --tertiary-2: #989898;

  --accent-0: #ff6a00;
  --accent-1: #803500;
  --accent-2: #411c00;
  --success-0: #16ff00;
  --success-1: #0e8f00;
  --success-2: #053800;
  --error-0: #ff0000;
  --error-1: #7c0000;
  --error-2: #4b0000;
  --warning-0: #ffdd00;
  --warning-1: #7c6a00;
  --warning-2: #463c00;

  --width: 0.15rem;
  --corner: 0.5rem;
  --maxCorner: screen;

  --small-icon: 0.8lh;
  --medium-icon: 1lh;
  --large-icon: 1.5lh;
}

You can adjust these variables using the following code.

document.documentElement.style.setProperty('name','value')

Tailwind

You use the following code to use these variables in with tailwind classes.

/** @type {import('tailwindcss').Config} */
export default {
  content: ['./src/**/*.{js,ts,jsx,tsx,mdx}'],
  theme: {
    extend: {
      colors: {
        'primary-0': 'var(--primary-0)',
        'primary-1': 'var(--primary-1)',
        'primary-2': 'var(--primary-2)',
        'secondary-0': 'var(--secondary-0)',
        'secondary-1': 'var(--secondary-1)',
        'secondary-2': 'var(--secondary-2)',
        'tertiary-0': 'var(--tertiary-0)',
        'tertiary-1': 'var(--tertiary-1)',
        'tertiary-2': 'var(--tertiary-2)',
        'accent-0': 'var(--accent-0)',
        'accent-1': 'var(--accent-1)',
        'accent-2': 'var(--accent-2)',
        'success-0': 'var(--success-0)',
        'success-1': 'var(--success-1)',
        'success-2': 'var(--success-2)',
        'error-0': 'var(--error-0)',
        'error-1': 'var(--error-1)',
        'error-2': 'var(--error-2)',
        'warning-0': 'var(--warning-0)',
        'warning-1': 'var(--warning-1)',
        'warning-2': 'var(--warning-2)',
      },
      width: {
        width: 'var(--width)',
        corner: 'var(--corner)',
      },
      padding: {
        width: 'var(--width)',
        corner: 'var(--corner)',
      },
      borderWidth: {
        width: 'var(--width)',
        corner: 'var(--corner)',
      },
      spacing: {
        width: 'var(--width)',
        corner: 'var(--corner)',
      },
      borderRadius: {
        width: 'var(--width)',
        corner: 'var(--corner)',
      },
    },
  },
  plugins: [],
}