feat: theme

packages/layout/package.json

@@ -30,6 +30,7 @@
     "start": "tsx src/index.ts"
   },
   "dependencies": {
+    "@sciux/utils-theme": "workspace:^",
     "@vue/reactivity": "^3.5.14",
     "arktype": "^2.1.20",
     "sciux-laplace": "catalog:"

packages/layout/src/block.ts

@@ -1,8 +1,8 @@
+import { theme } from '@sciux/utils-theme'
 import { toValue } from '@vue/reactivity'
 import { type } from 'arktype'
 import { defineComponent } from 'sciux-laplace'
 import { AlignType } from './align'
-import { size } from './utils/size'
 
 export const BlockType = type({
   margin: 'string | number',
@@ -18,35 +18,37 @@ export const BlockType = type({
   align: AlignType,
 })
 
+export const blockDefaults = {
+  margin: '0',
+  marginTop: '0',
+  marginRight: '0',
+  marginBottom: '0',
+  marginLeft: '0',
+  padding: '0',
+  paddingTop: '0',
+  paddingRight: '0',
+  paddingBottom: '0',
+  paddingLeft: '0',
+  align: 'start' as const,
+}
+
 export default defineComponent<'block', typeof BlockType.infer>((attrs, _context) => {
   return {
     name: 'block',
     attrs: BlockType,
-    defaults: {
-      margin: '0',
-      marginTop: '0',
-      marginRight: '0',
-      marginBottom: '0',
-      marginLeft: '0',
-      padding: '0',
-      paddingTop: '0',
-      paddingRight: '0',
-      paddingBottom: '0',
-      paddingLeft: '0',
-      align: 'start',
-    },
+    defaults: blockDefaults,
     setup: (children) => {
       const element = document.createElement('div')
-      element.style.margin = size(toValue(attrs.margin))
-      element.style.marginTop = size(toValue(attrs.marginTop))
-      element.style.marginRight = size(toValue(attrs.marginRight))
-      element.style.marginBottom = size(toValue(attrs.marginBottom))
-      element.style.marginLeft = size(toValue(attrs.marginLeft))
-      element.style.padding = size(toValue(attrs.padding))
-      element.style.paddingTop = size(toValue(attrs.paddingTop))
-      element.style.paddingRight = size(toValue(attrs.paddingRight))
-      element.style.paddingBottom = size(toValue(attrs.paddingBottom))
-      element.style.paddingLeft = size(toValue(attrs.paddingLeft))
+      element.style.margin = theme.size(toValue(attrs.margin))
+      element.style.marginTop = theme.size(toValue(attrs.marginTop))
+      element.style.marginRight = theme.size(toValue(attrs.marginRight))
+      element.style.marginBottom = theme.size(toValue(attrs.marginBottom))
+      element.style.marginLeft = theme.size(toValue(attrs.marginLeft))
+      element.style.padding = theme.size(toValue(attrs.padding))
+      element.style.paddingTop = theme.size(toValue(attrs.paddingTop))
+      element.style.paddingRight = theme.size(toValue(attrs.paddingRight))
+      element.style.paddingBottom = theme.size(toValue(attrs.paddingBottom))
+      element.style.paddingLeft = theme.size(toValue(attrs.paddingLeft))
       element.style.alignItems = toValue(attrs.align)
       element.append(...children())
       return element

packages/layout/src/columns.ts

@@ -1,7 +1,7 @@
 import type { Ref } from 'sciux-laplace'
 import { type } from 'arktype'
 import { defineComponent, ref, toValue } from 'sciux-laplace'
-import flexbox, { FlexboxType } from './flexbox'
+import flexbox, { flexboxDefaults, FlexboxType } from './flexbox'
 
 const T = type({
 
@@ -12,6 +12,7 @@ export default defineComponent<'columns', typeof T.infer, { direction?: Ref<'row
   return {
     name: 'columns',
     attrs: T,
+    defaults: flexboxDefaults,
     setup: (children) => {
       const extend = flexbox(attrs, {
         ...context,

packages/layout/src/flexbox.ts

@@ -1,9 +1,9 @@
 import type { Ref } from '@vue/reactivity'
+import { theme } from '@sciux/utils-theme'
 import { ref, toValue } from '@vue/reactivity'
 import { type } from 'arktype'
 import { defineComponent } from 'sciux-laplace'
-import block, { BlockType } from './block'
-import { size } from './utils/size'
+import block, { blockDefaults, BlockType } from './block'
 
 const Position = type(`'start' | 'end' | 'center'`)
 export const FlexboxType = type({
@@ -17,6 +17,14 @@ export const FlexboxType = type({
   basis: type(`string | number`).optional(),
 }).and(BlockType)
 
+export const flexboxDefaults = {
+  direction: 'row' as const,
+  wrap: 'nowrap' as const,
+  grow: 1,
+  shrink: 0,
+  ...blockDefaults,
+}
+
 export default defineComponent<'flexbox', typeof FlexboxType.infer, { direction?: Ref<'row' | 'column'> }>((attrs, context) => {
   const extend = block(attrs, context)
   const direction = ref(toValue(attrs.direction ?? 'row') as string)
@@ -25,12 +33,7 @@ export default defineComponent<'flexbox', typeof FlexboxType.infer, { direction?
   return {
     name: 'flexbox',
     attrs: FlexboxType,
-    defaults: {
-      direction: 'row',
-      wrap: 'nowrap',
-      grow: 1,
-      shrink: 0,
-    },
+    defaults: flexboxDefaults,
     setup: (children) => {
       const element = extend.setup!(children) as HTMLDivElement
 
@@ -44,11 +47,11 @@ export default defineComponent<'flexbox', typeof FlexboxType.infer, { direction?
       direction.value = toValue(attrs.direction)
       element.style.justifyContent = toValue(attrs.justify ?? 'auto')!
       element.style.alignItems = toValue(attrs.align ?? 'auto')!
-      element.style.gap = size(toValue(attrs.gap) ?? 'auto')
+      element.style.gap = theme.size(toValue(attrs.gap) ?? 'auto')
       element.style.flexWrap = toValue(attrs.wrap)
       element.style.flexGrow = (toValue(attrs.grow) ?? 1).toString()
       element.style.flexShrink = (toValue(attrs.shrink) ?? 0).toString()
-      element.style.flexBasis = size(toValue(attrs.basis) ?? 'auto')
+      element.style.flexBasis = theme.size(toValue(attrs.basis) ?? 'auto')
       return element
     },
     provides: {

packages/layout/src/grid.ts

@@ -1,8 +1,8 @@
+import { theme } from '@sciux/utils-theme'
 import { toValue } from '@vue/reactivity'
 import { type } from 'arktype'
 import { defineComponent } from 'sciux-laplace'
 import { AlignType } from './align'
-import { size } from './utils/size'
 
 const T = type({
   columns: `string | number | Array`,
@@ -32,11 +32,11 @@ export default defineComponent<'grid', typeof T.infer>((attrs, _context) => {
       element.style.display = 'grid'
       element.style.gridTemplateColumns = toValue(attrs.columns) as string
       element.style.gridTemplateRows = toValue(attrs.rows) as string
-      element.style.gap = size(toValue(attrs.gutter))
-      element.style.columnGap = size(toValue(attrs.columnGutter))
-      element.style.rowGap = size(toValue(attrs.rowGutter))
+      element.style.gap = theme.size(toValue(attrs.gutter))
+      element.style.columnGap = theme.size(toValue(attrs.columnGutter))
+      element.style.rowGap = theme.size(toValue(attrs.rowGutter))
       element.style.justifyContent = toValue(attrs.align) as string
-      element.style.inset = size(toValue(attrs.inset))
+      element.style.inset = theme.size(toValue(attrs.inset))
       element.append(...children())
       return element
     },

packages/layout/src/index.ts

@@ -4,5 +4,3 @@ export { default as columns } from './columns'
 export { default as flexbox } from './flexbox'
 export { default as grid } from './grid'
 export { default as rows } from './rows'
-
-export * from './utils/size'

packages/layout/src/rows.ts

@@ -1,7 +1,7 @@
 import type { Ref } from 'sciux-laplace'
 import { type } from 'arktype'
 import { defineComponent, ref, toValue } from 'sciux-laplace'
-import flexbox, { FlexboxType } from './flexbox'
+import flexbox, { flexboxDefaults, FlexboxType } from './flexbox'
 
 const T = type({
 
@@ -12,6 +12,7 @@ export default defineComponent<'rows', typeof T.infer, { direction?: Ref<'row' |
   return {
     name: 'rows',
     attrs: T,
+    defaults: flexboxDefaults,
     setup: (children) => {
       const extend = flexbox(attrs, context)
       const element = extend.setup!(children) as HTMLDivElement

packages/theme-default/README.md

@@ -0,0 +1,3 @@
+# `@sciux/theme-default`
+
+Default theme for SciuxKit

packages/theme-default/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@sciux/theme-default",
+  "type": "module",
+  "version": "0.0.5",
+  "description": "Default theme for SciuxKit",
+  "author": "BijonAI <info@bijon.ai>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sciux-kit/lib.git"
+  },
+  "bugs": "https://github.com/sciux-kit/lib/issues",
+  "keywords": [],
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "prepublishOnly": "nr build"
+  },
+  "dependencies": {
+    "@sciux/layout": "workspace:^",
+    "@vue/reactivity": "^3.5.14",
+    "arktype": "^2.1.20",
+    "katex": "^0.16.22",
+    "sciux-laplace": "catalog:",
+    "shiki": "^3.4.2"
+  }
+}

packages/theme-default/styles/main.css

@@ -0,0 +1 @@
+@import './vars.css';

packages/theme-default/styles/vars.css

@@ -0,0 +1,59 @@
+/* Background */
+:root {
+  --sci-background: #24292F;
+  --sci-background-accent: #181C20;
+}
+
+/* Base Color Palette */
+:root {
+  --sci-primary: #FFFFFF;
+  --sci-note: #C7EDCC;
+  --sci-warning: #F59E0B;
+  --sci-accent: #FFFF00;
+  --sci-alert: #EF4444;
+  --sci-info: #3B82F6;
+  --sci-success: #10B981;
+  --sci-creative: #F472B6;
+}
+
+/* Transparent Marker Colors */
+:root {
+  --sci-highlight-primary: var(--sci-highlight-key);
+  --sci-highlight-key: rgba(var(--sci-accent), 0.5);
+  --sci-highlight-support: rgba(var(--sci-success), 0.5);
+  --sci-highlight-creative: rgba(var(--sci-creative), 0.5);
+  --sci-highlight-caution: rgba(var(--sci-warning), 0.5);
+  --sci-highlight-info: rgba(var(--sci-info), 0.5);
+}
+
+/* Size Table */
+:root {
+  --sci-size-primary: 16px;
+  --sci-size-3xs: 12px;
+  --sci-size-2xs: 14px;
+  --sci-size-xs: 16px;
+  --sci-size-sm: 18px;
+  --sci-size-md: 20px;
+  --sci-size-lg: 24px;
+  --sci-size-xl: 32px;
+  --sci-size-2xl: 40px;
+  --sci-size-3xl: 48px;
+  --sci-size-4xl: 56px;
+  --sci-size-5xl: 64px;
+  --sci-size-6xl: 72px;
+}
+
+/* Font */
+:root {
+  --sci-font-primary: 'Inter', sans-serif;
+  --sci-font-comic: 'Comic Sans MS', cursive;
+  --sci-font-code: 'JetBrains Mono', monospace;
+  --sci-font-math: 'Times New Roman', serif;
+}
+
+/* Dash Array */
+:root {
+  --sci-dasharray-solid: 0 0;
+  --sci-dasharray-dashed: 10 5;
+  --sci-dasharray-dotted: 2 2;
+}

packages/utils-theme/README.md

@@ -0,0 +1,3 @@
+# `@sciux/utils-theme`
+
+Theme utilities for SciuxKit

packages/utils-theme/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@sciux/utils-theme",
+  "type": "module",
+  "version": "0.0.5",
+  "description": "Theme utilities for SciuxKit",
+  "author": "BijonAI <info@bijon.ai>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sciux-kit/lib.git"
+  },
+  "bugs": "https://github.com/sciux-kit/lib/issues",
+  "keywords": [],
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "main": "./dist/index.mjs",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "nr build",
+    "start": "tsx src/index.ts"
+  },
+  "dependencies": {
+    "@vue/reactivity": "^3.5.14",
+    "arktype": "^2.1.20",
+    "sciux-laplace": "catalog:"
+  }
+}

packages/utils-theme/src/index.ts

@@ -0,0 +1 @@
+export * as theme from './theme'