@charcoal-ui/styled 1.0.0-alpha.1 → 1.0.0

package/dist/util.d.ts

@@ -0,0 +1,45 @@
+/**
+ * Function used to assert a given code path is unreachable
+ */
+export declare function unreachable(): never;
+/**
+ * Function used to assert a given code path is unreachable.
+ * Very useful for ensuring switches are exhaustive:
+ *
+ * ```ts
+ * switch (a.type) {
+ *   case Types.A:
+ *   case Types.B:
+ *     break
+ *   default:
+ *     unreachable(a) // will cause a build error if there was
+ *                    // a Types.C that was not checked
+ * }
+ * ```
+ *
+ * @param value Value to be asserted as unreachable
+ */
+export declare function unreachable(value: never): never;
+/**
+ * Check whether a value is non-null and non-undefined
+ *
+ * @param value nullable
+ */
+export declare const isPresent: <T>(value: T) => value is NonNullable<T>;
+declare type Head<U> = U extends [infer T, ...any[]] ? T : never;
+declare type Tail<U> = U extends [any, any, ...any[]] ? ((...args: U) => any) extends (head: any, ...args: infer T) => any ? T : never : never;
+declare type RecursiveObjectAssign<T, S extends any[]> = {
+    0: T & Head<S>;
+    1: RecursiveObjectAssign<T & Head<S>, Tail<S>>;
+}[Tail<S> extends never ? 0 : 1];
+declare type ObjectAssign<T extends any[]> = RecursiveObjectAssign<Record<string, unknown>, T>;
+export declare function objectAssign<T extends any[]>(...sources: T): ObjectAssign<T>;
+export declare function objectKeys<V, K extends keyof V>(obj: V): K[];
+export interface ReadonlyArrayConstructor {
+    isArray(value: any): value is readonly any[];
+}
+export declare function extractNonNullKeys<V, K extends keyof V>(obj: {
+    [key in K]: V[key];
+}): { [key in K]: V[key] extends null ? never : key; }[K][];
+export {};
+//# sourceMappingURL=util.d.ts.map

package/dist/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../src/util.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,WAAW,IAAI,KAAK,CAAA;AACpC;;;;;;;;;;;;;;;;GAgBG;AAGH,wBAAgB,WAAW,CAAC,KAAK,EAAE,KAAK,GAAG,KAAK,CAAA;AAShD;;;;GAIG;AACH,eAAO,MAAM,SAAS,0CAA0D,CAAA;AAEhF,aAAK,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,EAAE,GAAG,GAAG,EAAE,CAAC,GAAG,CAAC,GAAG,KAAK,CAAA;AAExD,aAAK,IAAI,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,GAAG,EAAE,CAAC,GACzC,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,GAAG,CAAC,SAAS,CAAC,IAAI,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,MAAM,CAAC,KAAK,GAAG,GAChE,CAAC,GACD,KAAK,GACP,KAAK,CAAA;AAIT,aAAK,qBAAqB,CAAC,CAAC,EAAE,CAAC,SAAS,GAAG,EAAE,IAAI;IAC/C,CAAC,EAAE,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,CAAA;IACd,CAAC,EAAE,qBAAqB,CAAC,CAAC,GAAG,IAAI,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC,CAAC,CAAC,CAAA;CAC/C,CAAC,IAAI,CAAC,CAAC,CAAC,SAAS,KAAK,GAAG,CAAC,GAAG,CAAC,CAAC,CAAA;AAEhC,aAAK,YAAY,CAAC,CAAC,SAAS,GAAG,EAAE,IAAI,qBAAqB,CACxD,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACvB,CAAC,CACF,CAAA;AAED,wBAAgB,YAAY,CAAC,CAAC,SAAS,GAAG,EAAE,EAAE,GAAG,OAAO,EAAE,CAAC,mBAE1D;AAED,wBAAgB,UAAU,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,EAAE,GAAG,EAAE,CAAC,OAEtD;AAED,MAAM,WAAW,wBAAwB;IACvC,OAAO,CAAC,KAAK,EAAE,GAAG,GAAG,KAAK,IAAI,SAAS,GAAG,EAAE,CAAA;CAC7C;AAED,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,CAAC,SAAS,MAAM,CAAC,EAAE,GAAG,EAAE;KAC3D,GAAG,IAAI,CAAC,GAAG,CAAC,CAAC,GAAG,CAAC;CACnB,2DAIA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/styled",
-  "version": "1.0.0-alpha.1",
+  "version": "1.0.0",
   "license": "Apache-2.0",
   "type": "module",
   "source": "./src/index.ts",
