{ "generated": "by the Showroom build from the components' variant manifests; never edited by hand", "name": "Simbolik Design System", "version": "0.2.2-alpha", "count": 110, "components": [ { "name": "accordion", "title": "Accordion", "status": "candidate", "summary": "A stack of headings that each open to reveal their content, as separate cards or as a flat list divided by rules.", "block": [ "smbk-accordion" ], "parts": [ { "name": "item", "class": "smbk-accordion__item" }, { "name": "summary", "class": "smbk-accordion__summary" }, { "name": "title", "class": "smbk-accordion__title" }, { "name": "caret", "class": "smbk-accordion__caret" }, { "name": "content", "class": "smbk-accordion__content" }, { "name": "divider", "class": "smbk-accordion__divider" } ], "props": [ { "name": "look", "kind": "choice", "values": [ "cards", "flat" ], "default": "cards", "description": "Each item as a raised card, or a flat list separated by dividers. Figma calls this \"Cards\".", "classes": { "cards": "smbk-accordion--look-cards", "flat": "smbk-accordion--look-flat" } }, { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "description": "md for a page; sm for a narrow column such as a settings panel, with smaller text, tighter padding and a smaller caret.", "classes": { "md": "smbk-accordion--size-md", "sm": "smbk-accordion--size-sm" } } ], "page": "https://design.simbolik.ai/components/accordion/", "markdown": "https://design.simbolik.ai/components/accordion.md" }, { "name": "alert", "title": "Alert", "status": "candidate", "summary": "An inline message that stays on the page: an icon, a title, a description, and an optional action or dismiss control.", "block": [ "smbk-alert" ], "parts": [ { "name": "icon", "class": "smbk-alert__icon" }, { "name": "body", "class": "smbk-alert__body" }, { "name": "title", "class": "smbk-alert__title" }, { "name": "description", "class": "smbk-alert__description" }, { "name": "action", "class": "smbk-alert__action" }, { "name": "dismiss", "class": "smbk-alert__dismiss" } ], "props": [ { "name": "tone", "kind": "choice", "values": [ "default", "info", "success", "warning", "danger" ], "default": "default", "description": "Neutral, or one of the four feedback families on their subtle surface. Figma calls this \"Variant\".", "classes": { "default": "smbk-alert--tone-default", "info": "smbk-alert--tone-info", "success": "smbk-alert--tone-success", "warning": "smbk-alert--tone-warning", "danger": "smbk-alert--tone-danger" } } ], "page": "https://design.simbolik.ai/components/alert/", "markdown": "https://design.simbolik.ai/components/alert.md" }, { "name": "alert-dialog", "title": "Alert dialog", "status": "proposed", "summary": "A modal that asks before something that cannot be undone: a title, what will happen, and a cancel and a confirm action. It closes only on them and Escape.", "block": [ "smbk-alert-dialog", "smbk-modal" ], "parts": [ { "name": "header", "class": "smbk-modal__header" }, { "name": "icon", "class": "smbk-modal__icon" }, { "name": "title", "class": "smbk-modal__title" }, { "name": "body", "class": "smbk-modal__body" }, { "name": "footer", "class": "smbk-modal__footer" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "sm", "md" ], "default": "sm", "description": "The greatest width the panel takes: the modal’s two narrower widths, since the question is short.", "classes": { "sm": "smbk-modal--size-sm", "md": "smbk-modal--size-md" } }, { "name": "inline", "kind": "flag", "description": "Shown in place with no scrim, for previews and documentation.", "classes": { "true": "smbk-modal--inline" } } ], "page": "https://design.simbolik.ai/components/alert-dialog/", "markdown": "https://design.simbolik.ai/components/alert-dialog.md" }, { "name": "app-bar", "title": "App bar", "status": "candidate", "summary": "The top bar of an application: brand, navigation links, then search, action buttons, the theme switch and the user, in five looks; the links fold into a menu when they do not fit.", "block": [ "smbk-app-bar" ], "parts": [ { "name": "panel", "class": "smbk-app-bar__panel" }, { "name": "frost", "class": "smbk-app-bar__frost" }, { "name": "bar", "class": "smbk-app-bar__bar" }, { "name": "start", "class": "smbk-app-bar__start" }, { "name": "brand", "class": "smbk-app-bar__brand" }, { "name": "logo", "class": "smbk-app-bar__logo" }, { "name": "badge", "class": "smbk-app-bar__badge" }, { "name": "title", "class": "smbk-app-bar__title" }, { "name": "trail", "class": "smbk-app-bar__trail" }, { "name": "nav", "class": "smbk-app-bar__nav" }, { "name": "end", "class": "smbk-app-bar__end" }, { "name": "search", "class": "smbk-app-bar__search" }, { "name": "actions", "class": "smbk-app-bar__actions" }, { "name": "divider", "class": "smbk-app-bar__divider" }, { "name": "menu-button", "class": "smbk-app-bar__menu-button" }, { "name": "second-row", "class": "smbk-app-bar__second-row" }, { "name": "second-row-nav", "class": "smbk-app-bar__second-row-nav" }, { "name": "menu", "class": "smbk-app-bar__menu" }, { "name": "menu-end", "class": "smbk-app-bar__menu-end" }, { "name": "wide-only", "class": "smbk-app-bar__wide-only" }, { "name": "narrow-only", "class": "smbk-app-bar__narrow-only" } ], "props": [ { "name": "look", "kind": "choice", "values": [ "floating", "floating-hug", "flat", "split", "centred" ], "default": "floating", "description": "Floating: a raised bar with rounded corners and a hairline edge, the links in the true middle. Floating hug: the same bar only as wide as its content, centered. Flat: a square bar with no edge or shadow, a line along its foot. Split: the brand on an island of its own at the start, the links and the end group on one at the end. Centred: the links at the start, the brand in the middle. Figma calls this Style.", "classes": { "floating": "smbk-app-bar--look-floating", "floating-hug": "smbk-app-bar--look-floating-hug", "flat": "smbk-app-bar--look-flat", "split": "smbk-app-bar--look-split", "centred": "smbk-app-bar--look-centred" } }, { "name": "size", "kind": "choice", "values": [ "md", "lg" ], "default": "md", "description": "How large the links in the wide bar are. md is Figma's: the middle navigation item. lg is the large item, as the bar drew them before. The menu keeps its large items either way.", "classes": { "md": "smbk-app-bar--size-md", "lg": "smbk-app-bar--size-lg" } }, { "name": "background", "kind": "choice", "values": [ "on", "off" ], "default": "on", "description": "The bar's own surface. Off drops its fill, edge and shadow so it sits on whatever is behind it; the open menu keeps its surface, as Figma draws the open bar only with one, and a bar that hides on scroll takes the page's own surface while it sticks. Figma: Background (on by default).", "classes": { "on": "smbk-app-bar--background-on", "off": "smbk-app-bar--background-off" } }, { "name": "line", "kind": "choice", "values": [ "on", "off" ], "default": "on", "description": "The hairline along the foot of a flat bar. Only the flat look draws it. Figma: Line (on by default).", "classes": { "on": "smbk-app-bar--line-on", "off": "smbk-app-bar--line-off" } }, { "name": "logo", "kind": "choice", "values": [ "on", "off" ], "default": "on", "description": "The brand at the start of the bar in a wide space. Off drops it, for a page whose logo sits elsewhere, such as at the top of a sidebar that runs the page's full height; the links then start the bar, and a badge stays. The narrow bar keeps its logo either way.", "classes": { "on": "smbk-app-bar--logo-on", "off": "smbk-app-bar--logo-off" } }, { "name": "links", "kind": "choice", "values": [ "between", "start", "end" ], "default": "between", "description": "Where the links sit in a wide space. Between: in the middle of the bar, as Figma draws it. Start: right after the brand, the free room after them, as the Showroom App bar draws them. End: pushed to the end, just before the search, buttons and theme switch, for a bar laid over a page whose middle is its own, such as a home page with a large picture behind it. Start and end are not in the App bar component in Figma. The menu is the same either way.", "classes": { "between": "smbk-app-bar--links-between", "start": "smbk-app-bar--links-start", "end": "smbk-app-bar--links-end" } }, { "name": "nav-type", "kind": "choice", "values": [ "links", "tabs" ], "default": "links", "description": "How the wide bar draws its links. Links: navigation items. Tabs: small line tabs that fill the bar's whole height, the current page's underline on the bar's foot; the bar is then 64 tall. Either way they are links, the current one marked as the current page, and the menu lists them as navigation items. Figma: AppBarNav's Type.", "classes": { "links": "smbk-app-bar--nav-type-links", "tabs": "smbk-app-bar--nav-type-tabs" } }, { "name": "fold", "kind": "choice", "values": [ "none", "actions", "links" ], "default": "none", "description": "What has folded away in a wide space too narrow for the whole row. Actions: the action buttons are gone. Links: the actions and the links are gone and the menu button shows, opening the links under the bar. The wrapper measures the row and sets it; markup written by hand sets it the same way.", "classes": { "none": "smbk-app-bar--fold-none", "actions": "smbk-app-bar--fold-actions", "links": "smbk-app-bar--fold-links" } }, { "name": "expanded", "kind": "flag", "description": "The menu is open under the bar: in a narrow space, or in a wide one whose links have folded away.", "classes": { "true": "smbk-app-bar--expanded" } }, { "name": "hide-on-scroll", "kind": "flag", "description": "In a narrow space, the bar stays at the top of the window while the page scrolls, slides up out of sight as the reader scrolls down and comes back as they scroll up. For a page that scrolls the window; turned on page by page. Has no effect in a wide space. Not in Figma.", "classes": { "true": "smbk-app-bar--hide-on-scroll" } }, { "name": "scrolled-away", "kind": "flag", "description": "The bar has slid up out of sight. The wrapper sets it while the reader scrolls down a page with hide on scroll on; plain markup sets it the same way. Has no effect without hide on scroll or in a wide space.", "classes": { "true": "smbk-app-bar--scrolled-away" } }, { "name": "zone", "kind": "flag", "description": "The bar's own room, as Figma draws it: the medium inset above and below a floating bar and a step in from the sides, and its row held to the content width. Off by default, so a page that already leaves room around its bar keeps its own.", "classes": { "true": "smbk-app-bar--zone" } }, { "name": "sidebar-start", "kind": "flag", "description": "In a wide space the start is as wide as the expanded sidebar, its logo the sidebar's logo size and in line with the sidebar's rows, so links that follow it (links start) begin where the page beside a sidebar begins. For a bar across the top of a page with a sidebar under it at the same side gutter as the bar's own inset. Not in the App bar component in Figma; drawn in the Showroom App bar.", "classes": { "true": "smbk-app-bar--sidebar-start" } }, { "name": "frosted", "kind": "flag", "description": "A blur behind the bar, strongest at the top and gone by its foot, so what scrolls under it is never read sharply there. For a bar with its background off, or with its own room. Not drawn when the system asks for forced colors.", "classes": { "true": "smbk-app-bar--frosted" } } ], "page": "https://design.simbolik.ai/components/app-bar/", "markdown": "https://design.simbolik.ai/components/app-bar.md" }, { "name": "avatar", "title": "Avatar", "status": "candidate", "summary": "A person or thing as a circle: initials, an icon, or a picture, in six sizes.", "block": [ "smbk-avatar" ], "parts": [ { "name": "initials", "class": "smbk-avatar__initials" }, { "name": "icon", "class": "smbk-avatar__icon" }, { "name": "image", "class": "smbk-avatar__image" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "2xs", "xs", "sm", "md", "lg", "xl" ], "default": "xl", "classes": { "2xs": "smbk-avatar--size-2xs", "xs": "smbk-avatar--size-xs", "sm": "smbk-avatar--size-sm", "md": "smbk-avatar--size-md", "lg": "smbk-avatar--size-lg", "xl": "smbk-avatar--size-xl" } }, { "name": "tone", "kind": "choice", "values": [ "default", "brand", "inverse" ], "default": "default", "description": "Default sits on the raised surface; brand on the brand fill; inverse on the inverse fill.", "classes": { "default": "smbk-avatar--tone-default", "brand": "smbk-avatar--tone-brand", "inverse": "smbk-avatar--tone-inverse" } }, { "name": "type", "kind": "choice", "values": [ "initials", "icon", "image" ], "default": "initials", "description": "What fills the circle. Figma calls the image type \"Avatar\".", "classes": { "initials": "smbk-avatar--type-initials", "icon": "smbk-avatar--type-icon", "image": "smbk-avatar--type-image" } } ], "page": "https://design.simbolik.ai/components/avatar/", "markdown": "https://design.simbolik.ai/components/avatar.md" }, { "name": "avatar-group", "title": "Avatar group", "status": "experimental", "summary": "Overlapping avatars for the people on a project or a thread, and a count of the rest.", "block": [ "smbk-avatar-group" ], "parts": [ { "name": "item", "class": "smbk-avatar-group__item" }, { "name": "more", "class": "smbk-avatar-group__more" }, { "name": "hidden", "class": "smbk-avatar-group__hidden" } ], "props": [], "page": "https://design.simbolik.ai/components/avatar-group/", "markdown": "https://design.simbolik.ai/components/avatar-group.md" }, { "name": "avatar-with-name", "title": "Avatar with name", "status": "experimental", "summary": "A person's avatar with their name beside it and an optional second line, such as their role.", "block": [ "smbk-avatar-with-name" ], "parts": [ { "name": "avatar", "class": "smbk-avatar-with-name__avatar" }, { "name": "text", "class": "smbk-avatar-with-name__text" }, { "name": "name", "class": "smbk-avatar-with-name__name" }, { "name": "second-line", "class": "smbk-avatar-with-name__second-line" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "xs", "sm", "md", "lg" ], "default": "xs", "description": "The avatar's size of the same name; the gap, the name and the second line grow with it.", "classes": { "xs": "smbk-avatar-with-name--size-xs", "sm": "smbk-avatar-with-name--size-sm", "md": "smbk-avatar-with-name--size-md", "lg": "smbk-avatar-with-name--size-lg" } } ], "page": "https://design.simbolik.ai/components/avatar-with-name/", "markdown": "https://design.simbolik.ai/components/avatar-with-name.md" }, { "name": "badge", "title": "Badge", "status": "candidate", "summary": "A small status marker: a soft or flat pill with a label and optional icons.", "block": [ "smbk-badge" ], "parts": [ { "name": "icon", "class": "smbk-badge__icon" }, { "name": "label", "class": "smbk-badge__label" } ], "props": [ { "name": "look", "kind": "choice", "values": [ "soft", "flat" ], "default": "soft", "description": "Soft, the default, is the subtle surface inside an edge of the tone's color; flat is the tone's full surface. The default tone looks the same in soft and flat.", "classes": { "soft": "smbk-badge--look-soft", "flat": "smbk-badge--look-flat" } }, { "name": "tone", "kind": "choice", "values": [ "default", "success", "info", "warning", "danger" ], "default": "default", "description": "A see-through gray that shows on every surface, or one of the four feedback families.", "classes": { "default": "smbk-badge--tone-default", "success": "smbk-badge--tone-success", "info": "smbk-badge--tone-info", "warning": "smbk-badge--tone-warning", "danger": "smbk-badge--tone-danger" } }, { "name": "size", "kind": "choice", "values": [ "lg", "md", "sm" ], "default": "lg", "description": "The pill scale shared with the chip and the tag: 32, 24 and 20 tall.", "classes": { "lg": "smbk-badge--size-lg", "md": "smbk-badge--size-md", "sm": "smbk-badge--size-sm" } } ], "page": "https://design.simbolik.ai/components/badge/", "markdown": "https://design.simbolik.ai/components/badge.md" }, { "name": "banner", "title": "Banner", "status": "candidate", "summary": "A one-line announcement across the top of a site or app: a short message, an optional link and an optional dismiss control, on a full-width strip.", "block": [ "smbk-banner" ], "parts": [ { "name": "content", "class": "smbk-banner__content" }, { "name": "lead", "class": "smbk-banner__lead" }, { "name": "icon", "class": "smbk-banner__icon" }, { "name": "message", "class": "smbk-banner__message" }, { "name": "link", "class": "smbk-banner__link" }, { "name": "dismiss", "class": "smbk-banner__dismiss" } ], "props": [ { "name": "tone", "kind": "choice", "values": [ "default", "info", "success", "warning", "danger" ], "default": "default", "description": "Neutral, or one of the four feedback families on their subtle surface with their border beneath, each with its own icon.", "classes": { "default": "smbk-banner--tone-default", "info": "smbk-banner--tone-info", "success": "smbk-banner--tone-success", "warning": "smbk-banner--tone-warning", "danger": "smbk-banner--tone-danger" } } ], "page": "https://design.simbolik.ai/components/banner/", "markdown": "https://design.simbolik.ai/components/banner.md" }, { "name": "bar-chart", "title": "Bar chart", "status": "experimental", "summary": "Amounts side by side, such as a week of days or a month: plain bars, or bars stacked by kind with a legend, over a value axis and light grid lines.", "block": [ "smbk-bar-chart" ], "parts": [ { "name": "legend", "class": "smbk-bar-chart__legend" }, { "name": "body", "class": "smbk-bar-chart__body" }, { "name": "y-axis", "class": "smbk-bar-chart__y-axis" }, { "name": "y-label", "class": "smbk-bar-chart__y-label" }, { "name": "plot", "class": "smbk-bar-chart__plot" }, { "name": "grid", "class": "smbk-bar-chart__grid" }, { "name": "gridline", "class": "smbk-bar-chart__gridline" }, { "name": "baseline", "class": "smbk-bar-chart__baseline" }, { "name": "bars", "class": "smbk-bar-chart__bars" }, { "name": "bar", "class": "smbk-bar-chart__bar" }, { "name": "segment", "class": "smbk-bar-chart__segment" }, { "name": "x-axis", "class": "smbk-bar-chart__x-axis" }, { "name": "x-cell", "class": "smbk-bar-chart__x-cell" }, { "name": "x-label", "class": "smbk-bar-chart__x-label" }, { "name": "table", "class": "smbk-bar-chart__table" }, { "name": "data", "class": "smbk-bar-chart__data" } ], "props": [ { "name": "type", "kind": "choice", "values": [ "bars", "stacked" ], "default": "bars", "description": "One series as plain bars, the current one darker; or up to eight series stacked in each bar in the categorical colors, the rest gathered as Other.", "classes": { "bars": "smbk-bar-chart--type-bars", "stacked": "smbk-bar-chart--type-stacked" } } ], "page": "https://design.simbolik.ai/components/bar-chart/", "markdown": "https://design.simbolik.ai/components/bar-chart.md" }, { "name": "board", "title": "Board", "status": "experimental", "summary": "Columns of cards, side by side on a wide screen in a frame that scrolls sideways, and stacked on a phone.", "block": [ "smbk-board" ], "parts": [ { "name": "columns", "class": "smbk-board__columns" }, { "name": "scroll-hint", "class": "smbk-board__scroll-hint" } ], "props": [], "page": "https://design.simbolik.ai/components/board/", "markdown": "https://design.simbolik.ai/components/board.md" }, { "name": "board-column", "title": "Board column", "status": "experimental", "summary": "A lane of cards on a board: a title with a capacity meter and an action, then groups of cards, each with a label and a count.", "block": [ "smbk-board-column" ], "parts": [ { "name": "head", "class": "smbk-board-column__head" }, { "name": "heading", "class": "smbk-board-column__heading" }, { "name": "title", "class": "smbk-board-column__title" }, { "name": "meter", "class": "smbk-board-column__meter" }, { "name": "action", "class": "smbk-board-column__action" }, { "name": "group", "class": "smbk-board-column__group" }, { "name": "group-head", "class": "smbk-board-column__group-head" }, { "name": "dot", "class": "smbk-board-column__dot" }, { "name": "group-label", "class": "smbk-board-column__group-label" }, { "name": "count", "class": "smbk-board-column__count" }, { "name": "caret", "class": "smbk-board-column__caret" }, { "name": "group-body", "class": "smbk-board-column__group-body" }, { "name": "cards", "class": "smbk-board-column__cards" }, { "name": "card", "class": "smbk-board-column__card" }, { "name": "more", "class": "smbk-board-column__more" } ], "props": [], "page": "https://design.simbolik.ai/components/board-column/", "markdown": "https://design.simbolik.ai/components/board-column.md" }, { "name": "breadcrumbs", "title": "Breadcrumbs", "status": "candidate", "summary": "The trail of pages above this one, each a link, ending on the page the reader is on.", "block": [ "smbk-breadcrumbs" ], "parts": [ { "name": "item", "class": "smbk-breadcrumbs__item" }, { "name": "link", "class": "smbk-breadcrumbs__link" }, { "name": "label", "class": "smbk-breadcrumbs__label" }, { "name": "icon", "class": "smbk-breadcrumbs__icon" }, { "name": "separator", "class": "smbk-breadcrumbs__separator" }, { "name": "more", "class": "smbk-breadcrumbs__more" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "description": "Figma: Medium, Small.", "classes": { "md": "smbk-breadcrumbs--size-md", "sm": "smbk-breadcrumbs--size-sm" } }, { "name": "overflow", "kind": "choice", "values": [ "full", "collapsed" ], "default": "full", "description": "Full shows every crumb, wrapping when the room runs out. Collapsed keeps the first crumb, the parent and the current page, and folds the crumbs between them behind a \"more\" button that opens them as a list of links; a trail of three or fewer shows whole.", "classes": { "full": "smbk-breadcrumbs--overflow-full", "collapsed": "smbk-breadcrumbs--overflow-collapsed" } } ], "page": "https://design.simbolik.ai/components/breadcrumbs/", "markdown": "https://design.simbolik.ai/components/breadcrumbs.md" }, { "name": "button", "title": "Button", "status": "candidate", "summary": "The action control: five tones, three sizes, with optional leading and trailing icons or an icon alone, a small avatar before the label or a count after it.", "block": [ "smbk-btn" ], "parts": [ { "name": "icon", "class": "smbk-btn__icon" }, { "name": "leading-content", "class": "smbk-btn__leading-content" }, { "name": "label", "class": "smbk-btn__label" }, { "name": "count", "class": "smbk-btn__count" }, { "name": "spinner", "class": "smbk-btn__spinner" } ], "props": [ { "name": "tone", "kind": "choice", "values": [ "brand", "secondary", "outline", "ghost", "danger" ], "default": "brand", "description": "Which action color family the button draws from. Figma calls this axis \"Variant\".", "classes": { "brand": "smbk-btn--tone-brand", "secondary": "smbk-btn--tone-secondary", "outline": "smbk-btn--tone-outline", "ghost": "smbk-btn--tone-ghost", "danger": "smbk-btn--tone-danger" } }, { "name": "size", "kind": "choice", "values": [ "lg", "md", "sm", "xs" ], "default": "md", "description": "Control height, padding, radius, label and icon size step together, one recipe per height. md fits apps and forms; a marketing page may place lg. xs is for a ghost icon-only button beside text, such as a help button in a table heading, and is refused on any other.", "classes": { "lg": "smbk-btn--size-lg", "md": "smbk-btn--size-md", "sm": "smbk-btn--size-sm", "xs": "smbk-btn--size-xs" } }, { "name": "icon-only", "kind": "flag", "description": "A square button holding one icon and no label. Needs an accessible name.", "classes": { "true": "smbk-btn--icon-only" } }, { "name": "loading", "kind": "flag", "description": "The action is running: a turning ring over the hidden label, the same width, and presses do nothing. It says it is busy.", "classes": { "true": "smbk-btn--loading" } }, { "name": "full-width", "kind": "flag", "description": "The button takes the whole width of its space, with its label centered: the one action of a narrow form or of a dialog on a phone.", "classes": { "true": "smbk-btn--full-width" } } ], "page": "https://design.simbolik.ai/components/button/", "markdown": "https://design.simbolik.ai/components/button.md" }, { "name": "button-group", "title": "Button group", "status": "candidate", "summary": "Several buttons acting as one control: spaced apart, or segmented into one bar with dividers.", "block": [ "smbk-btn-group" ], "parts": [], "props": [ { "name": "type", "kind": "choice", "values": [ "default", "segmented" ], "default": "segmented", "description": "Default keeps buttons apart. Segmented fuses them into one bar with hairline dividers.", "classes": { "default": "smbk-btn-group--type-default", "segmented": "smbk-btn-group--type-segmented" } }, { "name": "tone", "kind": "choice", "values": [ "brand", "secondary", "outline" ], "default": "secondary", "description": "Which action family the fused bar draws its dividers and border from. Buttons inside an outline bar use the ghost tone.", "classes": { "brand": "smbk-btn-group--tone-brand", "secondary": "smbk-btn-group--tone-secondary", "outline": "smbk-btn-group--tone-outline" } }, { "name": "size", "kind": "choice", "values": [ "lg", "md", "sm" ], "default": "md", "description": "Matches the size of the buttons inside, md like the button; sets the gap and the bar radius.", "classes": { "lg": "smbk-btn-group--size-lg", "md": "smbk-btn-group--size-md", "sm": "smbk-btn-group--size-sm" } }, { "name": "orientation", "kind": "choice", "values": [ "horizontal", "vertical" ], "default": "horizontal", "classes": { "horizontal": "smbk-btn-group--orientation-horizontal", "vertical": "smbk-btn-group--orientation-vertical" } } ], "page": "https://design.simbolik.ai/components/button-group/", "markdown": "https://design.simbolik.ai/components/button-group.md" }, { "name": "button-note", "title": "Button note", "status": "experimental", "summary": "A button with a short line of quiet words that says what pressing it will do, or why it cannot be pressed now.", "block": [ "smbk-button-note" ], "parts": [ { "name": "note", "class": "smbk-button-note__note" }, { "name": "icon", "class": "smbk-button-note__icon" }, { "name": "text", "class": "smbk-button-note__text" } ], "props": [ { "name": "layout", "kind": "choice", "values": [ "beside", "below", "header-end" ], "default": "beside", "description": "Beside puts the note next to the button and moves it under when there is no room; below always puts it under; header-end lines both up with the end of a page header.", "classes": { "beside": "smbk-button-note--layout-beside", "below": "smbk-button-note--layout-below", "header-end": "smbk-button-note--layout-header-end" } } ], "page": "https://design.simbolik.ai/components/button-note/", "markdown": "https://design.simbolik.ai/components/button-note.md" }, { "name": "calendar", "title": "Calendar", "status": "experimental", "summary": "A month of days to choose a date or a range of dates from, with buttons to the months before and after; it spreads its columns across the width it is given.", "block": [ "smbk-calendar" ], "parts": [ { "name": "header", "class": "smbk-calendar__header" }, { "name": "prev", "class": "smbk-calendar__prev" }, { "name": "title", "class": "smbk-calendar__title" }, { "name": "next", "class": "smbk-calendar__next" }, { "name": "grid", "class": "smbk-calendar__grid" }, { "name": "weekdays", "class": "smbk-calendar__weekdays" }, { "name": "weekday", "class": "smbk-calendar__weekday" }, { "name": "week", "class": "smbk-calendar__week" }, { "name": "cell", "class": "smbk-calendar__cell" }, { "name": "day", "class": "smbk-calendar__day" } ], "props": [ { "name": "selection", "kind": "choice", "values": [ "single", "range" ], "default": "single", "description": "One day, or a range from a first day to a last, joined by a band.", "classes": { "single": "smbk-calendar--selection-single", "range": "smbk-calendar--selection-range" } } ], "page": "https://design.simbolik.ai/components/calendar/", "markdown": "https://design.simbolik.ai/components/calendar.md" }, { "name": "capacity-meter", "title": "Capacity meter", "status": "experimental", "summary": "A row of two to four short bars, as many filled as places are taken, with the same in words, such as \"1 of 2 places\".", "block": [ "smbk-capacity-meter" ], "parts": [ { "name": "segments", "class": "smbk-capacity-meter__segments" }, { "name": "segment", "class": "smbk-capacity-meter__segment" }, { "name": "words", "class": "smbk-capacity-meter__words" } ], "props": [], "page": "https://design.simbolik.ai/components/capacity-meter/", "markdown": "https://design.simbolik.ai/components/capacity-meter.md" }, { "name": "card", "title": "Card", "status": "experimental", "summary": "A bounded box about one thing: an optional picture, a header, a body and a footer, on one of five surfaces and in one of five layouts.", "block": [ "smbk-card" ], "parts": [ { "name": "media", "class": "smbk-card__media" }, { "name": "content", "class": "smbk-card__content" }, { "name": "header", "class": "smbk-card__header" }, { "name": "top", "class": "smbk-card__top" }, { "name": "icon-tile", "class": "smbk-card__icon-tile" }, { "name": "icon", "class": "smbk-card__icon" }, { "name": "avatar", "class": "smbk-card__avatar" }, { "name": "lights", "class": "smbk-card__lights" }, { "name": "header-text", "class": "smbk-card__header-text" }, { "name": "eyebrow", "class": "smbk-card__eyebrow" }, { "name": "title-row", "class": "smbk-card__title-row" }, { "name": "title", "class": "smbk-card__title" }, { "name": "link", "class": "smbk-card__link" }, { "name": "number", "class": "smbk-card__number" }, { "name": "window-title", "class": "smbk-card__window-title" }, { "name": "meta", "class": "smbk-card__meta" }, { "name": "trailing", "class": "smbk-card__trailing" }, { "name": "arrow", "class": "smbk-card__arrow" }, { "name": "body", "class": "smbk-card__body" }, { "name": "divider", "class": "smbk-card__divider" }, { "name": "footer", "class": "smbk-card__footer" }, { "name": "footer-row", "class": "smbk-card__footer-row" }, { "name": "footer-start", "class": "smbk-card__footer-start" }, { "name": "footer-end", "class": "smbk-card__footer-end" } ], "props": [ { "name": "surface", "kind": "choice", "values": [ "slab", "raised", "float", "well", "outline" ], "default": "slab", "description": "The floor the card stands on: slab for panels, raised for cards to pick from, float for the one that leads, well cut into the page with its picture raised inside, outline with no fill.", "classes": { "slab": "smbk-card--surface-slab", "raised": "smbk-card--surface-raised", "float": "smbk-card--surface-float", "well": "smbk-card--surface-well", "outline": "smbk-card--surface-outline" } }, { "name": "layout", "kind": "choice", "values": [ "stacked", "side", "panel", "compact", "behind" ], "default": "stacked", "description": "Stacked puts the picture on top, side beside the words, behind under them; panel lays the parts edge to edge with the header on a shaded band; compact is the tight card for a grid.", "classes": { "stacked": "smbk-card--layout-stacked", "side": "smbk-card--layout-side", "panel": "smbk-card--layout-panel", "compact": "smbk-card--layout-compact", "behind": "smbk-card--layout-behind" } }, { "name": "selected", "kind": "flag", "description": "The brand edge round the card, for the one chosen among several. Say so in words too.", "classes": { "true": "smbk-card--selected" } }, { "name": "brackets", "kind": "flag", "description": "Brand marks at the four corners, a decoration that points at the card.", "classes": { "true": "smbk-card--brackets" } }, { "name": "warning-edge", "kind": "flag", "description": "A warning edge for a card that needs attention. Say why in words too.", "classes": { "true": "smbk-card--warning-edge" } }, { "name": "danger-edge", "kind": "flag", "description": "A danger edge for a card in trouble. Say why in words too.", "classes": { "true": "smbk-card--danger-edge" } }, { "name": "dragged", "kind": "flag", "description": "Lifted with the overlay shadow while the card is being moved, as on a board. The page sets it for as long as the move lasts.", "classes": { "true": "smbk-card--dragged" } } ], "page": "https://design.simbolik.ai/components/card/", "markdown": "https://design.simbolik.ai/components/card.md" }, { "name": "checkbox", "title": "Checkbox", "status": "candidate", "summary": "A box that is ticked or not, with its label beside it and an optional line under the label, for choices that are independent of each other.", "block": [ "smbk-checkbox" ], "parts": [ { "name": "control", "class": "smbk-checkbox__control" }, { "name": "box", "class": "smbk-checkbox__box" }, { "name": "icon", "class": "smbk-checkbox__icon" }, { "name": "mixed-icon", "class": "smbk-checkbox__mixed-icon" }, { "name": "label", "class": "smbk-checkbox__label" }, { "name": "text", "class": "smbk-checkbox__text" }, { "name": "description", "class": "smbk-checkbox__description" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "classes": { "md": "smbk-checkbox--size-md", "sm": "smbk-checkbox--size-sm" } }, { "name": "tone", "kind": "choice", "values": [ "default", "subtle" ], "default": "default", "description": "Default is raised with a lift; subtle is sunken with the strong border, for dense places such as table rows.", "classes": { "default": "smbk-checkbox--tone-default", "subtle": "smbk-checkbox--tone-subtle" } }, { "name": "error", "kind": "flag", "description": "The choice is invalid, such as terms that must be accepted. An empty box takes the danger edge; a ticked one keeps its fill inside a danger ring; the control also carries aria-invalid.", "classes": { "true": "smbk-checkbox--error" } } ], "page": "https://design.simbolik.ai/components/checkbox/", "markdown": "https://design.simbolik.ai/components/checkbox.md" }, { "name": "chip", "title": "Chip", "status": "candidate", "summary": "A small selectable token — a filter, a choice, a person — that can carry an avatar and be removed.", "block": [ "smbk-chip" ], "parts": [ { "name": "tick", "class": "smbk-chip__tick" }, { "name": "avatar", "class": "smbk-chip__avatar" }, { "name": "label", "class": "smbk-chip__label" }, { "name": "remove", "class": "smbk-chip__remove" } ], "props": [ { "name": "tone", "kind": "choice", "values": [ "default", "brand", "outline", "inverse" ], "default": "brand", "description": "Which action family the chip draws from; default is a see-through gray that shows on every surface.", "classes": { "default": "smbk-chip--tone-default", "brand": "smbk-chip--tone-brand", "outline": "smbk-chip--tone-outline", "inverse": "smbk-chip--tone-inverse" } }, { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "description": "The pill scale shared with the badge and the tag: 32 and 24 tall.", "classes": { "md": "smbk-chip--size-md", "sm": "smbk-chip--size-sm" } }, { "name": "selected", "kind": "flag", "description": "The chip is currently chosen: pressed in, with a tick before its label. Given as true or false, the chip is a toggle and announces pressed or not pressed; left out, it is a plain button.", "classes": { "true": "smbk-chip--selected" } } ], "page": "https://design.simbolik.ai/components/chip/", "markdown": "https://design.simbolik.ai/components/chip.md" }, { "name": "choice-card", "title": "Choice card", "status": "experimental", "summary": "One choice drawn as a card, with a label and a line under it: picked like a radio, or ticked like a checkbox.", "block": [ "smbk-choice-card" ], "parts": [ { "name": "text", "class": "smbk-choice-card__text" }, { "name": "label", "class": "smbk-choice-card__label" }, { "name": "description", "class": "smbk-choice-card__description" } ], "props": [ { "name": "mark", "kind": "choice", "values": [ "radio", "checkbox" ], "default": "radio", "description": "A radio when one card of a group is picked; a checkbox when several can be.", "classes": { "radio": "smbk-choice-card--mark-radio", "checkbox": "smbk-choice-card--mark-checkbox" } }, { "name": "error", "kind": "flag", "description": "The choice is invalid, such as a required question left empty. The card takes the danger edge, and its mark its error look.", "classes": { "true": "smbk-choice-card--error" } } ], "page": "https://design.simbolik.ai/components/choice-card/", "markdown": "https://design.simbolik.ai/components/choice-card.md" }, { "name": "code-block", "title": "Code block", "status": "candidate", "summary": "Code in a well, colored by kind and numbered by line, with a top bar for a file name or language tabs and small icon actions such as copy.", "block": [ "smbk-code" ], "parts": [ { "name": "bar", "class": "smbk-code__bar" }, { "name": "label", "class": "smbk-code__label" }, { "name": "icon", "class": "smbk-code__icon" }, { "name": "tabs", "class": "smbk-code__tabs" }, { "name": "actions", "class": "smbk-code__actions" }, { "name": "action", "class": "smbk-code__action" }, { "name": "body", "class": "smbk-code__body" }, { "name": "numbers", "class": "smbk-code__numbers" }, { "name": "code", "class": "smbk-code__code" }, { "name": "status", "class": "smbk-code__status" }, { "name": "keyword", "class": "smbk-code__keyword" }, { "name": "declaration", "class": "smbk-code__declaration" }, { "name": "string", "class": "smbk-code__string" }, { "name": "number", "class": "smbk-code__number" }, { "name": "function", "class": "smbk-code__function" }, { "name": "type", "class": "smbk-code__type" }, { "name": "tag", "class": "smbk-code__tag" }, { "name": "property", "class": "smbk-code__property" }, { "name": "comment", "class": "smbk-code__comment" }, { "name": "punctuation", "class": "smbk-code__punctuation" } ], "props": [ { "name": "bare", "kind": "flag", "description": "No top bar: just the well.", "classes": { "true": "smbk-code--bare" } } ], "page": "https://design.simbolik.ai/components/code-block/", "markdown": "https://design.simbolik.ai/components/code-block.md" }, { "name": "collapsible", "title": "Collapsible", "status": "proposed", "summary": "One row that shows or hides the content under it, for detail most readers can skip.", "block": [ "smbk-collapsible" ], "parts": [ { "name": "trigger", "class": "smbk-collapsible__trigger" }, { "name": "icon", "class": "smbk-collapsible__icon" }, { "name": "label", "class": "smbk-collapsible__label" }, { "name": "caret", "class": "smbk-collapsible__caret" }, { "name": "panel", "class": "smbk-collapsible__panel" } ], "props": [ { "name": "disabled", "kind": "flag", "description": "The row dims and cannot be opened or closed. Figma: State Disabled.", "classes": { "true": "smbk-collapsible--disabled" } } ], "page": "https://design.simbolik.ai/components/collapsible/", "markdown": "https://design.simbolik.ai/components/collapsible.md" }, { "name": "color-area", "title": "Color area", "status": "experimental", "summary": "Picks two channels of a color at once, saturation across and brightness up, by dragging a thumb in a square of the colors of one hue.", "block": [ "smbk-color-area" ], "parts": [ { "name": "thumb", "class": "smbk-color-area__thumb" } ], "props": [], "page": "https://design.simbolik.ai/components/color-area/", "markdown": "https://design.simbolik.ai/components/color-area.md" }, { "name": "color-field", "title": "Color field", "status": "experimental", "summary": "A text field for a color code, such as #3E63DD, with the color shown at its start.", "block": [ "smbk-color-field" ], "parts": [ { "name": "swatch", "class": "smbk-color-field__swatch" }, { "name": "control", "class": "smbk-color-field__control" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "description": "The input’s two heights, with a 20 px swatch at md and a 16 px one at sm. Small text never goes under 16 px on a phone.", "classes": { "md": "smbk-color-field--size-md", "sm": "smbk-color-field--size-sm" } }, { "name": "error", "kind": "flag", "description": "The color is not one the form can take. Draws the danger border, kept while focused, and the error icon after the code.", "classes": { "true": "smbk-color-field--error" } } ], "page": "https://design.simbolik.ai/components/color-field/", "markdown": "https://design.simbolik.ai/components/color-field.md" }, { "name": "color-picker", "title": "Color picker", "status": "experimental", "summary": "A field or a swatch that opens a panel to choose a color: by dragging in a square and along strips, by typing its code, or by picking a saved swatch.", "block": [ "smbk-color-picker" ], "parts": [ { "name": "trigger", "class": "smbk-color-picker__trigger" }, { "name": "swatch", "class": "smbk-color-picker__swatch" }, { "name": "value", "class": "smbk-color-picker__value" }, { "name": "name", "class": "smbk-color-picker__name" }, { "name": "caret", "class": "smbk-color-picker__caret" }, { "name": "panel", "class": "smbk-color-picker__panel" }, { "name": "area", "class": "smbk-color-picker__area" }, { "name": "slider", "class": "smbk-color-picker__slider" }, { "name": "code", "class": "smbk-color-picker__code" }, { "name": "format", "class": "smbk-color-picker__format" }, { "name": "field", "class": "smbk-color-picker__field" }, { "name": "eyedropper", "class": "smbk-color-picker__eyedropper" }, { "name": "swatches", "class": "smbk-color-picker__swatches" }, { "name": "divider", "class": "smbk-color-picker__divider" } ], "props": [ { "name": "type", "kind": "choice", "values": [ "field", "swatch" ], "default": "field", "description": "Field shows the color and its code with a caret, as a select does; Swatch shows the color alone, for toolbars and tight rows.", "classes": { "field": "smbk-color-picker--type-field", "swatch": "smbk-color-picker--type-swatch" } }, { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "description": "The input’s two heights. Field holds a 20 or 16 px swatch; Swatch is a 40 or 32 px square holding a 24 or 16 px one.", "classes": { "md": "smbk-color-picker--size-md", "sm": "smbk-color-picker--size-sm" } }, { "name": "error", "kind": "flag", "description": "The color is not one the form can take. Draws the input’s danger border on the trigger.", "classes": { "true": "smbk-color-picker--error" } }, { "name": "open", "kind": "flag", "description": "The panel is showing. Set by the component while it is open; the caret turns up.", "classes": { "true": "smbk-color-picker--open" } } ], "page": "https://design.simbolik.ai/components/color-picker/", "markdown": "https://design.simbolik.ai/components/color-picker.md" }, { "name": "color-range", "title": "Color range", "status": "experimental", "summary": "The steps of one color range in a strip, each with its swatch, its name and its contrast against white, with the step in use ringed.", "block": [ "smbk-color-range" ], "parts": [ { "name": "head", "class": "smbk-color-range__head" }, { "name": "title", "class": "smbk-color-range__title" }, { "name": "meta", "class": "smbk-color-range__meta" }, { "name": "steps", "class": "smbk-color-range__steps" }, { "name": "step", "class": "smbk-color-range__step" }, { "name": "swatch", "class": "smbk-color-range__swatch" }, { "name": "name", "class": "smbk-color-range__name" }, { "name": "ratio", "class": "smbk-color-range__ratio" }, { "name": "hidden", "class": "smbk-color-range__hidden" } ], "props": [], "page": "https://design.simbolik.ai/components/color-range/", "markdown": "https://design.simbolik.ai/components/color-range.md" }, { "name": "color-slider", "title": "Color slider", "status": "experimental", "summary": "Picks one channel of a color, its hue, opacity, saturation or lightness, by dragging along a strip that shows the colors it moves through.", "block": [ "smbk-color-slider" ], "parts": [ { "name": "header", "class": "smbk-color-slider__header" }, { "name": "label", "class": "smbk-color-slider__label" }, { "name": "value", "class": "smbk-color-slider__value" }, { "name": "track", "class": "smbk-color-slider__track" }, { "name": "gradient", "class": "smbk-color-slider__gradient" }, { "name": "rail", "class": "smbk-color-slider__rail" }, { "name": "thumb", "class": "smbk-color-slider__thumb" } ], "props": [ { "name": "channel", "kind": "choice", "values": [ "hue", "alpha", "saturation", "lightness" ], "default": "hue", "description": "Which part of the color the slider changes. Alpha is the opacity, drawn over the checkerboard and labeled “Opacity”.", "classes": { "hue": "smbk-color-slider--channel-hue", "alpha": "smbk-color-slider--channel-alpha", "saturation": "smbk-color-slider--channel-saturation", "lightness": "smbk-color-slider--channel-lightness" } }, { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "description": "A 24 px strip with a 20 px thumb, or a 20 px strip with a 16 px thumb.", "classes": { "md": "smbk-color-slider--size-md", "sm": "smbk-color-slider--size-sm" } } ], "page": "https://design.simbolik.ai/components/color-slider/", "markdown": "https://design.simbolik.ai/components/color-slider.md" }, { "name": "color-swatch", "title": "Color swatch", "status": "experimental", "summary": "One color shown as a small square or dot, over a checkerboard so a see-through color shows, or crossed out when no color is set.", "block": [ "smbk-color-swatch" ], "parts": [ { "name": "color", "class": "smbk-color-swatch__color" }, { "name": "slash", "class": "smbk-color-swatch__slash" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "lg", "md", "sm", "xs" ], "default": "lg", "description": "32, 24, 20 or 16 px across. The square’s corners get smaller with it.", "classes": { "lg": "smbk-color-swatch--size-lg", "md": "smbk-color-swatch--size-md", "sm": "smbk-color-swatch--size-sm", "xs": "smbk-color-swatch--size-xs" } }, { "name": "shape", "kind": "choice", "values": [ "square", "round" ], "default": "square", "description": "Square for lists and fields; round for a row of dots.", "classes": { "square": "smbk-color-swatch--shape-square", "round": "smbk-color-swatch--shape-round" } }, { "name": "none", "kind": "flag", "description": "No color is set: the default surface crossed by a slash, named “No color”. Set by the component when it is given no color.", "classes": { "true": "smbk-color-swatch--none" } } ], "page": "https://design.simbolik.ai/components/color-swatch/", "markdown": "https://design.simbolik.ai/components/color-swatch.md" }, { "name": "color-swatch-picker", "title": "Color swatch picker", "status": "experimental", "summary": "A set of colors to pick one from, such as saved colors or colors to try, in rows that wrap.", "block": [ "smbk-color-swatch-picker" ], "parts": [ { "name": "item", "class": "smbk-color-swatch-picker__item" } ], "props": [ { "name": "shape", "kind": "choice", "values": [ "square", "round" ], "default": "square", "description": "Square swatches, or dots.", "classes": { "square": "smbk-color-swatch-picker--shape-square", "round": "smbk-color-swatch-picker--shape-round" } }, { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "description": "A 32 px item holding a 24 px swatch, or a 24 px item holding a 16 px one.", "classes": { "md": "smbk-color-swatch-picker--size-md", "sm": "smbk-color-swatch-picker--size-sm" } } ], "page": "https://design.simbolik.ai/components/color-swatch-picker/", "markdown": "https://design.simbolik.ai/components/color-swatch-picker.md" }, { "name": "combobox", "title": "Combobox", "status": "experimental", "summary": "A box to type in that suggests matches from a list, for one choice or several: the input’s well, the dropdown panel under it, and each pick a chip.", "block": [ "smbk-combobox" ], "parts": [ { "name": "control", "class": "smbk-combobox__control" }, { "name": "lead", "class": "smbk-combobox__lead" }, { "name": "values", "class": "smbk-combobox__values" }, { "name": "chip", "class": "smbk-combobox__chip" }, { "name": "input", "class": "smbk-combobox__input" }, { "name": "clear", "class": "smbk-combobox__clear" }, { "name": "caret", "class": "smbk-combobox__caret" }, { "name": "list", "class": "smbk-combobox__list" }, { "name": "options", "class": "smbk-combobox__options" }, { "name": "option", "class": "smbk-combobox__option" }, { "name": "option-lead", "class": "smbk-combobox__option-lead" }, { "name": "option-label", "class": "smbk-combobox__option-label" }, { "name": "option-detail", "class": "smbk-combobox__option-detail" }, { "name": "option-badge", "class": "smbk-combobox__option-badge" }, { "name": "check", "class": "smbk-combobox__check" }, { "name": "status", "class": "smbk-combobox__status" }, { "name": "status-icon", "class": "smbk-combobox__status-icon" }, { "name": "announcement", "class": "smbk-combobox__announcement" } ], "props": [ { "name": "selection", "kind": "choice", "values": [ "single", "multiple" ], "default": "single", "description": "One choice, shown as text in the box, or several, each kept as a removable chip before the text, with a tick box on every option. Figma calls this \"Mode\".", "classes": { "single": "smbk-combobox--selection-single", "multiple": "smbk-combobox--selection-multiple" } }, { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "description": "The input’s two heights, with the dropdown’s items at the same size when open. Small text never goes under 16 px on a phone.", "classes": { "md": "smbk-combobox--size-md", "sm": "smbk-combobox--size-sm" } }, { "name": "error", "kind": "flag", "description": "The value is invalid. Draws the danger border, kept while focused, and the error icon before the caret.", "classes": { "true": "smbk-combobox--error" } } ], "page": "https://design.simbolik.ai/components/combobox/", "markdown": "https://design.simbolik.ai/components/combobox.md" }, { "name": "command-palette", "title": "Command palette", "status": "candidate", "summary": "A search-first panel of commands: type to filter, arrow keys to move, Enter to run, with groups under small labels and key hints at the foot.", "block": [ "smbk-command-palette" ], "parts": [ { "name": "search", "class": "smbk-command-palette__search" }, { "name": "search-icon", "class": "smbk-command-palette__search-icon" }, { "name": "input", "class": "smbk-command-palette__input" }, { "name": "clear", "class": "smbk-command-palette__clear" }, { "name": "filters", "class": "smbk-command-palette__filters" }, { "name": "body", "class": "smbk-command-palette__body" }, { "name": "group", "class": "smbk-command-palette__group" }, { "name": "group-header", "class": "smbk-command-palette__group-header" }, { "name": "group-label", "class": "smbk-command-palette__group-label" }, { "name": "list", "class": "smbk-command-palette__list" }, { "name": "item", "class": "smbk-command-palette__item" }, { "name": "item-icon", "class": "smbk-command-palette__item-icon" }, { "name": "item-label", "class": "smbk-command-palette__item-label" }, { "name": "item-text", "class": "smbk-command-palette__item-text" }, { "name": "item-description", "class": "smbk-command-palette__item-description" }, { "name": "item-meta", "class": "smbk-command-palette__item-meta" }, { "name": "status", "class": "smbk-command-palette__status" }, { "name": "empty", "class": "smbk-command-palette__empty" }, { "name": "footer", "class": "smbk-command-palette__footer" }, { "name": "hints", "class": "smbk-command-palette__hints" }, { "name": "hint", "class": "smbk-command-palette__hint" }, { "name": "hint-text", "class": "smbk-command-palette__hint-text" }, { "name": "dialog", "class": "smbk-command-palette__dialog" }, { "name": "glide", "class": "smbk-command-palette__glide" } ], "props": [], "page": "https://design.simbolik.ai/components/command-palette/", "markdown": "https://design.simbolik.ai/components/command-palette.md" }, { "name": "contrast-pair", "title": "Contrast pair", "status": "experimental", "summary": "Two colors drawn as text on its background, with their contrast ratio and the mark it earns: AAA, AA, AA large or fails.", "block": [ "smbk-contrast-pair" ], "parts": [ { "name": "sample", "class": "smbk-contrast-pair__sample" }, { "name": "text", "class": "smbk-contrast-pair__text" }, { "name": "result", "class": "smbk-contrast-pair__result" }, { "name": "ratio", "class": "smbk-contrast-pair__ratio" }, { "name": "badge", "class": "smbk-contrast-pair__badge" }, { "name": "names", "class": "smbk-contrast-pair__names" }, { "name": "hidden", "class": "smbk-contrast-pair__hidden" } ], "props": [ { "name": "result", "kind": "choice", "values": [ "aaa", "aa", "aa-large", "fails" ], "default": "aaa", "description": "The mark the ratio earns: AAA at 7:1 and up, AA at 4.5:1, AA large at 3:1 (large text and controls only), else fails. Worked out from the two colors unless given; it sets the badge’s words and type.", "classes": { "aaa": "smbk-contrast-pair--result-aaa", "aa": "smbk-contrast-pair--result-aa", "aa-large": "smbk-contrast-pair--result-aa-large", "fails": "smbk-contrast-pair--result-fails" } } ], "page": "https://design.simbolik.ai/components/contrast-pair/", "markdown": "https://design.simbolik.ai/components/contrast-pair.md" }, { "name": "corner-sample", "title": "Corner sample", "status": "experimental", "summary": "One corner drawn at one radius, for a list of corner steps or roles beside their names and sizes.", "block": [ "smbk-corner-sample" ], "parts": [], "props": [], "page": "https://design.simbolik.ai/components/corner-sample/", "markdown": "https://design.simbolik.ai/components/corner-sample.md" }, { "name": "curve-editor", "title": "Curve editor", "status": "experimental", "summary": "A motion curve to shape by dragging its two handles, moving them with the arrow keys, or typing its four numbers.", "block": [ "smbk-curve-editor" ], "parts": [ { "name": "plot", "class": "smbk-curve-editor__plot" }, { "name": "drawing", "class": "smbk-curve-editor__drawing" }, { "name": "square", "class": "smbk-curve-editor__square" }, { "name": "line", "class": "smbk-curve-editor__line" }, { "name": "arm", "class": "smbk-curve-editor__arm" }, { "name": "limit", "class": "smbk-curve-editor__limit" }, { "name": "curve", "class": "smbk-curve-editor__curve" }, { "name": "handle", "class": "smbk-curve-editor__handle" }, { "name": "numbers", "class": "smbk-curve-editor__numbers" } ], "props": [], "page": "https://design.simbolik.ai/components/curve-editor/", "markdown": "https://design.simbolik.ai/components/curve-editor.md" }, { "name": "date-picker", "title": "Date and time picker", "status": "experimental", "summary": "A date, a time, or both, typed the reader’s own way or, for a date, chosen from a small calendar that opens under the field.", "block": [ "smbk-date-picker" ], "parts": [ { "name": "controls", "class": "smbk-date-picker__controls" }, { "name": "input", "class": "smbk-date-picker__input" }, { "name": "trigger", "class": "smbk-date-picker__trigger" }, { "name": "popup", "class": "smbk-date-picker__popup" }, { "name": "to", "class": "smbk-date-picker__to" } ], "props": [ { "name": "type", "kind": "choice", "values": [ "date", "time", "date-time", "date-range" ], "default": "date", "description": "A date, with a button that opens the calendar; a time, typed; both, as a date field and a time field side by side that wrap under each other when there is no room (Figma’s \"Date and time\"); or a range, its first and last day side by side with a dash between, picked on the range calendar.", "classes": { "date": "smbk-date-picker--type-date", "time": "smbk-date-picker--type-time", "date-time": "smbk-date-picker--type-date-time", "date-range": "smbk-date-picker--type-date-range" } }, { "name": "error", "kind": "flag", "description": "The value is invalid. Draws the input’s danger border, kept while focused, and its error icon in each field.", "classes": { "true": "smbk-date-picker--error" } } ], "page": "https://design.simbolik.ai/components/date-picker/", "markdown": "https://design.simbolik.ai/components/date-picker.md" }, { "name": "description-list", "title": "Description list", "status": "experimental", "summary": "The facts about one thing, as rows of a name and its value, such as an account’s details or a record’s fields, with an optional action on each.", "block": [ "smbk-description-list" ], "parts": [ { "name": "heading", "class": "smbk-description-list__heading" }, { "name": "rows", "class": "smbk-description-list__rows" }, { "name": "row", "class": "smbk-description-list__row" }, { "name": "term", "class": "smbk-description-list__term" }, { "name": "value", "class": "smbk-description-list__value" }, { "name": "absent", "class": "smbk-description-list__absent" }, { "name": "icon", "class": "smbk-description-list__icon" }, { "name": "action", "class": "smbk-description-list__action" }, { "name": "hidden", "class": "smbk-description-list__hidden" } ], "props": [ { "name": "layout", "kind": "choice", "values": [ "stacked", "side-by-side" ], "default": "stacked", "description": "Stacked puts each value under its name; side by side gives the names a column of their own. Side by side stacks in a narrow space, unless small.", "classes": { "stacked": "smbk-description-list--layout-stacked", "side-by-side": "smbk-description-list--layout-side-by-side" } }, { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "description": "Small is for a narrow panel, about 320 to 360 wide: the small text sizes and closer rows, and side by side the names take about a quarter of the row, so short values stay on one line.", "classes": { "md": "smbk-description-list--size-md", "sm": "smbk-description-list--size-sm" } } ], "page": "https://design.simbolik.ai/components/description-list/", "markdown": "https://design.simbolik.ai/components/description-list.md" }, { "name": "diff-stat", "title": "Diff stat", "status": "experimental", "summary": "How much a change touched: the lines added and removed, such as \"+128 −12\", and a row of five small squares that shows the balance.", "block": [ "smbk-diff-stat" ], "parts": [ { "name": "hidden", "class": "smbk-diff-stat__hidden" }, { "name": "added", "class": "smbk-diff-stat__added" }, { "name": "removed", "class": "smbk-diff-stat__removed" }, { "name": "blocks", "class": "smbk-diff-stat__blocks" }, { "name": "block", "class": "smbk-diff-stat__block" } ], "props": [], "page": "https://design.simbolik.ai/components/diff-stat/", "markdown": "https://design.simbolik.ai/components/diff-stat.md" }, { "name": "divider", "title": "Divider", "status": "candidate", "summary": "A two-line rule — a shade line over a highlight line — that separates content, optionally with a word in the middle.", "block": [ "smbk-divider" ], "parts": [ { "name": "line", "class": "smbk-divider__line" }, { "name": "label", "class": "smbk-divider__label" } ], "props": [ { "name": "orientation", "kind": "choice", "values": [ "horizontal", "vertical" ], "default": "horizontal", "classes": { "horizontal": "smbk-divider--orientation-horizontal", "vertical": "smbk-divider--orientation-vertical" } }, { "name": "labelled", "kind": "flag", "description": "A short word, such as \"or\", interrupts the line. Horizontal only.", "classes": { "true": "smbk-divider--labelled" } } ], "page": "https://design.simbolik.ai/components/divider/", "markdown": "https://design.simbolik.ai/components/divider.md" }, { "name": "donut-chart", "title": "Donut chart", "status": "experimental", "summary": "Two to eight parts of a whole as a ring, with the total in the middle and a legend beside it that names each part with its value.", "block": [ "smbk-donut-chart" ], "parts": [ { "name": "ring", "class": "smbk-donut-chart__ring" }, { "name": "svg", "class": "smbk-donut-chart__svg" }, { "name": "part", "class": "smbk-donut-chart__part" }, { "name": "center", "class": "smbk-donut-chart__center" }, { "name": "figure", "class": "smbk-donut-chart__figure" }, { "name": "caption", "class": "smbk-donut-chart__caption" }, { "name": "legend", "class": "smbk-donut-chart__legend" }, { "name": "table", "class": "smbk-donut-chart__table" }, { "name": "data", "class": "smbk-donut-chart__data" } ], "props": [], "page": "https://design.simbolik.ai/components/donut-chart/", "markdown": "https://design.simbolik.ai/components/donut-chart.md" }, { "name": "drawer", "title": "Drawer", "status": "experimental", "summary": "A panel that slides in from one edge of the window over a scrim, with a header, a scrolling body and a footer of actions.", "block": [ "smbk-drawer" ], "parts": [ { "name": "header", "class": "smbk-drawer__header" }, { "name": "heading", "class": "smbk-drawer__heading" }, { "name": "title", "class": "smbk-drawer__title" }, { "name": "description", "class": "smbk-drawer__description" }, { "name": "close", "class": "smbk-drawer__close" }, { "name": "body", "class": "smbk-drawer__body" }, { "name": "footer", "class": "smbk-drawer__footer" }, { "name": "actions", "class": "smbk-drawer__actions" } ], "props": [ { "name": "position", "kind": "choice", "values": [ "right", "left", "top", "bottom" ], "default": "right", "description": "Which edge the panel comes from.", "classes": { "right": "smbk-drawer--position-right", "left": "smbk-drawer--position-left", "top": "smbk-drawer--position-top", "bottom": "smbk-drawer--position-bottom" } }, { "name": "inline", "kind": "flag", "description": "Shown in place with no scrim, for previews and documentation.", "classes": { "true": "smbk-drawer--inline" } } ], "page": "https://design.simbolik.ai/components/drawer/", "markdown": "https://design.simbolik.ai/components/drawer.md" }, { "name": "dropdown", "title": "Dropdown", "status": "candidate", "summary": "A raised list of actions or links that opens from a button: grouped items with an icon, a label, a key hint, an optional tick box or single-choice tick, items that open a second menu beside them, and a red one for the destructive action, in two item heights; it can also open at the pointer as a right-click menu.", "block": [ "smbk-dropdown" ], "parts": [ { "name": "anchor", "class": "smbk-dropdown__anchor" }, { "name": "layer", "class": "smbk-dropdown__layer" }, { "name": "group", "class": "smbk-dropdown__group" }, { "name": "label", "class": "smbk-dropdown__label" }, { "name": "item", "class": "smbk-dropdown__item" }, { "name": "checkbox", "class": "smbk-dropdown__checkbox" }, { "name": "icon", "class": "smbk-dropdown__icon" }, { "name": "text", "class": "smbk-dropdown__text" }, { "name": "divider", "class": "smbk-dropdown__divider" }, { "name": "glide", "class": "smbk-dropdown__glide" }, { "name": "submenu", "class": "smbk-dropdown__submenu" }, { "name": "area", "class": "smbk-dropdown__area" }, { "name": "point", "class": "smbk-dropdown__point" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "description": "The height of every item: the medium or the small control height. Figma calls this \"Items Size\".", "classes": { "md": "smbk-dropdown--size-md", "sm": "smbk-dropdown--size-sm" } }, { "name": "align", "kind": "choice", "values": [ "start", "end" ], "default": "start", "description": "Which edge of the opener the panel lines up with. End keeps a menu at the right of a bar inside the window.", "classes": { "start": "smbk-dropdown--align-start", "end": "smbk-dropdown--align-end" } } ], "page": "https://design.simbolik.ai/components/dropdown/", "markdown": "https://design.simbolik.ai/components/dropdown.md" }, { "name": "empty-state", "title": "Empty state", "status": "experimental", "summary": "The words that fill an area when what belongs there is missing or failed to load, naming the cause and offering the next step.", "block": [ "smbk-empty-state" ], "parts": [ { "name": "icon", "class": "smbk-empty-state__icon" }, { "name": "text", "class": "smbk-empty-state__text" }, { "name": "title", "class": "smbk-empty-state__title" }, { "name": "description", "class": "smbk-empty-state__description" }, { "name": "context", "class": "smbk-empty-state__context" }, { "name": "actions", "class": "smbk-empty-state__actions" }, { "name": "reference", "class": "smbk-empty-state__reference" }, { "name": "hidden", "class": "smbk-empty-state__hidden" } ], "props": [ { "name": "scope", "kind": "choice", "values": [ "inline", "centered", "page" ], "default": "inline", "description": "Inline sits at the start of a list or a panel it stands in for. Centered fills a larger area, centred, with a larger title. Page is the whole page, as a missing page or a page that failed to load.", "classes": { "inline": "smbk-empty-state--scope-inline", "centered": "smbk-empty-state--scope-centered", "page": "smbk-empty-state--scope-page" } }, { "name": "tone", "kind": "choice", "values": [ "default", "warning", "danger" ], "default": "default", "description": "Warning and danger color the icon for a state that needs care or an error. The words carry the meaning; the color only backs them up.", "classes": { "default": "smbk-empty-state--tone-default", "warning": "smbk-empty-state--tone-warning", "danger": "smbk-empty-state--tone-danger" } }, { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "description": "Small is for one panel among many, as on a dashboard: the title in a label style, a smaller icon and smaller gaps, so an empty panel reads no louder than its neighbors.", "classes": { "md": "smbk-empty-state--size-md", "sm": "smbk-empty-state--size-sm" } } ], "page": "https://design.simbolik.ai/components/empty-state/", "markdown": "https://design.simbolik.ai/components/empty-state.md" }, { "name": "error-summary", "title": "Error summary", "status": "experimental", "summary": "A box at the top of a form after a failed send, listing every mistake as a link that moves focus to its field.", "block": [ "smbk-error-summary" ], "parts": [ { "name": "icon", "class": "smbk-error-summary__icon" }, { "name": "content", "class": "smbk-error-summary__content" }, { "name": "text", "class": "smbk-error-summary__text" }, { "name": "heading", "class": "smbk-error-summary__heading" }, { "name": "intro", "class": "smbk-error-summary__intro" }, { "name": "list", "class": "smbk-error-summary__list" }, { "name": "item", "class": "smbk-error-summary__item" }, { "name": "link", "class": "smbk-error-summary__link" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "description": "Small sits closer to its edges with a smaller heading, for a dialog or a narrow form.", "classes": { "md": "smbk-error-summary--size-md", "sm": "smbk-error-summary--size-sm" } } ], "page": "https://design.simbolik.ai/components/error-summary/", "markdown": "https://design.simbolik.ai/components/error-summary.md" }, { "name": "field", "title": "Field", "status": "candidate", "summary": "The frame around one form control: its label with an optional required mark, and help text or an error message under the control.", "block": [ "smbk-field" ], "parts": [ { "name": "label", "class": "smbk-field__label" }, { "name": "description", "class": "smbk-field__description" }, { "name": "warning", "class": "smbk-field__warning" } ], "props": [ { "name": "layout", "kind": "choice", "values": [ "stacked", "side-by-side" ], "default": "stacked", "description": "Stacked puts the label above the control. Side by side puts it on the left of a small control, for settings; in a narrow space the field stacks.", "classes": { "stacked": "smbk-field--layout-stacked", "side-by-side": "smbk-field--layout-side-by-side" } }, { "name": "error", "kind": "flag", "description": "The value is invalid. The label and the message under the control turn the danger color, the message leads with an icon, and the control draws its danger border and icon.", "classes": { "true": "smbk-field--error" } }, { "name": "disabled", "kind": "flag", "description": "The control is disabled. The label, its mark and the help text take the disabled color.", "classes": { "true": "smbk-field--disabled" } }, { "name": "readonly", "kind": "flag", "description": "The control can be read and copied, not changed. It keeps its place in the tab order.", "classes": { "true": "smbk-field--readonly" } } ], "page": "https://design.simbolik.ai/components/field/", "markdown": "https://design.simbolik.ai/components/field.md" }, { "name": "field-group", "title": "Field group", "status": "experimental", "summary": "Several radios, checkboxes or choice cards under one question: a fieldset with its legend, help, and one error message for the group.", "block": [ "smbk-field-group" ], "parts": [ { "name": "legend", "class": "smbk-field-group__legend" }, { "name": "description", "class": "smbk-field-group__description" }, { "name": "options", "class": "smbk-field-group__options" }, { "name": "option", "class": "smbk-field-group__option" }, { "name": "message", "class": "smbk-field-group__message" } ], "props": [ { "name": "layout", "kind": "choice", "values": [ "vertical", "horizontal" ], "default": "vertical", "description": "Vertical stacks the options. Horizontal sets them in a row that wraps, only for a few short labels without lines under them.", "classes": { "vertical": "smbk-field-group--layout-vertical", "horizontal": "smbk-field-group--layout-horizontal" } }, { "name": "error", "kind": "flag", "description": "The answer is invalid, such as a required question left empty. Every option takes its error look and one message under the options says what to do.", "classes": { "true": "smbk-field-group--error" } }, { "name": "disabled", "kind": "flag", "description": "Every option is disabled; the question and its help stay readable.", "classes": { "true": "smbk-field-group--disabled" } } ], "page": "https://design.simbolik.ai/components/field-group/", "markdown": "https://design.simbolik.ai/components/field-group.md" }, { "name": "field-message", "title": "Field message", "status": "experimental", "summary": "The line under a field or a group of choices: help that says what to enter, a warning to notice, or an error that says what is wrong.", "block": [ "smbk-field-message" ], "parts": [ { "name": "icon", "class": "smbk-field-message__icon" }, { "name": "text", "class": "smbk-field-message__text" } ], "props": [ { "name": "type", "kind": "choice", "values": [ "help", "warning", "error" ], "default": "help", "description": "Help is quiet text with no icon. Warning leads with the warning icon; error leads with the circled cross and turns the danger color.", "classes": { "help": "smbk-field-message--type-help", "warning": "smbk-field-message--type-warning", "error": "smbk-field-message--type-error" } } ], "page": "https://design.simbolik.ai/components/field-message/", "markdown": "https://design.simbolik.ai/components/field-message.md" }, { "name": "file-row", "title": "File row", "status": "experimental", "summary": "One chosen file: its name, size and state, its progress while it uploads, and what can be done with it.", "block": [ "smbk-file-row" ], "parts": [ { "name": "top", "class": "smbk-file-row__top" }, { "name": "icon", "class": "smbk-file-row__icon" }, { "name": "text", "class": "smbk-file-row__text" }, { "name": "name", "class": "smbk-file-row__name" }, { "name": "stem", "class": "smbk-file-row__stem" }, { "name": "extension", "class": "smbk-file-row__extension" }, { "name": "meta", "class": "smbk-file-row__meta" }, { "name": "size", "class": "smbk-file-row__size" }, { "name": "separator", "class": "smbk-file-row__separator" }, { "name": "state", "class": "smbk-file-row__state" }, { "name": "state-icon", "class": "smbk-file-row__state-icon" }, { "name": "message", "class": "smbk-file-row__message" }, { "name": "actions", "class": "smbk-file-row__actions" }, { "name": "progress", "class": "smbk-file-row__progress" } ], "props": [ { "name": "status", "kind": "choice", "values": [ "selected", "uploading", "complete", "failed", "rejected" ], "default": "selected", "description": "Selected is chosen and waiting; uploading shows the spinner and the progress bar; complete has gone through; failed did not, and can be tried again; rejected was not added, and says why.", "classes": { "selected": "smbk-file-row--status-selected", "uploading": "smbk-file-row--status-uploading", "complete": "smbk-file-row--status-complete", "failed": "smbk-file-row--status-failed", "rejected": "smbk-file-row--status-rejected" } } ], "page": "https://design.simbolik.ai/components/file-row/", "markdown": "https://design.simbolik.ai/components/file-row.md" }, { "name": "file-upload", "title": "File upload", "status": "experimental", "summary": "A place to choose files or drop them, with what is accepted said first, and each chosen file in a row below with its progress and result.", "block": [ "smbk-file-upload" ], "parts": [ { "name": "zone", "class": "smbk-file-upload__zone" }, { "name": "body", "class": "smbk-file-upload__body" }, { "name": "icon", "class": "smbk-file-upload__icon" }, { "name": "text", "class": "smbk-file-upload__text" }, { "name": "title", "class": "smbk-file-upload__title" }, { "name": "constraints", "class": "smbk-file-upload__constraints" }, { "name": "button", "class": "smbk-file-upload__button" }, { "name": "input", "class": "smbk-file-upload__input" }, { "name": "message", "class": "smbk-file-upload__message" }, { "name": "drop", "class": "smbk-file-upload__drop" }, { "name": "files", "class": "smbk-file-upload__files" }, { "name": "file", "class": "smbk-file-upload__file" }, { "name": "announcement", "class": "smbk-file-upload__announcement" } ], "props": [ { "name": "type", "kind": "choice", "values": [ "drop-zone", "button-only" ], "default": "drop-zone", "description": "A drop zone is a dashed area with a title, what is accepted and a button, that also takes files dropped on it; button only is the button over what is accepted, for narrow places. Figma calls them \"Drop zone\" and \"Button only\".", "classes": { "drop-zone": "smbk-file-upload--type-drop-zone", "button-only": "smbk-file-upload--type-button-only" } }, { "name": "error", "kind": "flag", "description": "Something is wrong, such as no file chosen when one is required. The zone takes the danger edge; say what is wrong in the message.", "classes": { "true": "smbk-file-upload--error" } }, { "name": "dragging", "kind": "flag", "description": "Files are held over the zone: the brand edge, the sunken surface and \"Drop to add\", at the same height. The wrapper sets it while dragging; Figma calls it \"Drag-over\".", "classes": { "true": "smbk-file-upload--dragging" } } ], "page": "https://design.simbolik.ai/components/file-upload/", "markdown": "https://design.simbolik.ai/components/file-upload.md" }, { "name": "filter-bar", "title": "Filter bar", "status": "experimental", "summary": "Search, filters, sort and Clear all together above a list or a table, with the filters applied as chips and the number of results they leave.", "block": [ "smbk-filter-bar" ], "parts": [ { "name": "controls", "class": "smbk-filter-bar__controls" }, { "name": "search", "class": "smbk-filter-bar__search" }, { "name": "filters", "class": "smbk-filter-bar__filters" }, { "name": "narrow-filters", "class": "smbk-filter-bar__narrow-filters" }, { "name": "sort", "class": "smbk-filter-bar__sort" }, { "name": "view", "class": "smbk-filter-bar__view" }, { "name": "opener", "class": "smbk-filter-bar__opener" }, { "name": "opener-count", "class": "smbk-filter-bar__opener-count" }, { "name": "applied", "class": "smbk-filter-bar__applied" }, { "name": "clear", "class": "smbk-filter-bar__clear" }, { "name": "count", "class": "smbk-filter-bar__count" } ], "props": [], "page": "https://design.simbolik.ai/components/filter-bar/", "markdown": "https://design.simbolik.ai/components/filter-bar.md" }, { "name": "footer", "title": "Footer", "status": "candidate", "summary": "The foot of a website in six looks: the brand, page links in columns or a row, and a legal strip; on a phone the columns fold into rows that open.", "block": [ "smbk-footer" ], "parts": [ { "name": "content", "class": "smbk-footer__content" }, { "name": "main", "class": "smbk-footer__main" }, { "name": "brand", "class": "smbk-footer__brand" }, { "name": "brand-link", "class": "smbk-footer__brand-link" }, { "name": "logo", "class": "smbk-footer__logo" }, { "name": "blurb", "class": "smbk-footer__blurb" }, { "name": "social", "class": "smbk-footer__social" }, { "name": "social-link", "class": "smbk-footer__social-link" }, { "name": "newsletter", "class": "smbk-footer__newsletter" }, { "name": "newsletter-row", "class": "smbk-footer__newsletter-row" }, { "name": "brand-divider", "class": "smbk-footer__brand-divider" }, { "name": "columns", "class": "smbk-footer__columns" }, { "name": "half", "class": "smbk-footer__half" }, { "name": "column", "class": "smbk-footer__column" }, { "name": "heading", "class": "smbk-footer__heading" }, { "name": "list", "class": "smbk-footer__list" }, { "name": "link", "class": "smbk-footer__link" }, { "name": "new-tab", "class": "smbk-footer__new-tab" }, { "name": "folds", "class": "smbk-footer__folds" }, { "name": "fold", "class": "smbk-footer__fold" }, { "name": "fold-heading", "class": "smbk-footer__fold-heading" }, { "name": "caret", "class": "smbk-footer__caret" }, { "name": "fold-divider", "class": "smbk-footer__fold-divider" }, { "name": "row", "class": "smbk-footer__row" }, { "name": "cta", "class": "smbk-footer__cta" }, { "name": "cta-text", "class": "smbk-footer__cta-text" }, { "name": "cta-headline", "class": "smbk-footer__cta-headline" }, { "name": "cta-line", "class": "smbk-footer__cta-line" }, { "name": "cta-actions", "class": "smbk-footer__cta-actions" }, { "name": "divider", "class": "smbk-footer__divider" }, { "name": "legal", "class": "smbk-footer__legal" }, { "name": "legal-start", "class": "smbk-footer__legal-start" }, { "name": "notice", "class": "smbk-footer__notice" }, { "name": "copyright", "class": "smbk-footer__copyright" }, { "name": "tagline", "class": "smbk-footer__tagline" }, { "name": "center", "class": "smbk-footer__center" }, { "name": "end", "class": "smbk-footer__end" }, { "name": "legal-links", "class": "smbk-footer__legal-links" }, { "name": "legal-link", "class": "smbk-footer__legal-link" }, { "name": "extras", "class": "smbk-footer__extras" }, { "name": "fine-print", "class": "smbk-footer__fine-print" }, { "name": "wordmark", "class": "smbk-footer__wordmark" }, { "name": "wide-only", "class": "smbk-footer__wide-only" }, { "name": "narrow-only", "class": "smbk-footer__narrow-only" } ], "props": [ { "name": "look", "kind": "choice", "values": [ "columns", "minimal", "centred", "floating", "call-to-action", "big-wordmark" ], "default": "columns", "description": "Columns: the brand beside columns of page links, then the legal strip. Minimal: a divider over the legal strip alone, its copyright at the start, its legal links in the middle and its social links at the end. Centred: the brand, a row of page links and the legal strip, each centered. Floating: the columns look on a raised card. Call to action: a card asking for one action above the columns look. Big wordmark: the columns look with the name set as wide as the footer under it. On a phone the columns fold into rows that open. Figma calls this Style.", "classes": { "columns": "smbk-footer--look-columns", "minimal": "smbk-footer--look-minimal", "centred": "smbk-footer--look-centred", "floating": "smbk-footer--look-floating", "call-to-action": "smbk-footer--look-call-to-action", "big-wordmark": "smbk-footer--look-big-wordmark" } }, { "name": "divider", "kind": "choice", "values": [ "on", "off" ], "default": "on", "description": "The divider above the legal strip. Figma: Divider (on by default).", "classes": { "on": "smbk-footer--divider-on", "off": "smbk-footer--divider-off" } }, { "name": "legal", "kind": "choice", "values": [ "start", "end" ], "default": "start", "description": "Where the legal links sit in the legal strip in a wide space. Start: after the copyright and the tagline, as Figma's strip draws them. End: at the strip's end, before the extras when there are some, the copyright and the tagline staying at the start. On a phone the strip stacks the same either way. The centred and minimal looks place their legal links themselves, so it changes the other four. End is not in Figma.", "classes": { "start": "smbk-footer--legal-start", "end": "smbk-footer--legal-end" } }, { "name": "column-width", "kind": "choice", "values": [ "hug", "equal" ], "default": "hug", "description": "Hug: each column of links as wide as its longest link, and columns that run out of room wrap one at a time, as Figma draws them. Equal: every column as wide as the widest, the same gap between them, all in one row where they fit and otherwise in two rows as even as the count allows, four as two and two, sitting at the row's end. The folded columns on a phone are the same either way. Equal is not in Figma.", "classes": { "hug": "smbk-footer--column-width-hug", "equal": "smbk-footer--column-width-equal" } }, { "name": "background", "kind": "flag", "description": "A band behind the footer: the default surface with a hairline along its top, so the footer stands apart from a page on the canvas color. Figma: Background (off by default).", "classes": { "true": "smbk-footer--background" } }, { "name": "zone", "kind": "flag", "description": "The footer's own room, as Figma draws it: its content held to the content width and centered, with Figma's space above, below and at the sides (a small margin around the floating card). Off by default, so a page that already places its footer keeps its own room.", "classes": { "true": "smbk-footer--zone" } } ], "page": "https://design.simbolik.ai/components/footer/", "markdown": "https://design.simbolik.ai/components/footer.md" }, { "name": "header", "title": "Header", "status": "candidate", "summary": "The top of a website: brand, page links, a call to action and the theme switch, in five looks; the links fold into a menu when they do not fit.", "block": [ "smbk-header" ], "parts": [ { "name": "panel", "class": "smbk-header__panel" }, { "name": "frost", "class": "smbk-header__frost" }, { "name": "bar", "class": "smbk-header__bar" }, { "name": "start", "class": "smbk-header__start" }, { "name": "brand", "class": "smbk-header__brand" }, { "name": "logo", "class": "smbk-header__logo" }, { "name": "trail", "class": "smbk-header__trail" }, { "name": "nav", "class": "smbk-header__nav" }, { "name": "links", "class": "smbk-header__links" }, { "name": "end", "class": "smbk-header__end" }, { "name": "theme", "class": "smbk-header__theme" }, { "name": "menu-button", "class": "smbk-header__menu-button" }, { "name": "second-row", "class": "smbk-header__second-row" }, { "name": "second-row-nav", "class": "smbk-header__second-row-nav" }, { "name": "menu", "class": "smbk-header__menu" }, { "name": "menu-list", "class": "smbk-header__menu-list" }, { "name": "group", "class": "smbk-header__group" }, { "name": "menu-cta", "class": "smbk-header__menu-cta" }, { "name": "wide-only", "class": "smbk-header__wide-only" }, { "name": "narrow-only", "class": "smbk-header__narrow-only" } ], "props": [ { "name": "look", "kind": "choice", "values": [ "floating", "floating-hug", "flat", "split", "centred" ], "default": "floating", "description": "Floating: a raised bar with rounded corners and a hairline edge, the links in the true middle. Floating hug: the same bar only as wide as its content, centered. Flat: a square bar with no edge or shadow, a line along its foot. Split: the brand on an island of its own at the start, the links and the end on one at the end. Centred: the links at the start, the brand in the middle (in a narrow space the theme switch steps aside so the brand can sit in the middle). Figma calls this Style; the app bar has the same looks.", "classes": { "floating": "smbk-header--look-floating", "floating-hug": "smbk-header--look-floating-hug", "flat": "smbk-header--look-flat", "split": "smbk-header--look-split", "centred": "smbk-header--look-centred" } }, { "name": "size", "kind": "choice", "values": [ "md", "lg" ], "default": "md", "description": "How large the page links in the wide bar are. md is Figma's header: the middle navigation item, the extra-small step apart. lg is the large item the large step apart, as the header drew them before. The narrow menu keeps its large items either way.", "classes": { "md": "smbk-header--size-md", "lg": "smbk-header--size-lg" } }, { "name": "background", "kind": "choice", "values": [ "on", "off" ], "default": "on", "description": "The bar's own surface. Off drops its fill, edge and shadow so it sits on whatever is behind it; the open menu keeps its surface, as Figma draws the open header only with one. Figma: Background (on by default).", "classes": { "on": "smbk-header--background-on", "off": "smbk-header--background-off" } }, { "name": "line", "kind": "choice", "values": [ "on", "off" ], "default": "on", "description": "The hairline along the foot of a flat bar. Only the flat look draws it. Figma: Line (on by default).", "classes": { "on": "smbk-header--line-on", "off": "smbk-header--line-off" } }, { "name": "fold", "kind": "choice", "values": [ "none", "links" ], "default": "none", "description": "Whether the page links have folded away in a wide space too narrow for them: the menu button then shows and opens them under the bar, while the call to action and the theme switch stay. The wrapper measures the row and sets it; markup written by hand sets it the same way.", "classes": { "none": "smbk-header--fold-none", "links": "smbk-header--fold-links" } }, { "name": "expanded", "kind": "flag", "description": "The menu is open under the bar: in a narrow space, or in a wide one whose links have folded away.", "classes": { "true": "smbk-header--expanded" } }, { "name": "zone", "kind": "flag", "description": "The bar's own room, as Figma draws it: the medium inset above and below a floating bar and a step in from the sides, and its row held to the content width. Off by default, so a page that already leaves room around its header keeps its own.", "classes": { "true": "smbk-header--zone" } }, { "name": "frosted", "kind": "flag", "description": "A blur behind the bar, strongest at the top and gone by its foot, so what scrolls under it is never read sharply there. For a bar with its background off, or with its own room. Not drawn when the system asks for forced colors.", "classes": { "true": "smbk-header--frosted" } } ], "page": "https://design.simbolik.ai/components/header/", "markdown": "https://design.simbolik.ai/components/header.md" }, { "name": "heatmap", "title": "Heatmap", "status": "experimental", "summary": "A grid of days, a column for each week, each day shaded by how much happened, with the months above, a summary and a scale from less to more.", "block": [ "smbk-heatmap" ], "parts": [ { "name": "chart", "class": "smbk-heatmap__chart" }, { "name": "weekdays", "class": "smbk-heatmap__weekdays" }, { "name": "weekday", "class": "smbk-heatmap__weekday" }, { "name": "week", "class": "smbk-heatmap__week" }, { "name": "month", "class": "smbk-heatmap__month" }, { "name": "month-name", "class": "smbk-heatmap__month-name" }, { "name": "cell", "class": "smbk-heatmap__cell" }, { "name": "legend", "class": "smbk-heatmap__legend" }, { "name": "summary", "class": "smbk-heatmap__summary" }, { "name": "scale", "class": "smbk-heatmap__scale" }, { "name": "scale-word", "class": "smbk-heatmap__scale-word" }, { "name": "table", "class": "smbk-heatmap__table" }, { "name": "hidden", "class": "smbk-heatmap__hidden" } ], "props": [], "page": "https://design.simbolik.ai/components/heatmap/", "markdown": "https://design.simbolik.ai/components/heatmap.md" }, { "name": "icon", "title": "Icon", "status": "candidate", "summary": "A Phosphor glyph in one of the system icon sizes, inheriting the color of the text beside it.", "block": [ "smbk-icon" ], "parts": [], "props": [ { "name": "size", "kind": "choice", "values": [ "xs", "sm", "md", "lg", "xl", "2xl" ], "default": "md", "description": "The icon size box. Components that place an icon usually set this themselves.", "classes": { "xs": "smbk-icon--size-xs", "sm": "smbk-icon--size-sm", "md": "smbk-icon--size-md", "lg": "smbk-icon--size-lg", "xl": "smbk-icon--size-xl", "2xl": "smbk-icon--size-2xl" } } ], "page": "https://design.simbolik.ai/components/icon/", "markdown": "https://design.simbolik.ai/components/icon.md" }, { "name": "image-placeholder", "title": "Image placeholder", "status": "candidate", "summary": "A flat block that stands where a picture will go, for empty states and mockups.", "block": [ "smbk-image-placeholder" ], "parts": [], "props": [], "page": "https://design.simbolik.ai/components/image-placeholder/", "markdown": "https://design.simbolik.ai/components/image-placeholder.md" }, { "name": "input", "title": "Input", "status": "candidate", "summary": "A single-line text field: a sunken well with an optional icon at either end, room for content before the value and an action after it, in three sizes.", "block": [ "smbk-input" ], "parts": [ { "name": "control", "class": "smbk-input__control" }, { "name": "icon", "class": "smbk-input__icon" }, { "name": "error-icon", "class": "smbk-input__error-icon" }, { "name": "leading-content", "class": "smbk-input__leading-content" }, { "name": "trailing-action", "class": "smbk-input__trailing-action" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "lg", "md", "sm" ], "default": "md", "description": "The control height, with its padding, icons and text: md for forms, lg beside large buttons (a sign-in or search form on a marketing page), sm for dense tables and toolbars. Small text never goes under 16 px on a phone.", "classes": { "lg": "smbk-input--size-lg", "md": "smbk-input--size-md", "sm": "smbk-input--size-sm" } }, { "name": "error", "kind": "flag", "description": "The value is invalid. Draws the danger border, kept while focused, and the error icon; the control also carries aria-invalid.", "classes": { "true": "smbk-input--error" } } ], "page": "https://design.simbolik.ai/components/input/", "markdown": "https://design.simbolik.ai/components/input.md" }, { "name": "kbd", "title": "Kbd", "status": "candidate", "summary": "A keyboard key: a small raised square with the key's symbol in the label face.", "block": [ "smbk-kbd" ], "parts": [], "props": [ { "name": "size", "kind": "choice", "values": [ "lg", "md", "sm" ], "default": "lg", "description": "Figma calls these Large, Medium and Small.", "classes": { "lg": "smbk-kbd--size-lg", "md": "smbk-kbd--size-md", "sm": "smbk-kbd--size-sm" } } ], "page": "https://design.simbolik.ai/components/kbd/", "markdown": "https://design.simbolik.ai/components/kbd.md" }, { "name": "label", "title": "Label", "status": "candidate", "summary": "A field label: the text, an optional required mark, and an optional info icon that carries a tooltip.", "block": [ "smbk-label" ], "parts": [ { "name": "text", "class": "smbk-label__text" }, { "name": "required", "class": "smbk-label__required" }, { "name": "icon", "class": "smbk-label__icon" } ], "props": [ { "name": "tone", "kind": "choice", "values": [ "strong", "subtle" ], "default": "strong", "description": "Default text or subtle text. Figma calls this \"Variant\".", "classes": { "strong": "smbk-label--tone-strong", "subtle": "smbk-label--tone-subtle" } }, { "name": "type", "kind": "choice", "values": [ "default", "small" ], "default": "default", "description": "The body style, or the small label style, as used over groups in the command palette.", "classes": { "default": "smbk-label--type-default", "small": "smbk-label--type-small" } } ], "page": "https://design.simbolik.ai/components/label/", "markdown": "https://design.simbolik.ai/components/label.md" }, { "name": "legend-item", "title": "Legend item", "status": "experimental", "summary": "Names one series of a chart: a swatch in its color, its name, and its value if shown. A list of them is the chart's legend.", "block": [ "smbk-legend-item" ], "parts": [ { "name": "swatch", "class": "smbk-legend-item__swatch" }, { "name": "label", "class": "smbk-legend-item__label" }, { "name": "value", "class": "smbk-legend-item__value" } ], "props": [ { "name": "swatch", "kind": "choice", "values": [ "1", "2", "3", "4", "5", "6", "7", "8", "series", "muted" ], "default": "1", "description": "The series' color: 1 to 8 are the categorical colors in their fixed order, series the one color of a single series, muted the gray for everything else (\"Others\").", "classes": { "1": "smbk-legend-item--swatch-1", "2": "smbk-legend-item--swatch-2", "3": "smbk-legend-item--swatch-3", "4": "smbk-legend-item--swatch-4", "5": "smbk-legend-item--swatch-5", "6": "smbk-legend-item--swatch-6", "7": "smbk-legend-item--swatch-7", "8": "smbk-legend-item--swatch-8", "series": "smbk-legend-item--swatch-series", "muted": "smbk-legend-item--swatch-muted" } } ], "page": "https://design.simbolik.ai/components/legend-item/", "markdown": "https://design.simbolik.ai/components/legend-item.md" }, { "name": "line-chart", "title": "Line chart", "status": "experimental", "summary": "A trend over time: one line, or the same with a soft area under it, or this period against the last as a dashed line, with a value axis, light grid lines and one marked point.", "block": [ "smbk-line-chart" ], "parts": [ { "name": "legend", "class": "smbk-line-chart__legend" }, { "name": "body", "class": "smbk-line-chart__body" }, { "name": "y-axis", "class": "smbk-line-chart__y-axis" }, { "name": "y-label", "class": "smbk-line-chart__y-label" }, { "name": "plot", "class": "smbk-line-chart__plot" }, { "name": "grid", "class": "smbk-line-chart__grid" }, { "name": "gridline", "class": "smbk-line-chart__gridline" }, { "name": "baseline", "class": "smbk-line-chart__baseline" }, { "name": "series", "class": "smbk-line-chart__series" }, { "name": "svg", "class": "smbk-line-chart__svg" }, { "name": "area", "class": "smbk-line-chart__area" }, { "name": "line", "class": "smbk-line-chart__line" }, { "name": "comparison", "class": "smbk-line-chart__comparison" }, { "name": "drop-line", "class": "smbk-line-chart__drop-line" }, { "name": "marker", "class": "smbk-line-chart__marker" }, { "name": "point", "class": "smbk-line-chart__point" }, { "name": "readout", "class": "smbk-line-chart__readout" }, { "name": "x-axis", "class": "smbk-line-chart__x-axis" }, { "name": "x-label", "class": "smbk-line-chart__x-label" }, { "name": "table", "class": "smbk-line-chart__table" }, { "name": "data", "class": "smbk-line-chart__data" } ], "props": [ { "name": "type", "kind": "choice", "values": [ "line", "area" ], "default": "line", "description": "The line alone, or with a soft fill of its color under it. A second series, the period it is compared with, is drawn as a dashed line either way.", "classes": { "line": "smbk-line-chart--type-line", "area": "smbk-line-chart--type-area" } } ], "page": "https://design.simbolik.ai/components/line-chart/", "markdown": "https://design.simbolik.ai/components/line-chart.md" }, { "name": "link", "title": "Link", "status": "candidate", "summary": "Text that goes somewhere, in three sizes or the size of the text around it, with an optional icon; underlined, unless it stands on its own. As a button it stays in the color of the words around it and opens something where it stands.", "block": [ "smbk-link" ], "parts": [ { "name": "icon", "class": "smbk-link__icon" }, { "name": "label", "class": "smbk-link__label" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "lg", "md", "sm", "inherit" ], "default": "lg", "description": "Figma calls these Large, Medium and Small, each a body preset; inherit takes the size of the text around it, as in a heading or a card title.", "classes": { "lg": "smbk-link--size-lg", "md": "smbk-link--size-md", "sm": "smbk-link--size-sm", "inherit": "smbk-link--size-inherit" } }, { "name": "standalone", "kind": "flag", "description": "A link standing on its own, outside running text: underlined on hover and press only.", "classes": { "true": "smbk-link--standalone" } }, { "name": "pressable", "kind": "flag", "description": "Words that are pressed rather than followed, such as a name that opens its card: a button in the color of the text around it, its line always there.", "classes": { "true": "smbk-link--pressable" } } ], "page": "https://design.simbolik.ai/components/link/", "markdown": "https://design.simbolik.ai/components/link.md" }, { "name": "list", "title": "List", "status": "experimental", "summary": "Rows of the same kind, one thing each: plain, bulleted or numbered text, or rows with an icon, a title and a quiet line that go somewhere, do something or can be chosen.", "block": [ "smbk-list" ], "parts": [ { "name": "title", "class": "smbk-list__title" }, { "name": "items", "class": "smbk-list__items" }, { "name": "item", "class": "smbk-list__item" }, { "name": "marker", "class": "smbk-list__marker" }, { "name": "text", "class": "smbk-list__text" }, { "name": "row", "class": "smbk-list__row" }, { "name": "start", "class": "smbk-list__start" }, { "name": "leading", "class": "smbk-list__leading" }, { "name": "body", "class": "smbk-list__body" }, { "name": "item-title", "class": "smbk-list__item-title" }, { "name": "meta", "class": "smbk-list__meta" }, { "name": "trailing", "class": "smbk-list__trailing" }, { "name": "check", "class": "smbk-list__check" }, { "name": "end", "class": "smbk-list__end" }, { "name": "divider", "class": "smbk-list__divider" }, { "name": "empty", "class": "smbk-list__empty" }, { "name": "glide", "class": "smbk-list__glide" } ], "props": [ { "name": "type", "kind": "choice", "values": [ "plain", "bulleted", "numbered", "navigation", "action", "selectable" ], "default": "plain", "description": "Plain, bulleted and numbered lists are text. Navigation rows are links, action rows are buttons or hold one, and selectable rows are options a reader chooses.", "classes": { "plain": "smbk-list--type-plain", "bulleted": "smbk-list--type-bulleted", "numbered": "smbk-list--type-numbered", "navigation": "smbk-list--type-navigation", "action": "smbk-list--type-action", "selectable": "smbk-list--type-selectable" } }, { "name": "size", "kind": "choice", "values": [ "sm", "md" ], "default": "sm", "description": "The rows of navigation, action and selectable lists: sm rows are at least 40 tall, md rows 48, with more room above and below. Text lists have one size.", "classes": { "sm": "smbk-list--size-sm", "md": "smbk-list--size-md" } }, { "name": "dividers", "kind": "flag", "description": "A line between rows, for rows that are actions or choices. Text lists are grouped by their spacing and rarely need one.", "classes": { "true": "smbk-list--dividers" } }, { "name": "tickless", "kind": "flag", "description": "A selectable list whose chosen row shows by its fill and a bolder title, with no tick: for a list where choosing a row opens it, such as an inbox beside its reading pane, where a tick would read as chosen for later. The keyboard and what a screen reader hears stay the same.", "classes": { "true": "smbk-list--tickless" } } ], "page": "https://design.simbolik.ai/components/list/", "markdown": "https://design.simbolik.ai/components/list.md" }, { "name": "log", "title": "Log", "status": "experimental", "summary": "What a program prints as it runs: wrapped lines in a well that keeps the newest in view until the reader scrolls up.", "block": [ "smbk-log" ], "parts": [ { "name": "header", "class": "smbk-log__header" }, { "name": "title", "class": "smbk-log__title" }, { "name": "status", "class": "smbk-log__status" }, { "name": "well", "class": "smbk-log__well" }, { "name": "scroll", "class": "smbk-log__scroll" }, { "name": "note", "class": "smbk-log__note" }, { "name": "divider", "class": "smbk-log__divider" }, { "name": "lines", "class": "smbk-log__lines" }, { "name": "jump", "class": "smbk-log__jump" }, { "name": "announcement", "class": "smbk-log__announcement" } ], "props": [ { "name": "state", "kind": "choice", "values": [ "running", "finished" ], "default": "running", "description": "Running while the program prints, finished once it stops. The badge says which, and a screen reader hears when it starts and when it ends.", "classes": { "running": "smbk-log--state-running", "finished": "smbk-log--state-finished" } } ], "page": "https://design.simbolik.ai/components/log/", "markdown": "https://design.simbolik.ai/components/log.md" }, { "name": "logo", "title": "Logo", "status": "experimental", "summary": "The Simbolik brand mark: the full logo, the mark alone, or the wordmark alone, colored by the text roles; or a site's own logo as shapes or as a picture file.", "block": [ "smbk-logo" ], "parts": [ { "name": "mark", "class": "smbk-logo__mark" }, { "name": "type", "class": "smbk-logo__type" }, { "name": "picture", "class": "smbk-logo__picture" }, { "name": "picture-dark", "class": "smbk-logo__picture-dark" } ], "props": [ { "name": "brand", "kind": "choice", "values": [ "simbolik" ], "default": "simbolik", "description": "Which brand's logo. The logo stays simbolik's, and no license covers it; a product built on the design system replaces it with its own.", "classes": { "simbolik": "smbk-logo--brand-simbolik" } }, { "name": "form", "kind": "choice", "values": [ "logo", "logomark", "logotype" ], "default": "logo", "description": "The whole logo, the mark alone, or the wordmark alone. Figma calls this \"Variant\" / \"Type\".", "classes": { "logo": "smbk-logo--form-logo", "logomark": "smbk-logo--form-logomark", "logotype": "smbk-logo--form-logotype" } }, { "name": "source", "kind": "choice", "values": [ "shapes", "picture" ], "default": "shapes", "description": "Shapes are drawn in the page and take the system's colors, so they follow the theme; a picture is a site's logo file, drawn as an image with its own colors, and a dark version under the dark theme.", "classes": { "shapes": "smbk-logo--source-shapes", "picture": "smbk-logo--source-picture" } } ], "page": "https://design.simbolik.ai/components/logo/", "markdown": "https://design.simbolik.ai/components/logo.md" }, { "name": "menubar", "title": "Menubar", "status": "proposed", "summary": "A row of menu titles, as at the top of a desktop app (File, Edit, View), each opening a dropdown menu; the arrow keys move along the bar and from one open menu to the next.", "block": [ "smbk-menubar" ], "parts": [ { "name": "item", "class": "smbk-menubar__item" } ], "props": [], "page": "https://design.simbolik.ai/components/menubar/", "markdown": "https://design.simbolik.ai/components/menubar.md" }, { "name": "meter", "title": "Meter", "status": "experimental", "summary": "A short bar showing how full something is inside a known range, such as storage used, with an optional label and value.", "block": [ "smbk-meter" ], "parts": [], "props": [ { "name": "tone", "kind": "choice", "values": [ "series", "success", "warning", "danger" ], "default": "series", "description": "The fill: series is the chart color, for a level that is neither good nor bad; success, warning and danger say how the level stands. The page chooses it.", "classes": { "series": "smbk-meter--tone-series", "success": "smbk-meter--tone-success", "warning": "smbk-meter--tone-warning", "danger": "smbk-meter--tone-danger" } } ], "page": "https://design.simbolik.ai/components/meter/", "markdown": "https://design.simbolik.ai/components/meter.md" }, { "name": "modal", "title": "Modal", "status": "experimental", "summary": "A centered dialog over a scrim for a short interruption: an icon and title, a body, and a footer of actions.", "block": [ "smbk-modal" ], "parts": [ { "name": "header", "class": "smbk-modal__header" }, { "name": "icon", "class": "smbk-modal__icon" }, { "name": "title", "class": "smbk-modal__title" }, { "name": "close", "class": "smbk-modal__close" }, { "name": "body", "class": "smbk-modal__body" }, { "name": "footer", "class": "smbk-modal__footer" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "sm", "md", "lg" ], "default": "sm", "description": "The greatest width the panel takes.", "classes": { "sm": "smbk-modal--size-sm", "md": "smbk-modal--size-md", "lg": "smbk-modal--size-lg" } }, { "name": "inline", "kind": "flag", "description": "Shown in place with no scrim, for previews and documentation.", "classes": { "true": "smbk-modal--inline" } } ], "page": "https://design.simbolik.ai/components/modal/", "markdown": "https://design.simbolik.ai/components/modal.md" }, { "name": "nav-item", "title": "Navigation item", "status": "candidate", "summary": "One link in a navigation list, with an optional leading icon, an optional count or dot, and a caret when it opens a group of further links.", "block": [ "smbk-nav-item" ], "parts": [ { "name": "icon", "class": "smbk-nav-item__icon" }, { "name": "label", "class": "smbk-nav-item__label" }, { "name": "pause", "class": "smbk-nav-item__pause" }, { "name": "count", "class": "smbk-nav-item__count" }, { "name": "dot", "class": "smbk-nav-item__dot" }, { "name": "caret", "class": "smbk-nav-item__caret" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "lg", "md", "sm" ], "default": "lg", "description": "lg is 40 tall with 16 px text and a 20 px icon, md 32 tall with 14 px text and a 16 px icon, sm 24 tall with 12 px text and a 12 px icon. The app bar, the header and their stacked menus use the large one; the footer uses the middle one. Figma: lg, md, sm (its default is md).", "classes": { "lg": "smbk-nav-item--size-lg", "md": "smbk-nav-item--size-md", "sm": "smbk-nav-item--size-sm" } }, { "name": "block", "kind": "flag", "description": "Fills its row with the caret at the far end, for stacked lists. Figma: the expanded mobile menus.", "classes": { "true": "smbk-nav-item--block" } } ], "page": "https://design.simbolik.ai/components/nav-item/", "markdown": "https://design.simbolik.ai/components/nav-item.md" }, { "name": "navigation-menu", "title": "Navigation menu", "status": "proposed", "summary": "A site header's links, where an item with a caret opens a wide panel of described links and a featured column.", "block": [ "smbk-navigation-menu" ], "parts": [ { "name": "list", "class": "smbk-navigation-menu__list" }, { "name": "item", "class": "smbk-navigation-menu__item" }, { "name": "trigger", "class": "smbk-navigation-menu__trigger" }, { "name": "panel", "class": "smbk-navigation-menu__panel" }, { "name": "column", "class": "smbk-navigation-menu__column" }, { "name": "heading", "class": "smbk-navigation-menu__heading" }, { "name": "links", "class": "smbk-navigation-menu__links" }, { "name": "link", "class": "smbk-navigation-menu__link" }, { "name": "link-icon", "class": "smbk-navigation-menu__link-icon" }, { "name": "link-text", "class": "smbk-navigation-menu__link-text" }, { "name": "link-title", "class": "smbk-navigation-menu__link-title" }, { "name": "link-description", "class": "smbk-navigation-menu__link-description" }, { "name": "featured", "class": "smbk-navigation-menu__featured" }, { "name": "featured-text", "class": "smbk-navigation-menu__featured-text" }, { "name": "featured-title", "class": "smbk-navigation-menu__featured-title" }, { "name": "featured-description", "class": "smbk-navigation-menu__featured-description" }, { "name": "featured-link", "class": "smbk-navigation-menu__featured-link" } ], "props": [ { "name": "align", "kind": "choice", "values": [ "start", "end" ], "default": "start", "description": "Which edge of the row the open panel lines up with: start for links at the start of a header, end for links at its end, so the panel stays on the page.", "classes": { "start": "smbk-navigation-menu--align-start", "end": "smbk-navigation-menu--align-end" } } ], "page": "https://design.simbolik.ai/components/navigation-menu/", "markdown": "https://design.simbolik.ai/components/navigation-menu.md" }, { "name": "number-field", "title": "Number field", "status": "experimental", "summary": "A text field for a quantity or a measure, with its unit and minus and plus buttons that step it between its limits.", "block": [ "smbk-number-field" ], "parts": [ { "name": "control", "class": "smbk-number-field__control" }, { "name": "unit", "class": "smbk-number-field__unit" }, { "name": "separator", "class": "smbk-number-field__separator" }, { "name": "decrement", "class": "smbk-number-field__decrement" }, { "name": "increment", "class": "smbk-number-field__increment" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "description": "The input’s two heights, with its padding and text. The step buttons’ icons are 16 px at both; at sm each button is a 24 px square, so it fits inside the small well. Small text never goes under 16 px on a phone.", "classes": { "md": "smbk-number-field--size-md", "sm": "smbk-number-field--size-sm" } }, { "name": "error", "kind": "flag", "description": "The number is not one the form can take. Draws the danger border, kept while focused, and the error icon before the unit.", "classes": { "true": "smbk-number-field--error" } } ], "page": "https://design.simbolik.ai/components/number-field/", "markdown": "https://design.simbolik.ai/components/number-field.md" }, { "name": "one-time-code-input", "title": "One-time code input", "status": "proposed", "summary": "Six boxes in two groups of three that act as one field, for a code sent by email or text message.", "block": [ "smbk-one-time-code-input" ], "parts": [ { "name": "group", "class": "smbk-one-time-code-input__group" }, { "name": "cell", "class": "smbk-one-time-code-input__cell" }, { "name": "digit", "class": "smbk-one-time-code-input__digit" }, { "name": "control", "class": "smbk-one-time-code-input__control" } ], "props": [ { "name": "error", "kind": "flag", "description": "The code is wrong or has run out. Draws the danger edge on every cell, kept while focused; the control also carries aria-invalid.", "classes": { "true": "smbk-one-time-code-input--error" } } ], "page": "https://design.simbolik.ai/components/one-time-code-input/", "markdown": "https://design.simbolik.ai/components/one-time-code-input.md" }, { "name": "page-header", "title": "Page header", "status": "experimental", "summary": "The top of one page or one object: the breadcrumbs, the page’s one main heading, a short introduction, its status, and the few actions for the whole page.", "block": [ "smbk-page-header" ], "parts": [ { "name": "breadcrumbs", "class": "smbk-page-header__breadcrumbs" }, { "name": "main", "class": "smbk-page-header__main" }, { "name": "body", "class": "smbk-page-header__body" }, { "name": "title-row", "class": "smbk-page-header__title-row" }, { "name": "title", "class": "smbk-page-header__title" }, { "name": "status", "class": "smbk-page-header__status" }, { "name": "description", "class": "smbk-page-header__description" }, { "name": "meta", "class": "smbk-page-header__meta" }, { "name": "actions", "class": "smbk-page-header__actions" }, { "name": "action", "class": "smbk-page-header__action" }, { "name": "more", "class": "smbk-page-header__more" }, { "name": "tabs", "class": "smbk-page-header__tabs" }, { "name": "tabs-cue", "class": "smbk-page-header__tabs-cue" }, { "name": "tabs-skeleton", "class": "smbk-page-header__tabs-skeleton" }, { "name": "hidden", "class": "smbk-page-header__hidden" } ], "props": [ { "name": "composition", "kind": "choice", "values": [ "simple", "object", "tabbed" ], "default": "simple", "description": "Simple is a title, an introduction and actions. Object adds a status beside the title and a line of facts, for the page of one thing. Tabbed ends with tabs that switch the page’s views. The wrapper sets it from what it is given.", "classes": { "simple": "smbk-page-header--composition-simple", "object": "smbk-page-header--composition-object", "tabbed": "smbk-page-header--composition-tabbed" } }, { "name": "loading", "kind": "flag", "description": "The page is still loading: the words are skeleton lines of their own height, the actions are drawn disabled, and the tabs are skeletons that cannot be pressed.", "classes": { "true": "smbk-page-header--loading" } } ], "page": "https://design.simbolik.ai/components/page-header/", "markdown": "https://design.simbolik.ai/components/page-header.md" }, { "name": "pagination", "title": "Pagination", "status": "candidate", "summary": "Moves between the pages of a long list: numbered buttons in a bar, Previous and Next around a select of pages, or a range readout for a table.", "block": [ "smbk-pagination" ], "parts": [ { "name": "list", "class": "smbk-pagination__list" }, { "name": "item", "class": "smbk-pagination__item" }, { "name": "page", "class": "smbk-pagination__page" }, { "name": "gap", "class": "smbk-pagination__gap" }, { "name": "status", "class": "smbk-pagination__status" }, { "name": "previous", "class": "smbk-pagination__previous" }, { "name": "next", "class": "smbk-pagination__next" }, { "name": "select", "class": "smbk-pagination__select" }, { "name": "label", "class": "smbk-pagination__label" }, { "name": "wide-only", "class": "smbk-pagination__wide-only" }, { "name": "narrow-only", "class": "smbk-pagination__narrow-only" } ], "props": [ { "name": "type", "kind": "choice", "values": [ "numbers", "select", "range" ], "default": "numbers", "description": "Figma: Default (numbers), Select, Range.", "classes": { "numbers": "smbk-pagination--type-numbers", "select": "smbk-pagination--type-select", "range": "smbk-pagination--type-range" } }, { "name": "borderless", "kind": "flag", "description": "The numbers bar without its border. Figma: Border=No.", "classes": { "true": "smbk-pagination--borderless" } } ], "page": "https://design.simbolik.ai/components/pagination/", "markdown": "https://design.simbolik.ai/components/pagination.md" }, { "name": "password-field", "title": "Password field", "status": "experimental", "summary": "A text field for a password or a passphrase, with a button at its end that shows and hides what is typed.", "block": [ "smbk-password-field" ], "parts": [ { "name": "control", "class": "smbk-password-field__control" }, { "name": "toggle", "class": "smbk-password-field__toggle" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "description": "The input’s two heights, with its padding and text. The button’s eye is 16 px at both; at sm the button is a 24 px square, so it fits inside the small well. Small text never goes under 16 px on a phone.", "classes": { "md": "smbk-password-field--size-md", "sm": "smbk-password-field--size-sm" } }, { "name": "error", "kind": "flag", "description": "The password is wrong or breaks a rule. Draws the danger border, kept while focused, and the error icon before the button.", "classes": { "true": "smbk-password-field--error" } } ], "page": "https://design.simbolik.ai/components/password-field/", "markdown": "https://design.simbolik.ai/components/password-field.md" }, { "name": "picture-tile", "title": "Picture tile", "status": "experimental", "summary": "A pressable tile with a picture and a short label under it, for choosing among looks, presets or templates in a gallery.", "block": [ "smbk-picture-tile" ], "parts": [ { "name": "picture", "class": "smbk-picture-tile__picture" }, { "name": "label", "class": "smbk-picture-tile__label" }, { "name": "tick", "class": "smbk-picture-tile__tick" } ], "props": [ { "name": "ratio", "kind": "choice", "values": [ "4-3", "1-1" ], "default": "4-3", "description": "The picture's proportion, width to height: 4:3 or square.", "classes": { "4-3": "smbk-picture-tile--ratio-4-3", "1-1": "smbk-picture-tile--ratio-1-1" } }, { "name": "selected", "kind": "flag", "description": "The chosen tile: the rim edge at the emphasis width and a tick at the picture's corner. Pressed for assistive technology.", "classes": { "true": "smbk-picture-tile--selected" } } ], "page": "https://design.simbolik.ai/components/picture-tile/", "markdown": "https://design.simbolik.ai/components/picture-tile.md" }, { "name": "popover", "title": "Popover", "status": "candidate", "summary": "A small raised panel that opens from a button and stays beside it, holding a title, a few lines or a field, and actions, without blocking the page.", "block": [ "smbk-popover" ], "parts": [ { "name": "anchor", "class": "smbk-popover__anchor" }, { "name": "layer", "class": "smbk-popover__layer" }, { "name": "scroll", "class": "smbk-popover__scroll" }, { "name": "pointer", "class": "smbk-popover__pointer" }, { "name": "header", "class": "smbk-popover__header" }, { "name": "heading", "class": "smbk-popover__heading" }, { "name": "icon", "class": "smbk-popover__icon" }, { "name": "titles", "class": "smbk-popover__titles" }, { "name": "title", "class": "smbk-popover__title" }, { "name": "description", "class": "smbk-popover__description" }, { "name": "close", "class": "smbk-popover__close" }, { "name": "divider", "class": "smbk-popover__divider" }, { "name": "body", "class": "smbk-popover__body" }, { "name": "footer", "class": "smbk-popover__footer" }, { "name": "helper", "class": "smbk-popover__helper" } ], "props": [ { "name": "align", "kind": "choice", "values": [ "start", "end" ], "default": "start", "description": "Which edge of the opener the panel lines up with. End keeps a popover at the right of a bar inside the window.", "classes": { "start": "smbk-popover--align-start", "end": "smbk-popover--align-end" } }, { "name": "side", "kind": "choice", "values": [ "below", "above", "left", "right" ], "default": "below", "description": "The side of the opener the panel prefers. With script it takes the opposite side when this one has no room, as at the foot of the window, and below when neither the left nor the right has room, as on a phone.", "classes": { "below": "smbk-popover--side-below", "above": "smbk-popover--side-above", "left": "smbk-popover--side-left", "right": "smbk-popover--side-right" } }, { "name": "pointer", "kind": "flag", "description": "A small triangle on the panel's edge, pointing at the middle of what opened it.", "classes": { "true": "smbk-popover--pointer" } } ], "page": "https://design.simbolik.ai/components/popover/", "markdown": "https://design.simbolik.ai/components/popover.md" }, { "name": "progress", "title": "Progress bar", "status": "candidate", "summary": "A track with a fill showing how far something has got, with an optional label and value above it; it can say the work failed, or that its end is not known.", "block": [ "smbk-progress" ], "parts": [ { "name": "header", "class": "smbk-progress__header" }, { "name": "label", "class": "smbk-progress__label" }, { "name": "icon", "class": "smbk-progress__icon" }, { "name": "value", "class": "smbk-progress__value" }, { "name": "retry", "class": "smbk-progress__retry" }, { "name": "track", "class": "smbk-progress__track" }, { "name": "fill", "class": "smbk-progress__fill" } ], "props": [ { "name": "tone", "kind": "choice", "values": [ "default", "brand", "success", "warning", "danger" ], "default": "brand", "description": "What fills the track. A failed bar is always danger.", "classes": { "default": "smbk-progress--tone-default", "brand": "smbk-progress--tone-brand", "success": "smbk-progress--tone-success", "warning": "smbk-progress--tone-warning", "danger": "smbk-progress--tone-danger" } }, { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "description": "Small uses the slim track and the smaller label styles, for dense rows and lists.", "classes": { "md": "smbk-progress--size-md", "sm": "smbk-progress--size-sm" } }, { "name": "type", "kind": "choice", "values": [ "default", "pixel" ], "default": "default", "description": "Default is one smooth bar. Pixel cuts the track into twenty segments and fills whole ones.", "classes": { "default": "smbk-progress--type-default", "pixel": "smbk-progress--type-pixel" } }, { "name": "state", "kind": "choice", "values": [ "default", "failed", "unknown" ], "default": "default", "description": "Failed leads with the danger icon and words and offers to try again. Unknown shows a detached part of the track and no number, for work whose end is not known.", "classes": { "default": "smbk-progress--state-default", "failed": "smbk-progress--state-failed", "unknown": "smbk-progress--state-unknown" } } ], "page": "https://design.simbolik.ai/components/progress/", "markdown": "https://design.simbolik.ai/components/progress.md" }, { "name": "progress-ring", "title": "Progress ring", "status": "experimental", "summary": "A ring that fills clockwise from the top to show how far something has got, with the value in the middle.", "block": [ "smbk-progress-ring" ], "parts": [ { "name": "track", "class": "smbk-progress-ring__track" }, { "name": "value", "class": "smbk-progress-ring__value" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "description": "Medium shows the value in the middle; small is a thinner ring with no room for it, for a row or a list.", "classes": { "md": "smbk-progress-ring--size-md", "sm": "smbk-progress-ring--size-sm" } }, { "name": "complete", "kind": "flag", "description": "The value has reached the end: the whole ring turns to the success color. The wrapper sets it; plain markup sets it the same way.", "classes": { "true": "smbk-progress-ring--complete" } } ], "page": "https://design.simbolik.ai/components/progress-ring/", "markdown": "https://design.simbolik.ai/components/progress-ring.md" }, { "name": "radio", "title": "Radio", "status": "candidate", "summary": "One of several choices, only one of which can be chosen, with its label beside it and an optional line under the label.", "block": [ "smbk-radio" ], "parts": [ { "name": "control", "class": "smbk-radio__control" }, { "name": "circle", "class": "smbk-radio__circle" }, { "name": "dot", "class": "smbk-radio__dot" }, { "name": "label", "class": "smbk-radio__label" }, { "name": "text", "class": "smbk-radio__text" }, { "name": "description", "class": "smbk-radio__description" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "classes": { "md": "smbk-radio--size-md", "sm": "smbk-radio--size-sm" } }, { "name": "error", "kind": "flag", "description": "The choice is invalid, such as a required group left empty. An empty ring takes the danger edge; a chosen one keeps its fill inside a danger ring; the control also carries aria-invalid.", "classes": { "true": "smbk-radio--error" } } ], "page": "https://design.simbolik.ai/components/radio/", "markdown": "https://design.simbolik.ai/components/radio.md" }, { "name": "ruler", "title": "Ruler", "status": "experimental", "summary": "A width ruler for a preview: the layout states and breakpoints along one band, the screen widths, and a handle for the width now.", "block": [ "smbk-ruler" ], "parts": [ { "name": "scale", "class": "smbk-ruler__scale" }, { "name": "band", "class": "smbk-ruler__band" }, { "name": "zone", "class": "smbk-ruler__zone" }, { "name": "break", "class": "smbk-ruler__break" }, { "name": "tick", "class": "smbk-ruler__tick" }, { "name": "handle", "class": "smbk-ruler__handle" }, { "name": "widths", "class": "smbk-ruler__widths" }, { "name": "width", "class": "smbk-ruler__width" }, { "name": "now", "class": "smbk-ruler__now" }, { "name": "controls", "class": "smbk-ruler__controls" }, { "name": "fit", "class": "smbk-ruler__fit" }, { "name": "hide", "class": "smbk-ruler__hide" } ], "props": [], "page": "https://design.simbolik.ai/components/ruler/", "markdown": "https://design.simbolik.ai/components/ruler.md" }, { "name": "search-field", "title": "Search field", "status": "candidate", "summary": "A text field for filtering or searching, with a magnifier before the text, a clear control after it and an optional key hint at the end.", "block": [ "smbk-search" ], "parts": [ { "name": "control", "class": "smbk-search__control" }, { "name": "clear", "class": "smbk-search__clear" }, { "name": "kbd", "class": "smbk-search__kbd" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "lg", "md", "sm" ], "default": "md", "description": "lg is 48 tall with larger text, for a search that leads a page; md and sm are the input’s two heights, with their padding, icons and text. Small text never goes under 16 px on a phone.", "classes": { "lg": "smbk-search--size-lg", "md": "smbk-search--size-md", "sm": "smbk-search--size-sm" } }, { "name": "error", "kind": "flag", "description": "The query is invalid. Draws the danger border, kept while focused, and the error icon.", "classes": { "true": "smbk-search--error" } } ], "page": "https://design.simbolik.ai/components/search-field/", "markdown": "https://design.simbolik.ai/components/search-field.md" }, { "name": "section-heading", "title": "Section heading", "status": "experimental", "summary": "The heading row of a section or a panel: its title, how many it holds, a quiet line such as how fresh it is, and one action at its end.", "block": [ "smbk-section-heading" ], "parts": [ { "name": "text", "class": "smbk-section-heading__text" }, { "name": "title-row", "class": "smbk-section-heading__title-row" }, { "name": "title", "class": "smbk-section-heading__title" }, { "name": "count", "class": "smbk-section-heading__count" }, { "name": "summary", "class": "smbk-section-heading__summary" }, { "name": "action", "class": "smbk-section-heading__action" }, { "name": "hidden", "class": "smbk-section-heading__hidden" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "description": "Small sets the title a heading step smaller with a smaller count, for a panel among many.", "classes": { "md": "smbk-section-heading--size-md", "sm": "smbk-section-heading--size-sm" } } ], "page": "https://design.simbolik.ai/components/section-heading/", "markdown": "https://design.simbolik.ai/components/section-heading.md" }, { "name": "segmented-control", "title": "Segmented control", "status": "candidate", "summary": "A row of named choices in one bar, one of which is selected, with the selected one raised.", "block": [ "smbk-segmented" ], "parts": [ { "name": "indicator", "class": "smbk-segmented__indicator" }, { "name": "item", "class": "smbk-segmented__item" }, { "name": "icon", "class": "smbk-segmented__icon" }, { "name": "label", "class": "smbk-segmented__label" }, { "name": "short", "class": "smbk-segmented__short" }, { "name": "description", "class": "smbk-segmented__description" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "lg", "md", "sm" ], "default": "lg", "classes": { "lg": "smbk-segmented--size-lg", "md": "smbk-segmented--size-md", "sm": "smbk-segmented--size-sm" } }, { "name": "item-width", "kind": "choice", "values": [ "equal", "hug" ], "default": "equal", "description": "Equal: every item as wide as the widest, so they share the bar equally, and fill it when the bar is given a width; Figma's items fill their bar this way. Hug: each item as wide as its words. Not in Figma, which draws equal only.", "classes": { "equal": "smbk-segmented--item-width-equal", "hug": "smbk-segmented--item-width-hug" } }, { "name": "content", "kind": "choice", "values": [ "label", "icon", "description" ], "default": "label", "description": "What each item shows. Label: its words, with an icon before them when it has one. Icon: its icon alone (or a short word, for a choice with no icon), its label still the choice's name and shown in a tooltip while pointed at or focused. Description: its label with a short line under it, the bar growing to hold it. Figma's segment item calls this Content: Label, Icon only, Label and description. One for the whole bar.", "classes": { "label": "smbk-segmented--content-label", "icon": "smbk-segmented--content-icon", "description": "smbk-segmented--content-description" } }, { "name": "look", "kind": "choice", "values": [ "standard", "theme" ], "default": "standard", "description": "Standard: the bar as Figma's segmented control draws it. Theme: the theme switch's look, for a bar of icons alone: square items, each icon a step larger than the standard bar's at its size, and an icon hovered in the brand text color. The theme switch draws it.", "classes": { "standard": "smbk-segmented--look-standard", "theme": "smbk-segmented--look-theme" } } ], "page": "https://design.simbolik.ai/components/segmented-control/", "markdown": "https://design.simbolik.ai/components/segmented-control.md" }, { "name": "select", "title": "Select", "status": "candidate", "summary": "A choice from a list: the input well with a caret, opening the dropdown panel with one item per choice, in groups under a heading if wanted, each choice with a picture or an icon and a second line if wanted.", "block": [ "smbk-select" ], "parts": [ { "name": "well", "class": "smbk-select__well" }, { "name": "value", "class": "smbk-select__value" }, { "name": "icon", "class": "smbk-select__icon" }, { "name": "list", "class": "smbk-select__list" }, { "name": "group", "class": "smbk-select__group" }, { "name": "option", "class": "smbk-select__option" }, { "name": "option-lead", "class": "smbk-select__option-lead" }, { "name": "option-text", "class": "smbk-select__option-text" }, { "name": "option-label", "class": "smbk-select__option-label" }, { "name": "option-description", "class": "smbk-select__option-description" }, { "name": "check", "class": "smbk-select__check" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "description": "The input’s two heights, with the dropdown’s items at the same size when open. Small text never goes under 16 px on a phone.", "classes": { "md": "smbk-select--size-md", "sm": "smbk-select--size-sm" } }, { "name": "error", "kind": "flag", "description": "The choice is invalid. Draws the danger border, kept while focused, and the error icon before the caret.", "classes": { "true": "smbk-select--error" } }, { "name": "open", "kind": "flag", "description": "The list is showing. Set by the component while it is open; given to the wrapper, it holds the list open, as in a picture of the page.", "classes": { "true": "smbk-select--open" } } ], "page": "https://design.simbolik.ai/components/select/", "markdown": "https://design.simbolik.ai/components/select.md" }, { "name": "shadow-editor", "title": "Shadow editor", "status": "experimental", "summary": "Edits one shadow: a preview card drawn with it, its layers with their offsets, blur, spread, color and opacity, and a button to add a layer.", "block": [ "smbk-shadow-editor" ], "parts": [ { "name": "preview", "class": "smbk-shadow-editor__preview" }, { "name": "card", "class": "smbk-shadow-editor__card" }, { "name": "layers", "class": "smbk-shadow-editor__layers" }, { "name": "layer", "class": "smbk-shadow-editor__layer" }, { "name": "head", "class": "smbk-shadow-editor__head" }, { "name": "title", "class": "smbk-shadow-editor__title" }, { "name": "handle", "class": "smbk-shadow-editor__handle" }, { "name": "name", "class": "smbk-shadow-editor__name" }, { "name": "remove", "class": "smbk-shadow-editor__remove" }, { "name": "fields", "class": "smbk-shadow-editor__fields" }, { "name": "paint", "class": "smbk-shadow-editor__paint" }, { "name": "field", "class": "smbk-shadow-editor__field" }, { "name": "label", "class": "smbk-shadow-editor__label" }, { "name": "add", "class": "smbk-shadow-editor__add" }, { "name": "hidden", "class": "smbk-shadow-editor__hidden" } ], "props": [], "page": "https://design.simbolik.ai/components/shadow-editor/", "markdown": "https://design.simbolik.ai/components/shadow-editor.md" }, { "name": "sidebar", "title": "Sidebar", "status": "candidate", "summary": "The side panel of an application: the logo, search, labeled groups of links with children, the user, and at the foot a button that keeps it open, keeps it a column of icons, or lets it open over the page when pointed at.", "block": [ "smbk-sidebar" ], "parts": [ { "name": "panel", "class": "smbk-sidebar__panel" }, { "name": "logo", "class": "smbk-sidebar__logo" }, { "name": "brand", "class": "smbk-sidebar__brand" }, { "name": "brand-logo", "class": "smbk-sidebar__brand-logo" }, { "name": "brand-mark", "class": "smbk-sidebar__brand-mark" }, { "name": "search", "class": "smbk-sidebar__search" }, { "name": "search-field", "class": "smbk-sidebar__search-field" }, { "name": "search-button", "class": "smbk-sidebar__search-button" }, { "name": "nav", "class": "smbk-sidebar__nav" }, { "name": "section", "class": "smbk-sidebar__section" }, { "name": "group-label", "class": "smbk-sidebar__group-label" }, { "name": "group-title", "class": "smbk-sidebar__group-title" }, { "name": "list", "class": "smbk-sidebar__list" }, { "name": "group", "class": "smbk-sidebar__group" }, { "name": "item", "class": "smbk-sidebar__item" }, { "name": "item-body", "class": "smbk-sidebar__item-body" }, { "name": "item-icon", "class": "smbk-sidebar__item-icon" }, { "name": "item-label", "class": "smbk-sidebar__item-label" }, { "name": "item-said", "class": "smbk-sidebar__item-said" }, { "name": "item-marks", "class": "smbk-sidebar__item-marks" }, { "name": "item-count", "class": "smbk-sidebar__item-count" }, { "name": "item-dot", "class": "smbk-sidebar__item-dot" }, { "name": "item-caret", "class": "smbk-sidebar__item-caret" }, { "name": "children", "class": "smbk-sidebar__children" }, { "name": "flyout", "class": "smbk-sidebar__flyout" }, { "name": "flyout-list", "class": "smbk-sidebar__flyout-list" }, { "name": "footer", "class": "smbk-sidebar__footer" }, { "name": "user", "class": "smbk-sidebar__user" }, { "name": "user-name", "class": "smbk-sidebar__user-name" }, { "name": "user-detail", "class": "smbk-sidebar__user-detail" }, { "name": "foot", "class": "smbk-sidebar__foot" }, { "name": "toggle", "class": "smbk-sidebar__toggle" }, { "name": "glide", "class": "smbk-sidebar__glide" } ], "props": [ { "name": "look", "kind": "choice", "values": [ "floating", "flat" ], "default": "floating", "description": "Floating is the raised panel with its corner, rim and shadow, which the page keeps a little way in from the window's edges. Flat is square and on the page's own surface, with no shadow and a hairline along its end edge, for a sidebar that runs flush to the window's edges. Figma calls this \"Style\".", "classes": { "floating": "smbk-sidebar--look-floating", "flat": "smbk-sidebar--look-flat" } }, { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "description": "md rows are 40 tall with 16 px text and 20 px icons, their children 32 tall with 14 px text unless child is md. sm rows are all 32 tall with 14 px text and 16 px icons, for a denser application. The column, the logo, search, user and foot cells keep their size. Figma: the item's Size, md and sm.", "classes": { "md": "smbk-sidebar--size-md", "sm": "smbk-sidebar--size-sm" } }, { "name": "child", "kind": "choice", "values": [ "sm", "md" ], "default": "sm", "description": "How tall an item's children are at the medium size. sm draws them a step smaller than their parent, 32 tall with 14 px text. md draws them as tall as their parent, 40 tall with 16 px text, for children that matter as much as the item above them. Their labels start in the same place either way. At the small size every row is small, so md changes nothing there. Figma: the child item's Size, sm and md.", "classes": { "sm": "smbk-sidebar--child-sm", "md": "smbk-sidebar--child-md" } }, { "name": "width", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "description": "How wide the open panel is. md is the sidebar width. sm is the 240 width, for a dense application's list of pages beside its work. Only the open panel narrows: the column of icons, its cells and its rows keep their size. Not yet drawn in Figma, which draws the md width only.", "classes": { "md": "smbk-sidebar--width-md", "sm": "smbk-sidebar--width-sm" } }, { "name": "display", "kind": "choice", "values": [ "auto", "expanded", "collapsed" ], "default": "auto", "description": "Auto: a column of icons that opens over the page while it is pointed at or holds keyboard focus. Expanded: kept open, taking its room beside the page. Collapsed: kept as the column, whose items with children open flyouts. The button at the foot steps through them in that order. Figma: Display=Expanded, Collapsed; auto is not drawn in Figma.", "classes": { "auto": "smbk-sidebar--display-auto", "expanded": "smbk-sidebar--display-expanded", "collapsed": "smbk-sidebar--display-collapsed" } }, { "name": "collapsed", "kind": "flag", "description": "The column's look: icons only. The wrapper sets it when the display is collapsed, or auto and not open; plain markup sets it the same way.", "classes": { "true": "smbk-sidebar--collapsed" } }, { "name": "open", "kind": "flag", "description": "The auto display is open over the page, as when pointed at. No effect on the other two.", "classes": { "true": "smbk-sidebar--open" } } ], "page": "https://design.simbolik.ai/components/sidebar/", "markdown": "https://design.simbolik.ai/components/sidebar.md" }, { "name": "skeleton", "title": "Skeleton", "status": "experimental", "summary": "A placeholder shown while the real content loads: lines of text, a title, a label, an icon, an avatar, a badge, a button, an input, a media box, a list item, a card or a table row, or the shape of any component it wraps.", "block": [ "smbk-skeleton" ], "parts": [ { "name": "line", "class": "smbk-skeleton__line" }, { "name": "text", "class": "smbk-skeleton__text" } ], "props": [ { "name": "shape", "kind": "choice", "values": [ "text", "title", "label", "paragraph", "icon", "avatar", "badge", "button", "input", "media", "list-item", "card", "table-row", "component" ], "default": "text", "description": "Figma's thirteen shapes, for content that is not a component; component, not in Figma, for anything else: the skeleton wraps the real component, which keeps its size, place and corners and draws the skeleton instead of itself until it has loaded.", "classes": { "text": "smbk-skeleton--shape-text", "title": "smbk-skeleton--shape-title", "label": "smbk-skeleton--shape-label", "paragraph": "smbk-skeleton--shape-paragraph", "icon": "smbk-skeleton--shape-icon", "avatar": "smbk-skeleton--shape-avatar", "badge": "smbk-skeleton--shape-badge", "button": "smbk-skeleton--shape-button", "input": "smbk-skeleton--shape-input", "media": "smbk-skeleton--shape-media", "list-item": "smbk-skeleton--shape-list-item", "card": "smbk-skeleton--shape-card", "table-row": "smbk-skeleton--shape-table-row", "component": "smbk-skeleton--shape-component" } }, { "name": "size", "kind": "choice", "values": [ "sm", "md", "lg" ], "default": "md", "description": "The size of the content it stands in for: the text styles a step smaller or larger, and the icon, avatar, badge, button, input and table row at their small, medium or large size. The media shape and a wrapped component take their size from what they stand for.", "classes": { "sm": "smbk-skeleton--size-sm", "md": "smbk-skeleton--size-md", "lg": "smbk-skeleton--size-lg" } }, { "name": "loaded", "kind": "flag", "description": "The wrapped component has loaded and shows as itself. Only the component shape has something to show.", "classes": { "true": "smbk-skeleton--loaded" } } ], "page": "https://design.simbolik.ai/components/skeleton/", "markdown": "https://design.simbolik.ai/components/skeleton.md" }, { "name": "slider", "title": "Slider", "status": "candidate", "summary": "Chooses a number, or a lowest and highest number, along a range by dragging, clicking or the arrow keys: fine lines that turn red up to a narrow thumb, a thin line with a round thumb, a filled bar, or a tall filled bar with its label and value inside; a number box beside it takes a typed value.", "block": [ "smbk-slider" ], "parts": [ { "name": "header", "class": "smbk-slider__header" }, { "name": "label", "class": "smbk-slider__label" }, { "name": "value", "class": "smbk-slider__value" }, { "name": "row", "class": "smbk-slider__row" }, { "name": "number", "class": "smbk-slider__number" }, { "name": "body", "class": "smbk-slider__body" }, { "name": "rail", "class": "smbk-slider__rail" }, { "name": "track", "class": "smbk-slider__track" }, { "name": "fill", "class": "smbk-slider__fill" }, { "name": "lines", "class": "smbk-slider__lines" }, { "name": "thumb", "class": "smbk-slider__thumb" }, { "name": "bubble", "class": "smbk-slider__bubble" }, { "name": "control", "class": "smbk-slider__control" }, { "name": "bounds", "class": "smbk-slider__bounds" }, { "name": "marks", "class": "smbk-slider__marks" } ], "props": [ { "name": "look", "kind": "choice", "values": [ "ticks", "standard", "fill", "contained" ], "default": "ticks", "description": "Ticks: a row of fine lines on a sunken band that turn red up to a narrow thumb. Standard: a thin rounded line, red up to a round thumb. Fill: a thick bar filled red up to a thin light handle, with optional marks between the lowest and highest values. Contained: the filled bar as tall as a control of its size, the label at its start and the value at its end inside it, white where the red passes under them. Figma: Style=Ticks, Standard, Fill, Contained, Ticks the default.", "classes": { "ticks": "smbk-slider--look-ticks", "standard": "smbk-slider--look-standard", "fill": "smbk-slider--look-fill", "contained": "smbk-slider--look-contained" } }, { "name": "size", "kind": "choice", "values": [ "lg", "md", "sm" ], "default": "lg", "description": "The thumb and the line or bar: the ticks thumb is the selection size tall, the round thumb the icon size across, the fill bar the selection size tall, the contained bar the control size tall. The row that takes the pointer stays at least the smallest touch size at every size. Figma: lg, md, sm, lg the default.", "classes": { "lg": "smbk-slider--size-lg", "md": "smbk-slider--size-md", "sm": "smbk-slider--size-sm" } }, { "name": "type", "kind": "choice", "values": [ "single", "range" ], "default": "single", "description": "One value, red from the start up to the thumb; or a range, two thumbs that stop when they meet and red between them. Figma: Type=Single, Range.", "classes": { "single": "smbk-slider--type-single", "range": "smbk-slider--type-range" } } ], "page": "https://design.simbolik.ai/components/slider/", "markdown": "https://design.simbolik.ai/components/slider.md" }, { "name": "sparkline", "title": "Sparkline", "status": "experimental", "summary": "A small line beside a figure that shows how it moved: rising, falling, steady or spiky. The figure carries the meaning.", "block": [ "smbk-sparkline" ], "parts": [ { "name": "plot", "class": "smbk-sparkline__plot" }, { "name": "svg", "class": "smbk-sparkline__svg" }, { "name": "area", "class": "smbk-sparkline__area" }, { "name": "line", "class": "smbk-sparkline__line" }, { "name": "dot", "class": "smbk-sparkline__dot" } ], "props": [ { "name": "area", "kind": "flag", "description": "The soft fill under the line.", "classes": { "true": "smbk-sparkline--area" } } ], "page": "https://design.simbolik.ai/components/sparkline/", "markdown": "https://design.simbolik.ai/components/sparkline.md" }, { "name": "spinner", "title": "Spinner", "status": "experimental", "summary": "A small turning ring that says something is being worked on, for a wait with no known end: alone, beside its words, or inside a busy button.", "block": [ "smbk-spinner" ], "parts": [ { "name": "ring", "class": "smbk-spinner__ring" }, { "name": "label", "class": "smbk-spinner__label" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "sm", "md", "lg" ], "default": "sm", "description": "The ring is the icon size of its step: sm sits beside small text and inside small controls, md beside body text, lg alone in a region.", "classes": { "sm": "smbk-spinner--size-sm", "md": "smbk-spinner--size-md", "lg": "smbk-spinner--size-lg" } }, { "name": "tone", "kind": "choice", "values": [ "default", "subtle" ], "default": "default", "description": "Default draws the ring in the main icon color; subtle in the quieter one, for a wait beside secondary text.", "classes": { "default": "smbk-spinner--tone-default", "subtle": "smbk-spinner--tone-subtle" } }, { "name": "label", "kind": "flag", "description": "Shows the words beside the ring. Without it they are still read aloud, and they show anyway when the reader asks for reduced motion.", "classes": { "true": "smbk-spinner--label" } } ], "page": "https://design.simbolik.ai/components/spinner/", "markdown": "https://design.simbolik.ai/components/spinner.md" }, { "name": "split-button", "title": "Split button", "status": "experimental", "summary": "One safe default action with a menu of related ones: a button and a caret button joined into one bar, the caret opening the menu.", "block": [ "smbk-split-button" ], "parts": [], "props": [ { "name": "tone", "kind": "choice", "values": [ "brand", "secondary", "outline" ], "default": "brand", "description": "The action family of both buttons and the line between them. There is no danger tone: a destructive default is never hidden behind a menu.", "classes": { "brand": "smbk-split-button--tone-brand", "secondary": "smbk-split-button--tone-secondary", "outline": "smbk-split-button--tone-outline" } }, { "name": "size", "kind": "choice", "values": [ "lg", "md", "sm" ], "default": "md", "description": "The button’s heights; the caret button is a square of the same height, and the menu’s rows are small under the small size.", "classes": { "lg": "smbk-split-button--size-lg", "md": "smbk-split-button--size-md", "sm": "smbk-split-button--size-sm" } } ], "page": "https://design.simbolik.ai/components/split-button/", "markdown": "https://design.simbolik.ai/components/split-button.md" }, { "name": "splitter", "title": "Splitter", "status": "experimental", "summary": "The line between two panes that the reader drags, or moves with the arrow keys, to give one pane more room and the other less.", "block": [ "smbk-splitter" ], "parts": [ { "name": "line", "class": "smbk-splitter__line" }, { "name": "grip", "class": "smbk-splitter__grip" }, { "name": "icon", "class": "smbk-splitter__icon" } ], "props": [ { "name": "orientation", "kind": "choice", "values": [ "vertical", "horizontal" ], "default": "vertical", "description": "Vertical is a line between two columns side by side, moved left and right. Horizontal is a line between two stacked panes, moved up and down.", "classes": { "vertical": "smbk-splitter--orientation-vertical", "horizontal": "smbk-splitter--orientation-horizontal" } } ], "page": "https://design.simbolik.ai/components/splitter/", "markdown": "https://design.simbolik.ai/components/splitter.md" }, { "name": "stat", "title": "Stat", "status": "experimental", "summary": "One figure with its name and a line of what it means, plain or as a link to where the figure comes from.", "block": [ "smbk-stat" ], "parts": [ { "name": "name", "class": "smbk-stat__name" }, { "name": "dot", "class": "smbk-stat__dot" }, { "name": "figure", "class": "smbk-stat__figure" }, { "name": "link", "class": "smbk-stat__link" }, { "name": "trend", "class": "smbk-stat__trend" }, { "name": "description", "class": "smbk-stat__description" }, { "name": "chart", "class": "smbk-stat__chart" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "lg", "sm" ], "default": "lg", "description": "Small sits closer to its edges and sets the figure a heading step smaller, for a row of many stats.", "classes": { "lg": "smbk-stat--size-lg", "sm": "smbk-stat--size-sm" } }, { "name": "type", "kind": "choice", "values": [ "static", "link" ], "default": "static", "description": "A link takes the link colors and underline on its figure, and the whole tile follows it. The wrapper sets it when it is given an address.", "classes": { "static": "smbk-stat--type-static", "link": "smbk-stat--type-link" } } ], "page": "https://design.simbolik.ai/components/stat/", "markdown": "https://design.simbolik.ai/components/stat.md" }, { "name": "status-dot", "title": "Status dot", "status": "experimental", "summary": "A small colored dot that marks a status, with the status in words beside it.", "block": [ "smbk-status-dot" ], "parts": [ { "name": "dot", "class": "smbk-status-dot__dot" }, { "name": "label", "class": "smbk-status-dot__label" } ], "props": [ { "name": "tone", "kind": "choice", "values": [ "success", "info", "warning", "danger", "default" ], "default": "success", "description": "The status the dot marks: success, info, warning and danger take the feedback colors; default the subtle gray, for a status that is neither good nor bad, such as offline.", "classes": { "success": "smbk-status-dot--tone-success", "info": "smbk-status-dot--tone-info", "warning": "smbk-status-dot--tone-warning", "danger": "smbk-status-dot--tone-danger", "default": "smbk-status-dot--tone-default" } } ], "page": "https://design.simbolik.ai/components/status-dot/", "markdown": "https://design.simbolik.ai/components/status-dot.md" }, { "name": "stepper", "title": "Stepper", "status": "experimental", "summary": "Where the reader is in a form or task of three or more ordered steps: each step's mark, name and status in words, joined by a line; or \"Step 2 of 4\" with the step's name and a slim track.", "block": [ "smbk-stepper" ], "parts": [ { "name": "list", "class": "smbk-stepper__list" }, { "name": "item", "class": "smbk-stepper__item" }, { "name": "step", "class": "smbk-stepper__step" }, { "name": "marker-row", "class": "smbk-stepper__marker-row" }, { "name": "marker", "class": "smbk-stepper__marker" }, { "name": "number", "class": "smbk-stepper__number" }, { "name": "icon", "class": "smbk-stepper__icon" }, { "name": "connector", "class": "smbk-stepper__connector" }, { "name": "text", "class": "smbk-stepper__text" }, { "name": "label", "class": "smbk-stepper__label" }, { "name": "status", "class": "smbk-stepper__status" }, { "name": "hidden", "class": "smbk-stepper__hidden" }, { "name": "summary", "class": "smbk-stepper__summary" }, { "name": "summary-text", "class": "smbk-stepper__summary-text" }, { "name": "count", "class": "smbk-stepper__count" }, { "name": "step-name", "class": "smbk-stepper__step-name" }, { "name": "track", "class": "smbk-stepper__track" } ], "props": [ { "name": "layout", "kind": "choice", "values": [ "horizontal", "vertical", "summary" ], "default": "horizontal", "description": "Horizontal lists the steps in a row and gives the summary instead where the layout is narrow. Vertical lists them one under another. Summary gives \"Step 2 of 4\", the step's name and a slim track at any width.", "classes": { "horizontal": "smbk-stepper--layout-horizontal", "vertical": "smbk-stepper--layout-vertical", "summary": "smbk-stepper--layout-summary" } } ], "page": "https://design.simbolik.ai/components/stepper/", "markdown": "https://design.simbolik.ai/components/stepper.md" }, { "name": "switch", "title": "Switch", "status": "candidate", "summary": "An on-or-off control that takes effect at once: a filled track with a light thumb that slides to the on side.", "block": [ "smbk-switch" ], "parts": [ { "name": "control", "class": "smbk-switch__control" }, { "name": "track", "class": "smbk-switch__track" }, { "name": "thumb", "class": "smbk-switch__thumb" }, { "name": "on-icon", "class": "smbk-switch__on-icon" }, { "name": "off-icon", "class": "smbk-switch__off-icon" }, { "name": "label", "class": "smbk-switch__label" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "lg", "md", "sm" ], "default": "lg", "description": "The track 24, 20 or 16 tall, with its thumb. The small thumb has no room for the tick or the cross.", "classes": { "lg": "smbk-switch--size-lg", "md": "smbk-switch--size-md", "sm": "smbk-switch--size-sm" } } ], "page": "https://design.simbolik.ai/components/switch/", "markdown": "https://design.simbolik.ai/components/switch.md" }, { "name": "table", "title": "Table", "status": "candidate", "summary": "Rows of data under headings that sort, filter and explain, with rows that open, pin or group, optional selection and a foot for the pagination.", "block": [ "smbk-table" ], "parts": [ { "name": "table", "class": "smbk-table__table" }, { "name": "caption", "class": "smbk-table__caption" }, { "name": "column", "class": "smbk-table__column" }, { "name": "header-row", "class": "smbk-table__header-row" }, { "name": "header", "class": "smbk-table__header" }, { "name": "header-cell", "class": "smbk-table__header-cell" }, { "name": "header-text", "class": "smbk-table__header-text" }, { "name": "header-label", "class": "smbk-table__header-label" }, { "name": "header-block", "class": "smbk-table__header-block" }, { "name": "header-icon", "class": "smbk-table__header-icon" }, { "name": "sort", "class": "smbk-table__sort" }, { "name": "filter", "class": "smbk-table__filter" }, { "name": "filter-count", "class": "smbk-table__filter-count" }, { "name": "info", "class": "smbk-table__info" }, { "name": "row", "class": "smbk-table__row" }, { "name": "row-press", "class": "smbk-table__row-press" }, { "name": "cell", "class": "smbk-table__cell" }, { "name": "start", "class": "smbk-table__start" }, { "name": "lead", "class": "smbk-table__lead" }, { "name": "expander", "class": "smbk-table__expander" }, { "name": "pin", "class": "smbk-table__pin" }, { "name": "content", "class": "smbk-table__content" }, { "name": "choose-space", "class": "smbk-table__choose-space" }, { "name": "value", "class": "smbk-table__value" }, { "name": "value-icon", "class": "smbk-table__value-icon" }, { "name": "stack", "class": "smbk-table__stack" }, { "name": "description", "class": "smbk-table__description" }, { "name": "copy", "class": "smbk-table__copy" }, { "name": "prose", "class": "smbk-table__prose" }, { "name": "figure", "class": "smbk-table__figure" }, { "name": "bar", "class": "smbk-table__bar" }, { "name": "group", "class": "smbk-table__group" }, { "name": "group-label", "class": "smbk-table__group-label" }, { "name": "group-count", "class": "smbk-table__group-count" }, { "name": "detail-row", "class": "smbk-table__detail-row" }, { "name": "detail", "class": "smbk-table__detail" }, { "name": "detail-title", "class": "smbk-table__detail-title" }, { "name": "footer", "class": "smbk-table__footer" }, { "name": "scroll-hint", "class": "smbk-table__scroll-hint" }, { "name": "scroll-track", "class": "smbk-table__scroll-track" }, { "name": "scroll-thumb", "class": "smbk-table__scroll-thumb" } ], "props": [ { "name": "look", "kind": "choice", "values": [ "framed", "flat", "filled" ], "default": "framed", "description": "Framed: a bordered, rounded frame, the heading row on its own surface, room at the sides. Flat, for a small table inside a card: no frame, no heading surface, a rule over every row, no room at the sides, so the table's words line up with the card's other lines, and rows one line of text high. A flat table takes none of sticky-header, page-sticky-header and pin-first. Filled, for a calmer table on the page: the framed frame and rows, the heading row and the foot on a neutral fill, group rows sunken and low, no lines between headings, the same room at a row's ends and between its columns, and the arrow of a column not sorted only on hover and keyboard focus.", "classes": { "framed": "smbk-table--look-framed", "flat": "smbk-table--look-flat", "filled": "smbk-table--look-filled" } }, { "name": "sticky-header", "kind": "flag", "description": "A long table in a frame of its own: the heading row stays at the frame's top and the foot at its foot while the rows scroll inside it. The consumer limits the frame's height; the frame is then a named region the keyboard can reach. Framed and filled looks.", "classes": { "true": "smbk-table--sticky-header" } }, { "name": "page-sticky-header", "kind": "flag", "description": "A long table in the page: the frame keeps no height of its own, and the heading row stays in view under the room the page keeps clear at its top while the page scrolls, with the foot at the foot of the window, until the table ends. The table still scrolls sideways, its heading with it. Framed and filled looks.", "classes": { "true": "smbk-table--page-sticky-header" } }, { "name": "pin-first", "kind": "flag", "description": "A wide table: the first column stays in view while the table scrolls sideways, so every row keeps its subject. For a table on the page canvas, in the framed and filled looks.", "classes": { "true": "smbk-table--pin-first" } }, { "name": "align-top", "kind": "flag", "description": "Cells of very different heights: every cell starts at the top of its row, and its first line sits level with the first line of the others, so the eye reads straight across a tall row. All three looks.", "classes": { "true": "smbk-table--align-top" } } ], "page": "https://design.simbolik.ai/components/table/", "markdown": "https://design.simbolik.ai/components/table.md" }, { "name": "table-of-contents", "title": "Table of contents", "status": "candidate", "summary": "A box listing the sections of the page, children indented, the one in view marked; in a narrow space its heading row opens and closes the list.", "block": [ "smbk-toc" ], "parts": [ { "name": "nav", "class": "smbk-toc__nav" }, { "name": "label", "class": "smbk-toc__label" }, { "name": "label-text", "class": "smbk-toc__label-text" }, { "name": "toggle", "class": "smbk-toc__toggle" }, { "name": "heading", "class": "smbk-toc__heading" }, { "name": "heading-text", "class": "smbk-toc__heading-text" }, { "name": "icon", "class": "smbk-toc__icon" }, { "name": "caret", "class": "smbk-toc__caret" }, { "name": "body", "class": "smbk-toc__body" }, { "name": "indicator", "class": "smbk-toc__indicator" }, { "name": "list", "class": "smbk-toc__list" }, { "name": "item", "class": "smbk-toc__item" }, { "name": "extra", "class": "smbk-toc__extra" } ], "props": [ { "name": "open", "kind": "flag", "description": "The narrow form only: the list shows under the heading row. Figma: Open. In a wide space the list always shows.", "classes": { "true": "smbk-toc--open" } } ], "page": "https://design.simbolik.ai/components/table-of-contents/", "markdown": "https://design.simbolik.ai/components/table-of-contents.md" }, { "name": "tabs", "title": "Tabs", "status": "candidate", "summary": "A bar of named views, one shown at a time, each tab in front of its own panel.", "block": [ "smbk-tabs" ], "parts": [ { "name": "list", "class": "smbk-tabs__list" }, { "name": "indicator", "class": "smbk-tabs__indicator" }, { "name": "tab", "class": "smbk-tabs__tab" }, { "name": "icon", "class": "smbk-tabs__icon" }, { "name": "label", "class": "smbk-tabs__label" }, { "name": "pause", "class": "smbk-tabs__pause" }, { "name": "badge", "class": "smbk-tabs__badge" }, { "name": "more", "class": "smbk-tabs__more" }, { "name": "caret", "class": "smbk-tabs__caret" }, { "name": "panel", "class": "smbk-tabs__panel" } ], "props": [ { "name": "look", "kind": "choice", "values": [ "boxed", "line" ], "default": "boxed", "description": "Boxed: the tabs in a well, the chosen one raised. Line: no well, a line under the row and a brand underline under the chosen tab, or a side bar beside it in a vertical bar. Figma calls this Style.", "classes": { "boxed": "smbk-tabs--look-boxed", "line": "smbk-tabs--look-line" } }, { "name": "size", "kind": "choice", "values": [ "md", "sm" ], "default": "md", "classes": { "md": "smbk-tabs--size-md", "sm": "smbk-tabs--size-sm" } }, { "name": "orientation", "kind": "choice", "values": [ "horizontal", "vertical" ], "default": "horizontal", "classes": { "horizontal": "smbk-tabs--orientation-horizontal", "vertical": "smbk-tabs--orientation-vertical" } }, { "name": "item-width", "kind": "choice", "values": [ "equal", "hug" ], "default": "hug", "description": "Hug: each tab as wide as its words, and the bar as wide as its tabs, as Figma draws them. Equal: the bar spans the tabs' whole width, over their panel, and its tabs share it equally. A vertical bar's tabs are always as wide as its widest, so this changes the horizontal bar only. Not in Figma, which draws hug only.", "classes": { "equal": "smbk-tabs--item-width-equal", "hug": "smbk-tabs--item-width-hug" } } ], "page": "https://design.simbolik.ai/components/tabs/", "markdown": "https://design.simbolik.ai/components/tabs.md" }, { "name": "tag", "title": "Tag", "status": "candidate", "summary": "A small label naming a category, with an optional leading icon or picture and remove control; pressable, it opens something about what it names.", "block": [ "smbk-tag" ], "parts": [ { "name": "icon", "class": "smbk-tag__icon" }, { "name": "leading-content", "class": "smbk-tag__leading-content" }, { "name": "label", "class": "smbk-tag__label" }, { "name": "remove", "class": "smbk-tag__remove" } ], "props": [ { "name": "tone", "kind": "choice", "values": [ "default", "brand", "outline", "info", "success", "danger", "warning" ], "default": "default", "description": "A see-through gray that shows on every surface, brand, outlined, or one of the four feedback families on their subtle surfaces.", "classes": { "default": "smbk-tag--tone-default", "brand": "smbk-tag--tone-brand", "outline": "smbk-tag--tone-outline", "info": "smbk-tag--tone-info", "success": "smbk-tag--tone-success", "danger": "smbk-tag--tone-danger", "warning": "smbk-tag--tone-warning" } }, { "name": "pressable", "kind": "flag", "description": "The tag is a button that opens something about what it names, such as a card, with the hover, pressed and focus looks in the tag's own shape. The wrapper sets it when given onClick, as a popover's opener is; plain markup sets it on a button.", "classes": { "true": "smbk-tag--pressable" } } ], "page": "https://design.simbolik.ai/components/tag/", "markdown": "https://design.simbolik.ai/components/tag.md" }, { "name": "text-area", "title": "Text area", "status": "candidate", "summary": "A text box for several lines: the input well grown tall, with a grip at its corner to make it taller.", "block": [ "smbk-text-area" ], "parts": [ { "name": "control", "class": "smbk-text-area__control" }, { "name": "grip", "class": "smbk-text-area__grip" } ], "props": [ { "name": "error", "kind": "flag", "description": "The value is invalid. Draws the danger border, kept while focused, and the error icon at the top end; the control also carries aria-invalid.", "classes": { "true": "smbk-text-area--error" } } ], "page": "https://design.simbolik.ai/components/text-area/", "markdown": "https://design.simbolik.ai/components/text-area.md" }, { "name": "theme-switch", "title": "Theme switch", "status": "candidate", "summary": "The light-or-dark switch: two icon segments in one bar, the active one raised.", "block": [ "smbk-theme-switch", "smbk-segmented" ], "parts": [ { "name": "indicator", "class": "smbk-segmented__indicator" }, { "name": "item", "class": "smbk-segmented__item" }, { "name": "icon", "class": "smbk-segmented__icon" } ], "props": [ { "name": "size", "kind": "choice", "values": [ "lg", "md", "sm" ], "default": "lg", "classes": { "lg": "smbk-segmented--size-lg", "md": "smbk-segmented--size-md", "sm": "smbk-segmented--size-sm" } }, { "name": "look", "kind": "choice", "values": [ "theme" ], "default": "theme", "description": "The segmented control's theme look: square items, each icon a step larger than the standard bar's at its size, an icon hovered in the brand text color.", "classes": { "theme": "smbk-segmented--look-theme" } } ], "page": "https://design.simbolik.ai/components/theme-switch/", "markdown": "https://design.simbolik.ai/components/theme-switch.md" }, { "name": "timeline", "title": "Timeline", "status": "experimental", "summary": "Things that happened, one after another: each event a dot for its kind, what happened, when, and who or what did it, joined by a line.", "block": [ "smbk-timeline" ], "parts": [ { "name": "item", "class": "smbk-timeline__item" }, { "name": "rail", "class": "smbk-timeline__rail" }, { "name": "marker", "class": "smbk-timeline__marker" }, { "name": "dot", "class": "smbk-timeline__dot" }, { "name": "line", "class": "smbk-timeline__line" }, { "name": "body", "class": "smbk-timeline__body" }, { "name": "disclosure", "class": "smbk-timeline__disclosure" }, { "name": "summary", "class": "smbk-timeline__summary" }, { "name": "top", "class": "smbk-timeline__top" }, { "name": "title", "class": "smbk-timeline__title" }, { "name": "time", "class": "smbk-timeline__time" }, { "name": "caret", "class": "smbk-timeline__caret" }, { "name": "meta", "class": "smbk-timeline__meta" }, { "name": "detail", "class": "smbk-timeline__detail" }, { "name": "more", "class": "smbk-timeline__more" }, { "name": "hidden", "class": "smbk-timeline__hidden" } ], "props": [], "page": "https://design.simbolik.ai/components/timeline/", "markdown": "https://design.simbolik.ai/components/timeline.md" }, { "name": "toast", "title": "Toast", "status": "candidate", "summary": "A short-lived message that floats above the page: the alert's anatomy, raised, arriving in a corner and leaving on its own after a few seconds unless someone is reading it.", "block": [ "smbk-toast" ], "parts": [ { "name": "icon", "class": "smbk-toast__icon" }, { "name": "body", "class": "smbk-toast__body" }, { "name": "title", "class": "smbk-toast__title" }, { "name": "description", "class": "smbk-toast__description" }, { "name": "action", "class": "smbk-toast__action" }, { "name": "dismiss", "class": "smbk-toast__dismiss" }, { "name": "region", "class": "smbk-toast__region" } ], "props": [ { "name": "tone", "kind": "choice", "values": [ "default", "info", "success", "warning", "danger" ], "default": "default", "description": "Neutral, or one of the four feedback families on their subtle surface, each with its own icon.", "classes": { "default": "smbk-toast--tone-default", "info": "smbk-toast--tone-info", "success": "smbk-toast--tone-success", "warning": "smbk-toast--tone-warning", "danger": "smbk-toast--tone-danger" } } ], "page": "https://design.simbolik.ai/components/toast/", "markdown": "https://design.simbolik.ai/components/toast.md" }, { "name": "toggle-button", "title": "Toggle button", "status": "experimental", "summary": "A button that stays on or off, such as bold text, a map layer or a filter: the outline or ghost button when off, sunken into the page when on.", "block": [ "smbk-toggle-button", "smbk-btn" ], "parts": [ { "name": "icon", "class": "smbk-btn__icon" }, { "name": "label", "class": "smbk-btn__label" } ], "props": [ { "name": "tone", "kind": "choice", "values": [ "outline", "ghost" ], "default": "outline", "description": "How it looks when off: the outline button, or the ghost button with no fill or edge, for a tool among others in a toolbar. On looks the same in both. Figma draws the outline toggle; the ghost one is the toolbar’s tool.", "classes": { "outline": "smbk-btn--tone-outline", "ghost": "smbk-btn--tone-ghost" } }, { "name": "size", "kind": "choice", "values": [ "lg", "md", "sm" ], "default": "md", "description": "The button’s own heights, padding, label and icon, one recipe per height. md fits apps and forms.", "classes": { "lg": "smbk-btn--size-lg", "md": "smbk-btn--size-md", "sm": "smbk-btn--size-sm" } }, { "name": "icon-only", "kind": "flag", "description": "A square toggle holding one icon and no label, for a toolbar. Needs an accessible name.", "classes": { "true": "smbk-btn--icon-only" } } ], "page": "https://design.simbolik.ai/components/toggle-button/", "markdown": "https://design.simbolik.ai/components/toggle-button.md" }, { "name": "toolbar", "title": "Toolbar", "status": "experimental", "summary": "A labelled bar of related tools for a view, a selection or an editor: what it acts on, groups of tools, and its main action, moved through with the arrow keys as one Tab stop.", "block": [ "smbk-toolbar" ], "parts": [ { "name": "row", "class": "smbk-toolbar__row" }, { "name": "context", "class": "smbk-toolbar__context" }, { "name": "tools", "class": "smbk-toolbar__tools" }, { "name": "actions", "class": "smbk-toolbar__actions" }, { "name": "divider", "class": "smbk-toolbar__divider" }, { "name": "icon", "class": "smbk-toolbar__icon" }, { "name": "title", "class": "smbk-toolbar__title" }, { "name": "value", "class": "smbk-toolbar__value" }, { "name": "text", "class": "smbk-toolbar__text" }, { "name": "meta", "class": "smbk-toolbar__meta" }, { "name": "status", "class": "smbk-toolbar__status" }, { "name": "field", "class": "smbk-toolbar__field" }, { "name": "details", "class": "smbk-toolbar__details" }, { "name": "wide-only", "class": "smbk-toolbar__wide-only" }, { "name": "narrow-only", "class": "smbk-toolbar__narrow-only" } ], "props": [ { "name": "placement", "kind": "choice", "values": [ "floating", "docked" ], "default": "floating", "description": "Floating: a raised bar as wide as its tools, with its rim, rounded corners and shadow, over a page, a map or a text selection. Docked: flat across the top of a panel, a line under it, the actions pushed to its end. Where it sticks (the top, the foot of the window) is the page’s to set. Figma: Placement.", "classes": { "floating": "smbk-toolbar--placement-floating", "docked": "smbk-toolbar--placement-docked" } } ], "page": "https://design.simbolik.ai/components/toolbar/", "markdown": "https://design.simbolik.ai/components/toolbar.md" }, { "name": "tooltip", "title": "Tooltip", "status": "candidate", "summary": "A small floating label with an arrow, shown on hover or focus to name or explain the thing under it.", "block": [ "smbk-tooltip" ], "parts": [ { "name": "bubble", "class": "smbk-tooltip__bubble" }, { "name": "key", "class": "smbk-tooltip__key" }, { "name": "arrow", "class": "smbk-tooltip__arrow" }, { "name": "anchor", "class": "smbk-tooltip__anchor" }, { "name": "layer", "class": "smbk-tooltip__layer" } ], "props": [ { "name": "arrow", "kind": "choice", "values": [ "top-start", "top-center", "top-end", "bottom-start", "bottom-center", "bottom-end", "left", "right" ], "default": "top-center", "description": "Which edge of the bubble the arrow sits on, and where along it: top points up at a target below the bubble, bottom points down at a target above it. Beside a target, the side it prefers: it takes the opposite side when this one has no room, and the arrow turns with it. Figma calls this \"Arrow\" and uses the same names.", "classes": { "top-start": "smbk-tooltip--arrow-top-start", "top-center": "smbk-tooltip--arrow-top-center", "top-end": "smbk-tooltip--arrow-top-end", "bottom-start": "smbk-tooltip--arrow-bottom-start", "bottom-center": "smbk-tooltip--arrow-bottom-center", "bottom-end": "smbk-tooltip--arrow-bottom-end", "left": "smbk-tooltip--arrow-left", "right": "smbk-tooltip--arrow-right" } }, { "name": "inverse", "kind": "flag", "description": "Dark surface with inverse text, for use over light content.", "classes": { "true": "smbk-tooltip--inverse" } } ], "page": "https://design.simbolik.ai/components/tooltip/", "markdown": "https://design.simbolik.ai/components/tooltip.md" }, { "name": "tree-view", "title": "Tree view", "status": "experimental", "summary": "Folders and files, or any list that nests, opened and closed level by level: one row each, with a caret, an icon and the label.", "block": [ "smbk-tree-view" ], "parts": [ { "name": "item", "class": "smbk-tree-view__item" }, { "name": "row", "class": "smbk-tree-view__row" }, { "name": "toggle", "class": "smbk-tree-view__toggle" }, { "name": "caret", "class": "smbk-tree-view__caret" }, { "name": "icon", "class": "smbk-tree-view__icon" }, { "name": "label", "class": "smbk-tree-view__label" }, { "name": "meta", "class": "smbk-tree-view__meta" }, { "name": "changed", "class": "smbk-tree-view__changed" }, { "name": "hidden", "class": "smbk-tree-view__hidden" }, { "name": "group", "class": "smbk-tree-view__group" } ], "props": [], "page": "https://design.simbolik.ai/components/tree-view/", "markdown": "https://design.simbolik.ai/components/tree-view.md" }, { "name": "uptime-bar", "title": "Uptime bar", "status": "experimental", "summary": "A strip of days, one bar each, colored by whether a site or service was up, had an incident or was down, with the share up in words.", "block": [ "smbk-uptime-bar" ], "parts": [ { "name": "bars", "class": "smbk-uptime-bar__bars" }, { "name": "bar", "class": "smbk-uptime-bar__bar" }, { "name": "caption", "class": "smbk-uptime-bar__caption" }, { "name": "start", "class": "smbk-uptime-bar__start" }, { "name": "uptime", "class": "smbk-uptime-bar__uptime" }, { "name": "end", "class": "smbk-uptime-bar__end" }, { "name": "hidden", "class": "smbk-uptime-bar__hidden" } ], "props": [], "page": "https://design.simbolik.ai/components/uptime-bar/", "markdown": "https://design.simbolik.ai/components/uptime-bar.md" } ] }