@startupjs/docs 0.54.13 → 0.55.0-alpha.0

package/client/app/Layout/Sidebar/Content/Docs/index.styl

@@ -5,7 +5,7 @@
 
 .collapse
   &-icon
-    color: $UI.colors.secondaryText
+    color var(--color-text-description)
 
 .link
   text-decoration none

package/client/app/Layout/Sidebar/Content/Options/index.js

@@ -1,15 +1,26 @@
 import React from 'react'
-import { pug, observer, useValue } from 'startupjs'
-import { Br, Input, Button, Modal } from '@startupjs/ui'
+import { pug, observer, useValue, $ } from 'startupjs'
+import { Br, Input, Button, Modal, CssVariables, Palette, Colors } from '@startupjs/ui'
 import { faSlidersH } from '@fortawesome/free-solid-svg-icons'
 import {
   useShowGrid,
-  useShowSizes,
-  // useValidateWidth,
-  useDarkTheme
+  useShowSizes
+  // useValidateWidth
 } from '../../../../../clientHelpers'
 import './index.styl'
 
+const palette = new Palette()
+const { Color, generateColors } = palette
+
+const THEMES = {
+  dark: generateColors({
+    [Colors.bg]: Color('coolGray', 0),
+    [Colors.text]: Color('coolGray', 9),
+    [Colors.border]: Color('coolGray', 2),
+    [Colors.secondary]: Color('coolGray', 9)
+  })
+}
+
 export default observer(function Options ({
   style
 }) {
@@ -19,13 +30,24 @@ export default observer(function Options ({
   //       initially. While $showSizes.get() works fine for some reason.
   const [, $showSizes] = useShowSizes()
   // const [, $validateWidth] = useValidateWidth()
-  const [, $darkTheme] = useDarkTheme()
+  const $theme = $.session.theme
+  const theme = $theme.get() || 'light'
+
+  function toggleTheme () {
+    if (theme === 'light') {
+      $theme.set('dark')
+    } else {
+      $theme.set('light')
+    }
+  }
 
   return pug`
+    if theme !== 'light'
+      CssVariables(meta=THEMES[theme])
     Button(
       style=style
       icon=faSlidersH
-      color='darkLight'
+      color='text-description'
       variant='text'
       onPress=() => $open.set(true)
     )
@@ -33,12 +55,12 @@ export default observer(function Options ({
       title='Settings'
       $visible=$open
     )
-      Input.input(type='checkbox' label='Dark theme' $value=$darkTheme)
+      Input.input(type='checkbox' label='Dark theme' value=theme === 'dark' onChange=toggleTheme)
       if $showSizes.get()
         //- TODO: Maybe bring width check back in future
         // Input.input(type='checkbox' label='Validate width' $value=$validateWidth)
         Input.input(type='checkbox' label='Show grid' $value=$showGrid)
       Input.input(type='checkbox' label='Show sizes' $value=$showSizes)
-      Br(half)
+      Br
   `
 })

package/client/app/Layout/Sidebar/Content/Options/index.styl

@@ -1,6 +1,6 @@
 .header
   padding 1u 1u 1u 2u
-  background-color $UI.colors.darkLightest
+  background-color var(--color-bg)
 
 .content
   padding-top 2u

package/client/app/Layout/Sidebar/Content/index.styl

@@ -1,5 +1,5 @@
 .root
-  background-color #f5f5f5
+  background-color var(--color-bg)
   flex 1
 
 .main
@@ -16,14 +16,14 @@
   margin-bottom 4u
 
 .hr
-  border-bottom-color #eaeaea
+  border-bottom-color var(--color-border)
 
 .footer
   padding-top 1u
   padding-bottom 1u
   padding-left 2u
   padding-right 0.5u
-  background-color $UI.colors.darkLightest
+  background-color var(--color-bg-dim)
 
 .lang
   // TODO: flex-grow 1 for some reason gets removed. Research.

package/client/app/Layout/index.js

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { pug, emit, observer, useModel } from 'startupjs'
+import { pug, emit, observer, useModel, $ } from 'startupjs'
 import { pathFor, useLocation } from 'startupjs/app'
 import { AutoSuggest, Button, Div, Layout, Menu, Row, Span } from '@startupjs/ui'
 import { MDXProvider } from '@startupjs/mdx'
@@ -51,6 +51,7 @@ const Search = observer(function Search () {
   }, [])
 
   function onChange (value) {
+    if (!value) return
     setValue({})
     // TODO: replaced from Menu.Item 'to' property
     emit('url', value.value)
@@ -87,7 +88,7 @@ const Topbar = observer(function Topbar () {
 
   return pug`
     Row.topbar
-      Button(testID='button' variant='text' icon=faBars onPress=toggleSidebar color='darkLight')
+      Button(testID='button' variant='text' icon=faBars onPress=toggleSidebar color='text-description')
       Div.searchWrapper
         Search
   `
@@ -97,7 +98,7 @@ export default observer(function StyleguideLayout ({ children }) {
   // Note: Topbar height is compensated in PDoc
   //       to achieve a semi-transparent effect
   return pug`
-    MDXProvider
+    MDXProvider(key=$.session.theme.get())
       Layout.layout(testID="Layout")
         Sidebar
           Topbar

package/client/app/Layout/index.styl

@@ -1,23 +1,20 @@
 @require '../constants.styl'
 
-$separatorColor = #ddd
-$topbarBorderColor = #eee
-
 .layout
-  background-color $UI.colors.white
+  background-color var(--color-bg-strong)
 
 .topbar
   align-items center
   justify-content space-between
   border-bottom-width 1px
-  border-bottom-color $topbarBorderColor
+  border-bottom-color var(--color-border-strong-alt)
   height $TOPBAR_HEIGHT
   padding 0 1u
 
 .searchWrapper
   width 32u
   border-left-width 1px
-  border-left-color $separatorColor
+  border-left-color var(--color-border)
   padding-left 2u
 
   +tablet()
@@ -28,7 +25,7 @@ $topbarBorderColor = #eee
   &:part(input)
     border none
   &:part(icon)
-    color $UI.colors.darkLight
+    color var(--color-text-description)
 
 .active
-  color $UI.colors.primary
+  color var(--color-text-primary)

package/client/components/Props/Constructor/Table/index.styl

@@ -1,4 +1,2 @@
-$border = lighten($UI.colors.dark, 75%) // ???
-
 .root
   width 100%

package/client/components/Props/Constructor/Tr/index.styl

@@ -1,13 +1,10 @@
-$border = #eaeaea
-$darkBorder = lighten($UI.colors.dark, 0%)
-
 .root
   flex-direction row
-  border-color $border
+  border-color var(--color-border)
   border-bottom-width 1px
   padding-left 1u
   padding-right 1u
 
 .dark
   &.root
-    border-color $darkBorder
+    border-color var(--color-border-inverse)

package/client/components/Props/Constructor/index.styl

@@ -1,15 +1,10 @@
-$input = lighten($UI.colors.dark, 75%)
-$thead = $UI.colors.darkLight
-$header = $UI.colors.secondaryText
-$darkHeader = $UI.colors.whiteLight
-$value = $UI.colors.success
-$type = $UI.colors.additional1
-
-.input
-  background-color white
-  border-color $input
-  border-width 1px
-  padding 0 0.5u
+$input = var(--color-border)
+$header = var(--color-text-description)
+$darkHeader = var(--color-text-inverse)
+$value = var(--color-text-success)
+$type = var(--color-text-info)
+$valueDark = var(--color-text-success-strong)
+$typeDark = var(--color-text-info-strong)
 
 .header
   font-size 12px
@@ -34,19 +29,19 @@ $type = $UI.colors.additional1
   &.header
     color $darkHeader
   &.value
-    color lighten($value, 30%)
+    color $valueDark
   &.type
-    color lighten($type, 30%)
+    color $typeDark
 
 .checkbox
   align-self flex-end
 
 .unsupported
-  color $UI.colors.secondaryText
+  color var(--color-text-description)
   text-align right
 
 .separator
-  color $UI.colors.darkLighter
+  color var(--color-text-placeholder)
 
 .vCenter
   justify-content center
@@ -56,4 +51,4 @@ $type = $UI.colors.additional1
   align-self flex-start
 
 .badJSON
-  color: $UI.colors.error
+  color var(--color-text-error)

package/client/components/Props/index.styl

@@ -1,19 +1,18 @@
-$border = $UI.colors.darkLight
-$darkTopBg = #212121
-$darkBottomBg = #333333
+$darkTopBg = var(--color-bg-inverse)
+$darkBottomBg = var(--color-bg-inverse-alt)
 
 .root
   margin-top 2u
 
 .top
-  background-color #fafafa
+  background-color var(--color-bg)
   border-top-left-radius 1u
   border-top-right-radius 1u
   padding-top 1u
 
 .bottom
   padding-top 4u
-  background-color #f5f5f5
+  background-color var(--color-bg-dim)
   border-bottom-left-radius 1u
   border-bottom-right-radius 1u
 

package/client/components/Sandbox/index.styl

@@ -1,2 +1,2 @@
 .error
-  color $UI.colors.error
+  color var(--color-text-error)

package/package.json

@@ -4,14 +4,14 @@
     "access": "public"
   },
   "description": "MDX documentation generator",
-  "version": "0.54.13",
+  "version": "0.55.0-alpha.0",
   "type": "module",
   "main": "index.js",
   "dependencies": {
     "@fortawesome/free-solid-svg-icons": "^5.12.0",
-    "@startupjs/mdx": "^0.54.13",
-    "@startupjs/scrollable-anchors": "^0.54.13",
-    "@startupjs/ui": "^0.54.6",
+    "@startupjs/mdx": "^0.55.0-alpha.0",
+    "@startupjs/scrollable-anchors": "^0.55.0-alpha.0",
+    "@startupjs/ui": "^0.55.0-alpha.0",
     "parse-prop-types": "^0.3.0"
   },
   "peerDependencies": {
@@ -19,5 +19,5 @@
     "react-native": "*",
     "startupjs": "*"
   },
-  "gitHead": "05a191556bcc4511ab30a204770e63abb25f8a55"
+  "gitHead": "5b9f342065345c91ee4e11d9a44d66a9a73665ad"
 }