@@ -13,11 +13,9 @@
   "types": "./dist/index.d.ts",
   "sideEffects": false,
   "scripts": {
-    "build": "microbundle -f modern,esm,cjs --tsconfig tsconfig.build.json && yarn serialize",
-    "typecheck": "tsc --noEmit --project tsconfig.build.json && yarn typecheck:cli",
-    "typecheck:cli": "tsc --noEmit --project cli/tsconfig.build.json",
-    "clean": "rimraf dist",
-    "serialize": "node cli/index.js"
+    "build": "microbundle -f modern,esm,cjs --tsconfig tsconfig.build.json",
+    "typecheck": "tsc --noEmit --project tsconfig.build.json",
+    "clean": "rimraf dist"
   },
   "devDependencies": {
     "@types/react": "^17.0.38",
@@ -25,17 +23,15 @@
     "@types/warning": "^3.0.0",
     "microbundle": "^0.14.2",
     "npm-run-all": "^4.1.5",
-    "polished": "^4.1.4",
     "react": "^17.0.2",
     "rimraf": "^3.0.2",
     "styled-components": "^5.3.3",
     "typescript": "^4.5.5"
   },
   "dependencies": {
-    "@charcoal-ui/foundation": "^1.0.0-alpha.1",
-    "@charcoal-ui/pixiv-theme": "^1.0.0-alpha.1",
-    "@charcoal-ui/theme": "^1.0.0-alpha.1",
-    "@charcoal-ui/utils": "^1.0.0-alpha.1",
+    "@charcoal-ui/foundation": "^1.0.0",
+    "@charcoal-ui/theme": "^1.0.0",
+    "@charcoal-ui/utils": "^1.0.0",
     "warning": "^4.0.3"
   },
   "peerDependencies": {
@@ -44,11 +40,10 @@
   },
   "files": [
     "src",
-    "dist",
-    "theme.json"
+    "dist"
   ],
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "1d09e09a796f92782be600672efb5c80a6a7b51b"
+  "gitHead": "addc6d8f443865a8b56327ef9a4ff2e69942a30b"
 }

package/src/index.story.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 import styled, { CSSProp, DefaultTheme, ThemeProvider } from 'styled-components'
-import { ElementsTheme } from './theme'
+import { CharcoalTheme } from '@charcoal-ui/theme'
+import { Material } from '@charcoal-ui/foundation'
 import createTheme, { ThemeProp } from '.'
-import { GradientMaterial } from '@charcoal-ui/theme'
 import { disabledSelector } from '@charcoal-ui/utils'
 
 export default {
@@ -15,21 +15,18 @@ declare module 'react' {
   }
 }
 
