Borders

Interface

Structure

type BorderConfig = {
  width?: BorderWidth;
  color?: Color;
  style?: BorderStyle;
};

interface Borders {
  [key: string]: BorderConfig;
}

type Border = keyof Borders;

Usage

// Types are re-exported for ease of use by other packages
// like @morfeo/core, @morfeo/web or @morfeo/react
import { Border, Borders } from '@morfeo/spec';

Examples

Using the CLI compose command:

borders.morfeo.ts

// Remove this line to add the slice to all of your themes
export const themeName = 'My Theme Name';
// Optional if you name the file borders.morfeo.ts
export const sliceName = 'borders';

export default {
  none: {
    width: 'none',
    style: 'none',
  },
  strong: {
    width: 'm',
    style: 'solid',
    color: 'text',
  },
  medium: {
    width: 's',
    style: 'solid',
    color: 'text',
  },
  thin: {
    width: 'xs',
    style: 'solid',
    color: 'text',
  },
};

Or manually:

borders.ts

import { Borders } from '@morfeo/spec';

const borders: Borders = {
  none: {
    width: 'none',
    style: 'none',
  },
  strong: {
    width: 'm',
    style: 'solid',
    color: 'text',
  },
  medium: {
    width: 's',
    style: 'solid',
    color: 'text',
  },
  thin: {
    width: 'xs',
    style: 'solid',
    color: 'text',
  },
};

theme.ts

import { borders } from './borders';

const myTheme = {
  borders,
  ...restOfTheTheme,
};

morfeo.setTheme('My Theme Name', myTheme);

Properties

In this table is shown the property you pass to morfeo.resolve, the actual CSS property or properties that will be generated, an example of usage, and the correspondent output:

name	css property	example	output
border	border	{ border: "primary"}	{"border":"2px solid #2f2f2f"}
borderTop	borderTop	{ borderTop: "primary"}	{"borderTop":"2px solid #2f2f2f"}
borderLeft	borderLeft	{ borderLeft: "primary"}	{"borderLeft":"2px solid #2f2f2f"}
borderRight	borderRight	{ borderRight: "primary"}	{"borderRight":"2px solid #2f2f2f"}
borderBlock	borderBlock	{ borderBlock: "primary"}	{"borderBlock":"2px solid #2f2f2f"}
borderBottom	borderBottom	{ borderBottom: "primary"}	{"borderBottom":"2px solid #2f2f2f"}
borderInline	borderInline	{ borderInline: "primary"}	{"borderInline":"2px solid #2f2f2f"}
borderBlockEnd	borderBlockEnd	{ borderBlockEnd: "primary"}	{"borderBlockEnd":"2px solid #2f2f2f"}
borderInlineEnd	borderInlineEnd	{ borderInlineEnd: "primary"}	{"borderInlineEnd":"2px solid #2f2f2f"}
borderBlockStart	borderBlockStart	{ borderBlockStart: "primary"}	{"borderBlockStart":"2px solid #2f2f2f"}
borderInlineStart	borderInlineStart	{ borderInlineStart: "primary"}	{"borderInlineStart":"2px solid #2f2f2f"}

Extend Slice with custom properties

If you're using typescript and you add custom colors to your theme configuration, you'll need to merge the default Borders interface with your custom one. We suggest creating a declaration file (for example: morfeo.d.ts or types.d.ts) like the following one:

import { borders } from './path/to/your/custom/borders';

type MyBorders = typeof borders;

declare module '@morfeo/spec' {
  export interface Borders extends MyBorders {}
}

Read more about how to extend the default Morfeo Theme here.