How to use reactackle-core - 9 common examples

const size = ({ theme: themeFromProvider }) => {
  const theme = extractThemeOrDefault(themeFromProvider);

  const {
    maxWidth,
  } = theme.reactackle.components.breadcrumbs.item;

  return css`
    ${maxWidth && `max-width: ${getValueString(maxWidth)};`}
  `;
};

const iconSize = ({ theme: themeFromProvider }) => {
  const theme = extractThemeOrDefault(themeFromProvider);
  const {
    width,
    height,
    imgSize,
  } = theme.reactackle.components.sidebar.toggleButton.icon;

  return css`    
    ${iconSizeMixin(
      getValueString(height),
      getValueString(imgSize || height),
      getValueString(width || height),
    )}
  `;
};

const iconStyleProps = ({
  theme: themeFromProvider,
}) => {
  const theme = extractThemeOrDefault(themeFromProvider);
  const path = theme.reactackle.components.button;
  const opacityAmount = path.iconOpacity;

  return css`
    opacity: ${opacityAmount};   
    
    svg {
      fill: currentColor;
    }
  `;
};

const size = ({ theme: themeFromProvider }) => {
  const theme = extractThemeOrDefault(themeFromProvider);
  const {
    minHeight,
    paddingY,
    paddingX,
  } = theme.reactackle.components.menu.item;

  return css`
    min-height: ${getValueString(minHeight)};
    padding: ${getValueString(paddingY)} ${getValueString(paddingX)};
  `;
};

const iconBase = ({ theme: themeFromProvider }) => {
  const theme = extractThemeOrDefault(themeFromProvider);
  const { iconSpacing } = theme.reactackle.components.textfield.iconInner;

  return `
    margin-right: ${getValueString(iconSpacing)};
  `;
};

const style = ({ theme: themeFromProvider, customThickness }) => {
  const componentTheme =
    extractThemeOrDefault(themeFromProvider).reactackle.components.progress;
  
  const { strokeSize } = componentTheme.circle.strokeSize;

  return css`
    stroke-width: ${getValueString(customThickness || strokeSize)};
  `;
};

const style = ({ theme: themeFromProvider }) => {
  const componentTheme =
    extractThemeOrDefault(themeFromProvider).reactackle.components.progress;

  return css`
    height: ${getValueString(componentTheme.linear.thickness)};
  `;
};

const style = ({ theme: themeFromProvider }) => {
  const componentTheme =
    extractThemeOrDefault(themeFromProvider).reactackle.components.progress;

  return css`
    height: ${getValueString(componentTheme.linear.thickness)};
  `;
};

const style = ({ theme: themeFromProvider }) => {
  const componentTheme =
    extractThemeOrDefault(themeFromProvider).reactackle.components.progress;

  return css`
    height: ${getValueString(componentTheme.linear.thickness)};
    background-color: ${Color(componentTheme.linear.mainLine.color).string()};
  `;
};