diff --git a/docs/font.mdx b/docs/font.mdx index 6cad557..a4dac95 100644 --- a/docs/font.mdx +++ b/docs/font.mdx @@ -3,4 +3,86 @@ name: Font menu: Design --- -# Font guidelines \ No newline at end of file +import FontType from '../src/docz-components/FontType/FontType'; + +# Fonts + +## Font family + +We are using the following fonts: + +- ```Montserrat``` (default) +- ```Roboto Mono``` (code) + +## Usage + +We are using SCSS to set fonts. There are mixins that sets each of the available font types. To use the mixins you need to import +```_mixins.scss``` and include the desired mixin. + +#### Example: + +``` scss +// ComponentName.module.scss + +@import '../../styles/mixins'; + +.selector { + @include font-body; +} +.selectorCode { + @include font-code; + text-transform: uppercase; +} +``` + + +## Font types + + + + + + + + + + + + + diff --git a/docs/icons.mdx b/docs/icons.mdx index 9fb64bc..9d65288 100644 --- a/docs/icons.mdx +++ b/docs/icons.mdx @@ -3,4 +3,494 @@ name: Icons menu: Design --- -# Icons guidelines \ No newline at end of file +import { Playground } from 'docz' + +import * as ICONS from '../src/constants/icons' +import * as COLORS from '../src/constants/colors' + +import IconRow from '../src/docz-components/IconRow/IconRow'; +import PublishIcon from '@material-ui/icons/PlayCircleFilledOutlined'; +import StartIcon from '@material-ui/icons/SkipNext'; +import StopIcon from '@material-ui/icons/PauseCircleFilled'; +import UnpublishIcon from '@material-ui/icons/Block'; +import IconMoreVert from '@material-ui/icons/MoreVert'; +import IconCopyAll from '@material-ui/icons/FileCopy'; +import IconCopyMessage from '@material-ui/icons/Subject'; +import IconExpand from '@material-ui/icons/ArrowDownward'; +import FollowIcon from '@material-ui/icons/VerticalAlignBottom'; +import IconOpen from '@material-ui/icons/ExpandLess'; +import IconClose from '@material-ui/icons/ExpandMore'; +import IconExpandV2 from '@material-ui/icons/Fullscreen'; +import IconExpandExit from '@material-ui/icons/FullscreenExit'; +import IconOptions from '@material-ui/icons/MoreHoriz'; +import IconCloseOthers from '@material-ui/icons/ClearAll'; +import IconDuplicate from '@material-ui/icons/ControlPointDuplicate'; +import IconOpenInTab from '@material-ui/icons/Tab'; +import InputNodeIcon from '@material-ui/icons/Public'; +import OutputNodeIcon from '@material-ui/icons/KeyboardTab'; +import IconExpandAction from '@material-ui/icons/KeyboardArrowDown'; +import IconShrinkAction from '@material-ui/icons/KeyboardArrowUp'; +import HideIcon from '@material-ui/icons/VisibilityOff'; +import ViewIcon from '@material-ui/icons/Visibility'; +import IconKey from '@material-ui/icons/VpnKey'; +import TypeFileIcon from '@material-ui/icons/InsertDriveFile'; +import IconWarning from '@material-ui/icons/Warning'; +import IconDeviceHub from '@material-ui/icons/DeviceHub'; +import IconDoc from '@material-ui/icons/Toc'; +import IconSettings from '@material-ui/icons/Settings'; +import IconShowChart from '@material-ui/icons/ShowChart'; +import IconArrowBack from '@material-ui/icons/KeyboardBackspace'; +import EmailIcon from '@material-ui/icons/Email'; +import TimeIcon from '@material-ui/icons/AccessTime'; +import IconDelete from '@material-ui/icons/Delete'; +import IconRevoke from '@material-ui/icons/HighlightOff'; +import ActivityIconAdd from '@material-ui/icons/Add'; +import ActivityIconBlock from '@material-ui/icons/Block'; +import ActivityIconPublish from '@material-ui/icons/Publish'; +import ActivityIconRemove from '@material-ui/icons/Delete'; +import ActivityIconSettings from '@material-ui/icons/Settings'; +import ActivityIconStart from '@material-ui/icons/PlayCircleOutline'; +import ActivityIconStop from '@material-ui/icons/Stop'; +import ActivityIconUnknown from '@material-ui/icons/Help'; +import ActivityIconUnpublish from '@material-ui/icons/GetApp'; +import ActivityIconUser from '@material-ui/icons/AccountBox'; +import DomainIcon from '@material-ui/icons/Language'; +import GeneralIcon from '@material-ui/icons/DeviceHub'; +import SecurityIcon from '@material-ui/icons/Security'; +import UsersIcon from '@material-ui/icons/SupervisorAccount'; +import CalendarIcon from '@material-ui/icons/Today'; +import AuditIcon from '@material-ui/icons/SupervisorAccount'; +import LogoutIcon from '@material-ui/icons/ExitToApp'; +import SettingsIcon from '@material-ui/icons/VerifiedUser'; +import IconInfo from '@material-ui/icons/Info'; +import SearchIcon from '@material-ui/icons/Search'; +import ClearIcon from '@material-ui/icons/Close'; +import IconDeselectAll from '@material-ui/icons/ClearAll'; +import IconSelectAll from '@material-ui/icons/DoneAll'; +import IconCheck from '@material-ui/icons/Check'; +import IconIndeterminate from '@material-ui/icons/Remove'; +import ArrowRightIcon from '@material-ui/icons/ArrowForward'; +import TypeVarIcon from '@material-ui/icons/Code'; + + +# Icons + +We are using both [Material UI icons](https://material-ui.com/components/material-icons/) and custom icons. + +## Usage + +Use material icons as defined in its documentation. For custom icons import icon paths from ```src/constants/icons``` and use ```SvgIcon``` from Material UI. + +To set the size, use one of the global classes for icons (see [Sizes section](#sizes) bellow). + +#### Example + +``` tsx +// ComponentName.tsx + +import * as ICONS from '../src/constants/icons' + +import SvgIcon from '@material-ui/core/SvgIcon' +import FollowIcon from '@material-ui/icons/VerticalAlignBottom'; + +const ComponentName = () => ( + <> + // From material + + + // Custom + + + + + // With color + + + + +) +``` + + + + + + + + + +## Library + +### Material UI + +##### Pages +
+ + + + + + + + + +
+ +##### Version Actions, Version status +
+ + + + + + +
+ +##### Concepts relation +
+ + + + + + + + +
+ +##### Actions +
+ + + + + + + + + + + + + + + + + + +
+ +##### Other +
+ + + + + + + + + +
+ +##### User Activity +
+ + + + + + + + + + +
+ +### Custom + +
+ +
+ +## Colors + +Use colors to empathize icons and messages. + +
+
+ Example 1: +
+
+ +
+
+ Some warning message +
+
+ +
+
+ Example 2: +
+
+ +
+
+ Version successfully started +
+
+ +## Sizes + +We have 5 icon sizes: + +- **Small** [default] +- **Regular** +- **Regular-Big** +- **Big** +- **Huge** diff --git a/src/constants/colors.ts b/src/constants/colors.ts new file mode 100644 index 0000000..70656ee --- /dev/null +++ b/src/constants/colors.ts @@ -0,0 +1,5 @@ +export const SUCCESS = '#6daa48' +export const ALERT = '#fc915f' +export const ERROR = '#e52e3d' +export const FEEDBACK = '#1f82b5' +export const HIGHLIGHT = '#33ffff' diff --git a/src/constants/icons.ts b/src/constants/icons.ts new file mode 100644 index 0000000..8f36214 --- /dev/null +++ b/src/constants/icons.ts @@ -0,0 +1,2 @@ +export const TERMINAL = + 'M9.00787402,8.25488372 L1.66929134,15.624186 C1.56430446,15.7296124 1.44356955,15.7823256 1.30708661,15.7823256 C1.17060367,15.7823256 1.04986877,15.7296124 0.94488189,15.624186 L0.157480315,14.8334884 C0.0524934383,14.728062 0,14.6068217 0,14.4697674 C0,14.3327132 0.0524934383,14.2114729 0.157480315,14.1060465 L6.34645669,7.89116279 L0.157480315,1.67627907 C0.0524934383,1.57085271 0,1.4496124 0,1.31255814 C0,1.17550388 0.0524934383,1.05426357 0.157480315,0.948837209 L0.94488189,0.158139535 C1.04986877,0.0527131783 1.17060367,0 1.30708661,0 C1.44356955,0 1.56430446,0.0527131783 1.66929134,0.158139535 L9.00787402,7.52744186 C9.11286089,7.63286822 9.16535433,7.75410853 9.16535433,7.89116279 C9.16535433,8.02821705 9.11286089,8.14945736 9.00787402,8.25488372 Z M26,15.4818605 L26,16.4939535 C26,16.6415504 25.9527559,16.7627907 25.8582677,16.8576744 C25.7637795,16.9525581 25.6430446,17 25.496063,17 L10.3779528,17 C10.2309711,17 10.1102362,16.9525581 10.015748,16.8576744 C9.92125984,16.7627907 9.87401575,16.6415504 9.87401575,16.4939535 L9.87401575,15.4818605 C9.87401575,15.3342636 9.92125984,15.2130233 10.015748,15.1181395 C10.1102362,15.0232558 10.2309711,14.975814 10.3779528,14.975814 L25.496063,14.975814 C25.6430446,14.975814 25.7637795,15.0232558 25.8582677,15.1181395 C25.9527559,15.2130233 26,15.3342636 26,15.4818605 Z' diff --git a/src/docz-components/FontType/FontType.module.scss b/src/docz-components/FontType/FontType.module.scss new file mode 100644 index 0000000..c4f5b79 --- /dev/null +++ b/src/docz-components/FontType/FontType.module.scss @@ -0,0 +1,56 @@ +@import '../../styles/variables'; +@import '../../styles/colors'; +@import '../../styles/mixins'; + +.mega { + @include font-mega; +} +.jumbo { + @include font-jumbo; +} +.display { + @include font-display; +} +.headline { + @include font-headline; +} +.title { + @include font-title; +} +.subheader { + @include font-subheader; +} +.body { + @include font-body; +} +.caption { + @include font-caption; +} +.small { + @include font-small; +} +.button { + @include font-button; +} +.tabnav { + @include font-tabnav; +} +.code { + @include font-code; +} + +.container { + display: flex; + margin-bottom: 2 * $grid-unit; + align-items: baseline; + border-bottom: solid 1px palette(base, 400); + padding-left: 4 * $grid-unit; +} +.type { + width: 250px; + text-transform: capitalize; +} +.description { + @include font-body; + color: palette(feedback); +} diff --git a/src/docz-components/FontType/FontType.tsx b/src/docz-components/FontType/FontType.tsx new file mode 100644 index 0000000..0564286 --- /dev/null +++ b/src/docz-components/FontType/FontType.tsx @@ -0,0 +1,32 @@ +import React from 'react' +import cx from 'classnames' +import styles from './FontType.module.scss' + +type FontTypes = + | 'mega' + | 'jumbo' + | 'display' + | 'headline' + | 'title' + | 'subheader' + | 'body' + | 'caption' + | 'small' + | 'button' + | 'tabnav' + | 'code' + +type Props = { + type: FontTypes + description: string +} +function FontType({ type, description }: Props) { + return ( +
+ {type} + {description} +
+ ) +} + +export default FontType diff --git a/src/docz-components/IconRow/IconRow.module.scss b/src/docz-components/IconRow/IconRow.module.scss new file mode 100644 index 0000000..b350fe8 --- /dev/null +++ b/src/docz-components/IconRow/IconRow.module.scss @@ -0,0 +1,34 @@ +@import '../../styles/variables'; +@import '../../styles/colors'; +@import '../../styles/mixins'; + +.container { + display: flex; + margin-bottom: 2 * $grid-unit; + align-items: center; + padding-left: 4 * $grid-unit; + height: 5 * $grid-unit; + width: calc(30% - 4 * #{$grid-unit}); + border-bottom: solid 1px palette(base, 400); + padding-bottom: 2 * $grid-unit; +} + +.name { + @include font-body; + + width: 120px; + padding-right: $grid-unit; + flex-shrink: 0; +} +.icon { + line-height: 0 !important; + svg { + font-size: 18px !important; + } +} + +.description { + @include font-small; + color: palette(feedback); + margin-left: 4 * $grid-unit; +} diff --git a/src/docz-components/IconRow/IconRow.tsx b/src/docz-components/IconRow/IconRow.tsx new file mode 100644 index 0000000..f568ab1 --- /dev/null +++ b/src/docz-components/IconRow/IconRow.tsx @@ -0,0 +1,29 @@ +import React from 'react' +import SvgIcon from '@material-ui/core/SvgIcon' +import styles from './IconRow.module.scss' + +type Props = { + name: string + Icon?: any + path?: string + description: string +} +function IconRow({ name, Icon, path, description }: Props) { + return ( +
+ {name} +
+ {Icon ? ( + + ) : ( + + + + )} +
+ {description} +
+ ) +} + +export default IconRow diff --git a/src/gatsby-theme-docz/theme/index.js b/src/gatsby-theme-docz/theme/index.js index 5cd4e0f..193a50c 100644 --- a/src/gatsby-theme-docz/theme/index.js +++ b/src/gatsby-theme-docz/theme/index.js @@ -1,4 +1,5 @@ import '../../../../src/styles/docz.global.scss' +import '../../../../src/styles/icon-sizes.scss' import * as colors from './dark-theme-colors' @@ -7,6 +8,7 @@ import { merge } from 'lodash/fp' export default merge(baseTheme, { initialColorMode: 'dark', + fontSizes: [12, 14, 15, 16, 20, 24, 32, 48], colors: { modes: { dark: { diff --git a/src/styles/app.global.scss b/src/styles/app.global.scss index 0a53210..5ead110 100644 --- a/src/styles/app.global.scss +++ b/src/styles/app.global.scss @@ -11,6 +11,7 @@ @import './variables'; @import './mixins'; @import './colors'; +@import './icon-sizes'; html, body, @@ -135,31 +136,11 @@ a:active { display: none; } -/* - * Icon sizes - */ -.icon-small { - font-size: 0.8rem !important; -} -.icon-small-regular { - font-size: 1.1em !important; -} -.icon-regular { - font-size: 1rem !important; -} -.icon-big { - font-size: 2rem !important; -} - #contextual-menu { position: relative; z-index: 1000; } -.icon-huge { - font-size: 3rem !important; -} - #chartjs-tooltip { pointer-events: none; position: absolute; diff --git a/src/styles/docz.global.scss b/src/styles/docz.global.scss index ead9223..8a0d880 100644 --- a/src/styles/docz.global.scss +++ b/src/styles/docz.global.scss @@ -1,10 +1,20 @@ -@import './colors'; @import '~typeface-montserrat/index.css'; @import '~typeface-roboto-mono/index.css'; - @import './variables'; -@import './mixins'; - * { font-family: $font-family; } + +pre, +textarea, +code { + font-family: 'Roboto Mono', sans-serif !important; + font-size: 15px !important; + font-style: normal !important; + + * { + font-family: 'Roboto Mono', sans-serif !important; + font-size: 15px !important; + font-style: normal !important; + } +} diff --git a/src/styles/icon-sizes.scss b/src/styles/icon-sizes.scss new file mode 100644 index 0000000..494c9fe --- /dev/null +++ b/src/styles/icon-sizes.scss @@ -0,0 +1,15 @@ +.icon-small { + font-size: 0.8rem !important; +} +.icon-small-regular { + font-size: 1.1em !important; +} +.icon-regular { + font-size: 1rem !important; +} +.icon-big { + font-size: 2rem !important; +} +.icon-huge { + font-size: 3rem !important; +}