Theme

Our design system is opinionated, meaning it adheres to predefined standards and is not open to extensive customization in certain areas, such as colors, fonts, paddings, margins, and more. This opinionated approach is widely adopted by renowned companies globally to maintain consistency and brand identity across their products.

Themability

Most components within the library are designed to be consistent and not accept any props for styling purposes. For example, the Button component won’t allow users to override its design using custom styles. This approach ensures that our design remains intact and in line with our design guidelines. But we also do our best to provide a way to customize the components when needed. For instance, we have a utility class library that can be used to customize the components without needing to write custom css.

Default Theme Values

There are some default theme values that are used across the UI components. These includes colors, ui tokens and some other necessary values which we’ll explain here. You can use these values in your application as well.

You can access the default theme object from @akinon/ui-theme or @akinon/ui-react packages depending on your usage,

import { theme } from '@akinon/ui-theme';
// or
import { theme } from '@akinon/ui-react';
 
const App = () => {
  const primary = theme.colors.primary;
  const secondary = theme.colors.secondary;
 
  return (
    <div>
      <div style={{ backgroundColor: primary }}>Primary</div>
      <div style={{ backgroundColor: secondary }}>Secondary</div>
    </div>
  );
};

Colors

You can explore all of our colors here for visual representation.

import { theme } from '@akinon/ui-theme';
// or
import { theme } from '@akinon/ui-react';
 
const App = () => {
  const {
    akinon,
    azure,
    orange,
    red,
    green,
    purple,
    gray,
    ebonyClay,
    neutral
  } = theme.colors;
 
  // Available 11 shades are:
  // 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950
  // example usage: neutral['500'] or neutral.500
 
  return (
    <div>
      <div style={{ backgroundColor: primary['100'] }}>Primary</div>
      <div style={{ backgroundColor: primary['50'] }}>Primary</div>
      <div style={{ backgroundColor: akinon.500 }}>Primary</div>
    </div>
  );
};

CSS Variables

Our exported getCssVariables function returns css variable objects for our theme’s custom color palette. It outputs CSS variables like:

--color-primary-100: #f0f8ff;
--color-body-fg: #ffffff;
--color-success-500: #52c41a;
--color-{object_key}-{object_key}: {color_value};

You can access getCssVariables function from @akinon/ui-theme or @akinon/ui-react packages depending on your usage. You can get the full list of css variables here.

import { getCssVariables } from '@akinon/ui-theme';
// or
import { getCssVariables } from '@akinon/ui-react';