@clement_lores/admin-design-system 1.0.0

package/src/theme.ts

@@ -0,0 +1,554 @@
+/* eslint-disable max-len */
+/**
+ * @interface Theme
+ * @load ./theme.doc.md
+ * @section design-system
+ */
+
+/**
+ * Color palette.
+ *
+ * @memberof Theme
+ * @alias colors
+ * @property {string} primary100=#4268F6      <div style="background: #4268F6; height: 20px;" />
+ * @property {string} primary80=#6483F8     <div style="background: #6483F8; height: 20px;" />
+ * @property {string} primary60=#879FFA     <div style="background: #879FFA; height: 20px;" />
+ * @property {string} primary40=#A9BAFA     <div style="background: #A9BAFA; height: 20px;" />
+ * @property {string} primary20=#CBD5FD     <div style="background: #CBD5FD; height: 20px;" />
+ * @property {string} accent=#38CAF1      <div style="background: #38CAF1; height: 20px;" />
+ * @property {string} love=#e6282b      <div style="background: #e6282b; height: 20px;" />
+ * @property {string} grey100=#1C1C38     <div style="background: #1C1C38; height: 20px;" />
+ * @property {string} grey80=#454655      <div style="background: #454655; height: 20px;" />
+ * @property {string} grey60=#898A9A      <div style="background: #898A9A; height: 20px;" />
+ * @property {string} grey40=#C0C0CA      <div style="background: #C0C0CA; height: 20px;" />
+ * @property {string} grey20=#F6F7FB      <div style="background: #F6F7FB; height: 20px;" />
+ * @property {string} white=#fff      <div style="background: #fff; height: 20px;" />
+ * @property {string} errorDark=#DE405D     <div style="background: #DE405D; height: 20px;" />
+ * @property {string} error=#FF4567     <div style="background: #FF4567; height: 20px;" />
+ * @property {string} errorLight=#FFA5B5      <div style="background: #FFA5B5; height: 20px;" />
+ * @property {string} successDark=#32A887     <div style="background: #32A887; height: 20px;" />
+ * @property {string} success=#70C9B0     <div style="background: #70C9B0; height: 20px;" />
+ * @property {string} successLight=#DBF0F1      <div style="background: #DBF0F1; height: 20px;" />
+ * @property {string} infoDark=#4268F6      <div style="background: #4268F6; height: 20px;" />
+ * @property {string} info=#879FFA      <div style="background: #879FFA; height: 20px;" />
+ * @property {string} infoLight=#CBD5FD     <div style="background: #CBD5FD; height: 20px;" />
+ * @property {string} filterBg=#343F87      <div style="background: #343F87; height: 20px;" />
+ * @property {string} hoverBg=#535B8E     <div style="background: #535B8E; height: 20px;" />
+ * @property {string} inputBorder=#898A9A     <div style="background: #898A9A; height: 20px;" />
+ * @property {string} border=#DDE1E5,     <div style="background: #DDE1E5; height: 20px;" />
+ * @property {string} separator=#C0C0CA     <div style="background: #C0C0CA; height: 20px;" />
+ * @property {string} highlight=#F6F7FB     <div style="background: #F6F7FB; height: 20px;" />
+ * @property {string} filterInputBorder=rgba(255,255,255,0.15)      <div style="background: rgba(255,255,255,0.15); height: 20px;" />
+ * @property {string} filterDisabled=rgba(83,91,142,0.05)      <div style="background: rgba(83,91,142,0.05); height: 20px;" />
+ * @property {string} bg=#F6F7FB      <div style="background: #F6F7FB; height: 20px;" />
+ */
+export const colors = {
+  // global
+  border: '#EEEEEF',
+  text: '#0C1E29',
+
+  // primary
+  primary100: '#3040D6',
+  primary80: '#6483F8',
+  primary60: '#99A9EE',
+  primary40: '#BBC5F4',
+  primary20: '#DDE2F9',
+
+  // accent
+  accent: '#3B3552',
+
+  // grey
+  grey100: '#0C1E29',
+  grey80: '#454655',
+  grey60: '#898A9A',
+  grey40: '#BBC3CB',
+  grey20: '#F2F2F2',
+
+  // common
+  white: '#fff',
+  black: '#000',
+
+  // alerts
+  errorDark: '#9d0616',
+  error: '#C20012',
+  errorLight: '#F9E5E7',
+
+  successDark: '#007D7F',
+  success: '#007D7F',
+  successLight: '#E5F2F2',
+
+  warningDark: '#A14F17',
+  warning: '#A14F17',
+  warningLight: '#F6EDE8',
+
+  infoDark: '#4268F6',
+  info: '#3040D6',
+  infoLight: '#CBD5FD',
+
+  // backgrounds
+  bg: '#F8F9F9',
+  filterBg: '#FBFBFB',
+  container: '#FFFFFF',
+  sidebar: '#FFFFFF',
+
+  // elements
+  inputBorder: '#BBC3CB',
+  separator: '#BBC3CB',
+  highlight: '#F2F2F2',
+  // AdminJS logo color
+  love: '#4D70EB',
+}
+
+export const ColorVariants = {
+  primary: 'primary100',
+  secondary: 'accent',
+  danger: 'error',
+  success: 'success',
+  info: 'info',
+  warning: 'warning',
+  text: 'text',
+}
+
+export type ColorVariant = keyof typeof ColorVariants
+
+/**
+ * Sizes can be used with paddings, margins etc.
+ *
+ * This is the example of using responsive margin with Box component
+ *
+ * ```javascript
+ * <Box p=['default', 'xl']>some content</Box>
+ * ```
+ *
+ * This component will have 8px padding for lowest breakpoint and 24px above
+ * this breakpoint.
+ *
+ * @memberof Theme
+ * @alias space
+
+ * @property {string} xs=2px        2px - <span class="space-box" style="width: 2px;" />
+ * @property {string} sm=4px        4px - <span class="space-box" style="width: 4px;" />
+ * @property {string} default=8px   8px - <span class="space-box" style="width: 8px;" /> (alias md)
+ * @property {string} lg=16px       16px - <span class="space-box" style="width: 16px;" />
+ * @property {string} xl=24px       24px - <span class="space-box" style="width: 24px;" />
+ * @property {string} xxl=32px      32px - <span class="space-box" style="width: 32px;" />
+ * @property {string} x3=48px       48px - <span class="space-box" style="width: 48px;" />
+ * @property {string} x4=64px       64px - <span class="space-box" style="width: 64px;" />
+ * @property {string} x5=80px       80px - <span class="space-box" style="width: 80px;" />
+ * @property {string} x6=128px      128px - <span class="space-box" style="width: 128px;" />
+ */
+export const space = {
+  xs: '2px',
+  sm: '4px',
+  default: '8px',
+  md: '8px',
+  lg: '16px',
+  xl: '24px',
+  xxl: '32px',
+  x3: '48px',
+  x4: '64px',
+  x5: '80px',
+  x6: '128px',
+}
+
+/**
+ * @memberof Theme
+ * @alias sizes
+ * @property {string} navbarHeight=64px
+ * @property {string} sidebarWidth=300px
+ * @property {string} maxFormWidth=740px
+ */
+export const sizes = {
+  navbarHeight: '64px',
+  sidebarWidth: '300px',
+  maxFormWidth: '740px',
+}
+
+/**
+ * @memberof Theme
+ * @alias fontSizes
+ * @property {string} xs=10px      <div style="font-size: 10px;">'xs' font size</div>
+ * @property {string} sm=12px      <div style="font-size: 12px;">'sm' font size</div>
+ * @property {string} default=14px (alias md) <div style="font-size: 14px;">'default' font size</div>
+ * @property {string} lg=16px      <div style="font-size: 16px;">'lg' font size</div>
+ * @property {string} xl=18px      <div style="font-size: 18px;">'xl' font size</div>
+ * @property {string} h4=24px      <div style="font-size: 24px;">'h4' font size</div>
+ * @property {string} h3=28px      <div style="font-size: 28px;">'h3' font size</div>
+ * @property {string} h2=32px      <div style="font-size: 32px;">'h2' font size</div>
+ * @property {string} h1=40px      <div style="font-size: 40px;">'h1' font size</div>
+ */
+export const fontSizes = {
+  xs: '10px',
+  sm: '12px',
+  default: '14px',
+  md: '14px',
+  lg: '16px',
+  xl: '18px',
+  h4: '24px',
+  h3: '28px',
+  h2: '32px',
+  h1: '40px',
+}
+
+/**
+ * @memberof Theme
+ * @alias fontWeights
+ * @property {string} lighter=200
+ * @property {string} lighter=300
+ * @property {string} normal=400
+ * @property {string} normal=500
+ * @property {string} bolder=900
+ */
+export const fontWeights = {
+  lighter: 200,
+  light: 300,
+  normal: 400,
+  bold: 700,
+  bolder: 900,
+}
+
+/**
+ * @memberof Theme
+ * @alias lineHeights
+ * @property {string} xs=10px
+ * @property {string} sm=12px
+ * @property {string} default=16px (alias md)
+ * @property {string} lg=24px
+ * @property {string} xl=32px
+ * @property {string} xxl=40px
+ */
+export const lineHeights = {
+  xs: '10px',
+  sm: '12px',
+  default: '16px',
+  md: '16px',
+  lg: '24px',
+  xl: '32px',
+  xxl: '40px',
+}
+
+/**
+ * This dimension can be used with `testShadow` and `boxShadow` props provided
+ * by {@link ShadowProps}
+ *
+ * ```javascript
+ * <Box variant="grey" boxShadow="card">Some content...</Box>
+ * ```
+ *
+ * @alias shadows
+ * @memberof Theme
+ * @property {string} login              <div class="shadow-div" style="box-shadow: 0 15px 24px 0 rgba(137,138,154,0.15);"/>
+ * @property {string} cardHover          <div class="shadow-div" style="box-shadow: 0 4px 12px 0 rgba(137,138,154,0.4);"/>
+ * @property {string} drawer             <div class="shadow-div" style="box-shadow: -2px 0 8px 0 rgba(137,138,154,0.2);"/>
+ * @property {string} card               <div class="shadow-div" style="box-shadow: 0 1px 6px 0 rgba(137,138,154,0.4);"/>
+ * @property {string} inputFocus         <div class="shadow-div" style="box-shadow: 0 2px 4px 0 rgba(135,159,250,0.4);"/>
+ * @property {string} buttonFocus        <div class="shadow-div" style="box-shadow: 0 4px 6px 0 rgba(56,202,241,0.3);"/>
+ */
+export const shadows = {
+  login: '0 15px 24px 0 rgba(137,138,154,0.15)',
+  cardHover: '0 4px 12px 0 rgba(137,138,154,0.4)',
+  drawer: '-2px 0 8px 0 rgba(137,138,154,0.2)',
+  card: '0rem 0.25rem 0.5rem rgba(0, 0, 0, 0.1)',
+  inputFocus: '0 2px 4px 0 rgba(135,159,250,0.4)',
+  buttonFocus: '0 4px 6px 0 rgba(56,202,241,0.3)',
+}
+
+/**
+ * Responsive breakpoints
+ *
+ * How to use them - simply pass an array to given prop:
+ *
+ * ```javascript
+ * // Showing box on mobile devices
+ * <Box display={["block", "none"]}>...</Box>
+ *
+ * // responsive width
+ * <Box width={[1, 1/2, 1/3, 1/4]}>...</Box>
+ * ```
+ *
+ * @memberof Theme
+ * @alias breakpoints
+ * @property {string} 0=577px
+ * @property {string} 1=769px
+ * @property {string} 2=1024px
+ * @property {string} 3=1324px
+ */
+export const breakpoints = [
+  '577px',
+  '769px',
+  '1024px',
+  '1324px', // 1024 + sidebarWidth
+]
+
+export const font = '\'Roboto\', sans-serif' as string
+
+/**
+ * Border styles
+ *
+ * @memberof Theme
+ * @alias borders
+ * @property {string} input
+ * @property {string} filterInput
+ * @property {string} bg
+ * @property {string} default
+ */
+export const borders = {
+  input: `1px solid ${colors.border}`,
+  filterInput: ' 1px rgba(255,255,255, 0.15)',
+  bg: `1px solid ${colors.bg}`,
+  default: `1px solid ${colors.border}`,
+}
+
+/**
+ * Border widths set for an entire layout. If you like to have border radius in Button's and Box'es
+ * Then set default property.
+ *
+ * @memberof Theme
+ * @alias borderWidths
+ * @property {string} default - default border with
+ */
+export const borderWidths = {
+  default: '0px',
+}
+
+export type VariantType = 'success' | 'info' | 'primary' | 'secondary' | 'danger' | 'light' | 'default';
+
+// TODO: add transitions
+
+export const defaultProps = {}
+
+/**
+ * The color utility parses a component's color and bg props and converts them into CSS
+ * declarations. By default the raw value of the prop is returned. But most often you
+ * would use one of the color from the [color palette]{@link colors}.
+ *
+ * @typedef {object} ColorProps
+ * @alias ColorProps
+ * @memberof Theme
+ * @property {string} [color]                 Text color. It could be either a #hash or
+ *                                            {@link colors} from css theme name like
+ *                                            `grey80`
+ * @property {string} [backgroundColor, bg]   Background color. Similar as above could be a
+ *                                            #hash or one of {@link colors}.
+ */
+
+/**
+ * The space utility converts shorthand margin and padding props to margin and padding
+ * CSS declarations.
+ *
+ * You can use as a value raw dimensions in "px" or one of the value from the
+ * [space scale]{@link space}.
+ *
+ * @typedef {object} SpaceProps
+ * @alias SpaceProps
+ * @memberof Theme
+ * @property {string} [margin, m]             margin
+ * @property {string} [marginTop, mt]         margin-top
+ * @property {string} [marginRight, mr]       margin-right
+ * @property {string} [marginBottom, mb]      margin-bottom
+ * @property {string} [marginLeft, ml]        margin-left
+ * @property {string} [marginX, mx]           margin-left and margin-right
+ * @property {string} [marginY, my]           margin-top and margin-bottom
+ * @property {string} [padding, p]            padding
+ * @property {string} [paddingTop, pt]        padding-top
+ * @property {string} [paddingRight, pr]      padding-right
+ * @property {string} [paddingBottom, pb]     padding-bottom
+ * @property {string} [paddingLeft, pl]       padding-left
+ * @property {string} [paddingX, px]          padding-left and padding-right
+ * @property {string} [paddingY, py]          padding-top and padding-bottom
+ *
+ * Set of props related to {@link space}. You can put there either string with 'px' or
+ * one of `space` properties like `sm`, `default`, `xl` etc.
+ */
+
+/**
+ * Typography props include _fontFamily_, _fontSize_, _fontWeight_, _lineHeight_, _letterSpacing_,
+ * _textAlign_, and _fontStyle_.
+ *
+ * @typedef {object} TypographyProps
+ * @alias TypographyProps
+ * @memberof Theme
+ * @property {string} [fontSize]    font-size. Could be either actual css value or key taken from
+ *                                  {@link fontSizes}
+ * @property {string} [fontWeight]  font-weight. Could be either actual css value or key taken from
+ *                                  {@link fontWeights}
+ * @property {string} [lineHeight]  line-height. Could be either actual css value or key taken from
+ *                                  {@link lineHeights}
+ * @property {string} [textAlign]   text-align
+ * @property {string} [fontFamily]  font-family
+ * @property {string} [fontStyle]   font-style
+ * @property {string} [letterSpacing]  letter-spacing
+ */
+
+/**
+ * The layout utility includes style props for width, height, display, minWidth,
+ * minHeight, maxWidth, maxHeight, size, verticalAlign, overflow, overflowX, and overflowY.
+ *
+ * The width prop is transformed based on the following:
+ *
+ * - Numbers from 0-1 are converted to percentage widths.
+ * - Numbers greater than 1 are converted to pixel values.
+ * - String values are passed as raw CSS values.
+ * - And arrays are converted to responsive width styles.
+ * - the width prop will attempt to pick up values from the {@link sizes}
+ *
+ * @example
+ * // width `50%`
+ * <Box width={1/2} />
+ *
+ * // width `256px`
+ * <Box width={256} />
+ *
+ * // width `'2em'`
+ * <Box width='2em' />
+ *
+ * // width `100%` on all viewport and `50%` from the smallest breakpoint and up
+ * <Box width={[ 1, 1/2 ]} />
+ *
+ * // width from `sizes`
+ * <Box height='navbarHeight' />
+ *
+ * @typedef {object} LayoutProps
+ * @alias LayoutProps
+ * @memberof Theme
+ * @property {string} [width]         width
+ * @property {string} [height]        height
+ * @property {string} [display]       display
+ * @property {string} [minWidth]      min-width
+ * @property {string} [minHeight]     min-height
+ * @property {string} [maxWidth]      max-width
+ * @property {string} [maxHeight]     max-height
+ * @property {string} [size]          size
+ * @property {string} [verticalAlign] vertical-align
+ * @property {string} [overflow]      overflow
+ * @property {string} [overflowX]     overflow-x
+ * @property {string} [overflowY]     overflow-y
+ */
+
+/**
+ * The flexbox utility includes style props for alignItems, alignContent, justifyItems,
+ * justifyContent, flexWrap, flexDirection, flex, flexGrow, flexShrink, flexBasis,
+ * justifySelf, alignSelf, and order.
+ *
+ * The width prop is transformed based on the following:
+ *
+ * - Numbers from 0-1 are converted to percentage widths.
+ * - Numbers greater than 1 are converted to pixel values.
+ * - String values are passed as raw CSS values.
+ * - And arrays are converted to responsive width styles.
+ * - the width prop will attempt to pick up values from the {@link sizes}
+ *
+ * @example
+ * // alignItems
+ * <Box alignItems='center' />
+ *
+ * // alignContent
+ * <Box alignContent='center' />
+ *
+ * // justifyContent
+ * <Box justifyContent='center' />
+ *
+ * // flexWrap
+ * <Box flexWrap='wrap' />
+ *
+ * // flexBasis
+ * <Box flexBasis='auto' />
+ *
+ * // flexDirection
+ * <Box flexDirection='column' />
+ *
+ * // flex
+ * <Box flex />
+ *
+ * // justifySelf
+ * <Box justifySelf='center' />
+ *
+ * // alignSelf
+ * <Box alignSelf='center' />
+ *
+ * // order
+ * <Box order='2' />
+ *
+ * @typedef {object} FlexboxProps
+ * @alias FlexboxProps
+ * @memberof Theme
+ * @property {string} [alignItems]         align-items
+ * @property {string} [alignContent]       align-content
+ * @property {string} [justifyItems]       justify-items
+ * @property {string} [justifyContent]     justify-content
+ * @property {string} [flexWrap]           flex-wrap
+ * @property {string} [flexDirection]      flex-direction
+ * @property {boolean} [flex]               flex
+ * @property {number|string} [flexGrow]           flex-grow
+ * @property {number} [flexShrink]         flex-shrink
+ * @property {string} [flexBasis]          flex-basis
+ * @property {string} [justifySelf]        justify-self
+ * @property {string} [alignSelf]          align-self
+ * @property {number|string} [order]              order
+ */
+
+/**
+ * Reused Variant Enum: `primary` | `danger` | `success` | `info` | `secondary` | `default`
+ *
+ * @typedef {Enum} VariantType
+ * @alias VariantType
+ * @memberof Theme
+ */
+
+/**
+ * The border utility includes all style props related to border
+ *
+ * @typedef {object} BorderProps
+ * @alias BorderProps
+ * @memberof Theme
+ * @property {string | number} [borderWidth]
+ * @property {string} [borderStyle]
+ * @property {string} [borderColor] It could be either a #hash or {@link colors}
+ * @property {string | number} [borderRadius]
+ * @property {string | number} [borderTop]
+ * @property {string | number} [borderTopWidth]
+ * @property {string} [borderTopStyle]
+ * @property {string} [borderTopColor] It could be either a #hash or {@link colors}
+ * @property {string | number} [borderTopLeftRadius]
+ * @property {string | number} [borderTopRightRadius]
+ * @property {string | number} [borderRight]
+ * @property {string | number} [borderRightWidth]
+ * @property {string} [borderRightStyle]
+ * @property {string} [borderRightColor] It could be either a #hash or {@link colors}
+ * @property {string | number} [borderBottom]
+ * @property {string | number} [borderBottomWidth]
+ * @property {string} [borderBottomStyle]
+ * @property {string} [borderBottomColor] It could be either a #hash or {@link colors}
+ * @property {string | number} [borderBottomLeftRadius]
+ * @property {string | number} [borderBottomRightRadius]
+ * @property {string | number} [borderLeft]
+ * @property {string | number} [borderLeftWidth]
+ * @property {string} [borderLeftStyle]
+ * @property {string} [borderLeftColor] It could be either a #hash or {@link colors}
+ * @property {string | number} [borderX]
+ * @property {string | number} [borderY]
+ */
+
+/**
+ * The position utility includes style props for position, zIndex, top, right, bottom, and left.
+ *
+ * @typedef {object} PositionProps
+ * @alias PositionProps
+ * @memberof Theme
+ * property {string | number} [position]
+ * property {string | number} [zIndex]
+ * property {string | number} [top]
+ * property {string | number} [right]
+ * property {string | number} [bottom]
+ * property {string | number} [left]
+ */
+
+/**
+ * The shadow utility includes style props for textShadow and boxShadow.
+ *
+ * @typedef {object} ShadowProps
+ * @alias ShadowProps
+ * @memberof Theme
+ * property {string} [boxShadow]
+ * property {string} [textShadow]
+ */