-type MyTheme = ElementsTheme & {
-  gradientColor: {
-    callToAction: GradientMaterial
+type MyTheme = CharcoalTheme & {
+  color: {
+    mycolor: Material
   }
 }
 
-function myTheme(theme: ElementsTheme): MyTheme {
+function myTheme(theme: CharcoalTheme): MyTheme {
   return {
     ...theme,
-    gradientColor: {
-      callToAction: [
-        { color: '#d1ff1a', ratio: 0 },
-        { color: '#1ad1ff', ratio: 100 },
-      ],
-      ...theme.gradientColor,
+    color: {
+      ...theme.color,
+      mycolor: '#ff9e8c',
     },
   }
 }
@@ -95,7 +92,7 @@ export const TailwindLike = () => (
   >
     <div
       css={theme((o) => [
-        o.bg.premium.hover.press,
+        o.bg.mycolor.hover.press,
         o.font.text5.hover.press,
         o.typography(14).bold,
         o.padding.all(16),

package/src/index.ts

@@ -6,7 +6,11 @@ import {
   constFactory,
   modifiedArgumentedFactory,
 } from './lib'
-import { EffectType, StyledTheme as Theme, Key } from './types'
+import {
+  EffectType,
+  CharcoalAbstractTheme as Theme,
+  Key,
+} from '@charcoal-ui/theme'
 import {
   objectAssign,
   unreachable,
@@ -14,8 +18,9 @@ import {
   objectKeys,
   isPresent,
 } from './util'
-import { columnPx, halfLeading } from '@charcoal-ui/foundation'
+import { columnSystem } from '@charcoal-ui/foundation'
 import {
+  halfLeading,
   applyEffect,
   applyEffectToGradient,
   dur,
@@ -27,9 +32,6 @@ import {
 } from '@charcoal-ui/utils'
 export { type Modified, type ModifiedArgumented } from './lib'
 
-import { light, dark } from './theme'
-export { type ElementsTheme } from './theme'
-
 const colorProperties = ['bg', 'font'] as const
 type ColorProperty = typeof colorProperties[number]
 
@@ -542,10 +544,12 @@ const createFixedRelativeCss =
     }))
 
 const createFixedColumnCss =
-  <T extends Theme>(_theme: T) =>
+  <T extends Theme>(theme: T) =>
   (property: FixedProperty, span: number): Internal =>
     internal(() => ({
-      [property]: px(columnPx(span)),
+      [property]: px(
+        columnSystem(span, theme.grid.unit.column, theme.grid.unit.gutter)
+      ),
     }))
 
 const createElementEffectCss =
@@ -712,9 +716,6 @@ function createTheme<T extends Theme>(_styled?: ThemedStyledInterface<T>) {
     }
 }
 
-// default export を疑似esmにしないようにする hack
-createTheme.light = light
-createTheme.dark = dark
 export default createTheme
 
 export type ThemeProp<T> = ({ theme }: { theme: T }) => CSSObject | CSSObject[]

package/src/lib.ts

@@ -1,4 +1,4 @@
-import { Key } from './types'
+import { Key } from '@charcoal-ui/theme'
 import { unreachable } from './util'
 
 /**

package/src/theme.ts

@@ -1,107 +0,0 @@
-import { StyledTheme } from './types'
-import {
-  BorderRadius,
-  Spacing,
-  Typography,
-  borderRadius,
-  spacing,
-  typography,
-  Breakpoint,
-  breakpoint,
-} from '@charcoal-ui/foundation'
-import { light as l, dark as d } from '@charcoal-ui/pixiv-theme'
-import { Effect, Material, OpacityEffect, Theme } from '@charcoal-ui/theme'
-import { applyEffect } from '@charcoal-ui/utils'
-
-export interface ElementsTheme extends StyledTheme {
-  color: Theme['color']
-  gradientColor: Theme['gradientColor']
-  effect: {
-    hover: Effect
-    press: Effect
-  }
-  elementEffect: {
-    disabled: OpacityEffect
-  }
-  spacing: Spacing
-  typography: {
-    size: Typography
-  }
-  borderRadius: BorderRadius
-  border: {
-    default: {
-      color: Material
-    }
-  }
-  outline: {
-    default: {
-      color: string
-      weight: 4
-    }
-    assertive: {
-      color: string
-      weight: 4
-    }
-  }
-  breakpoint: Breakpoint
-}
-
-const outlineEffect = {
-  type: 'opacity',
-  opacity: 0.32,
-} as const
-
-const common = {
-  borderRadius,
-  spacing,
-  typography: {
-    size: typography,
-  },
-  breakpoint,
-}
-
-export const light: ElementsTheme = {
-  color: l.color,
-  gradientColor: l.gradientColor,
-  effect: l.effect,
-  elementEffect: l.elementEffect,
-  border: {
-    default: {
-      color: l.color.border,
-    },
-  },
-  outline: {
-    default: {
-      color: applyEffect(l.color.brand, outlineEffect),
-      weight: 4,
-    },
-    assertive: {
-      color: applyEffect(l.color.assertive, outlineEffect),
-      weight: 4,
-    },
-  },
-  ...common,
-}
-
-export const dark: ElementsTheme = {
-  color: d.color,
-  gradientColor: d.gradientColor,
-  effect: d.effect,
-  elementEffect: d.elementEffect,
-  border: {
-    default: {
-      color: d.color.border,
-    },
-  },
-  outline: {
-    default: {
-      color: applyEffect(d.color.brand, outlineEffect),
-      weight: 4,
-    },
-    assertive: {
-      color: applyEffect(d.color.assertive, outlineEffect),
-      weight: 4,
-    },
-  },
-  ...common,
-}

package/src/types.ts

@@ -1,43 +0,0 @@
-import { TypographyDescriptor } from '@charcoal-ui/foundation'
-import {
-  Effect,
-  GradientMaterial,
-  Material,
-  OpacityEffect,
-} from '@charcoal-ui/theme'
-
-export type EffectType = 'hover' | 'press' | 'disabled'
-
-export type Key = string | number | symbol
-
-export type ColorStyleTheme = {
-  [key in Key]: Material
-}
-
-export interface StyledTheme {
-  color: ColorStyleTheme
-  gradientColor: { [key in Key]: GradientMaterial }
-  effect: { [key in EffectType]?: Effect }
-  elementEffect: { [key in EffectType]?: OpacityEffect }
-  spacing: { [key in Key]: number }
-  typography: {
-    size: { [key in Key]: TypographyDescriptor }
-    // TODO
-    // weight: { [key in Key]: string }
-    // variant: { [key in Key]: string }
-  }
-  borderRadius: { [key in Key]: number }
-  border: {
-    [key in Key]: {
-      color: Material
-      // TODO
-      // thickness: number
-    }
-  }
-  outline: {
-    [key in Key]: {
-      color: Material
-      weight: number
-    }
-  }
-}