package/src/utils/assert.ts

@@ -0,0 +1,8 @@
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export function assert(condition: any, msg?: string): asserts condition {
+  if (!condition) {
+    throw new Error(msg)
+  }
+}
+
+export default assert

package/src/utils/color-props.ts

@@ -0,0 +1,7 @@
+import { ColorProps } from 'styled-system'
+
+export type NewColorProps = Omit<ColorProps, 'color'> & {
+  color?: string
+}
+
+export default NewColorProps

package/src/utils/combine-styles.ts

@@ -0,0 +1,35 @@
+import {flatten, unflatten } from 'flat'
+import merge from 'lodash/merge.js'
+
+import * as theme from '../theme.js'
+import type { Theme, ThemeOverride } from './default-theme.interface.js'
+
+/**
+ * Applies new styles to the default theme
+ *
+ * ### Example
+ *
+ * ```jsx
+ * import { combineStyles } from '@adminjs/design-system`
+ *
+ * const myTheme = combineStyles({
+ *   colors: {
+ *     primary100: '#000'
+ *   }
+ * })
+ * ```
+ *
+ * @param {ThemeOverride} overrides
+ * @memberof module:@adminjs/design-system
+ *
+ * @return  {Theme}
+ */
+const combineStyles = (...overrides: (Partial<ThemeOverride> | undefined)[]): Theme => {
+  const merged: Partial<ThemeOverride>[] = merge(
+    flatten(theme as Theme),
+    ...overrides.map((o = {}) => flatten(o)),
+  )
+  return unflatten(merged)
+}
+
+export { combineStyles }