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

package/src/default.ts

@@ -0,0 +1,159 @@
+import { rgba } from 'polished'
+import { CharcoalTheme } from './theme'
+import {
+  BORDER_RADIUS,
+  BREAKPOINT,
+  COLUMN_UNIT,
+  GUTTER_UNIT,
+  SPACING,
+  TYPOGRAPHY_SIZE,
+} from '@charcoal-ui/foundation'
+import { applyEffect } from '@charcoal-ui/utils'
+
+const outlineEffect = {
+  type: 'opacity',
+  opacity: 0.32,
+} as const
+
+const assertive = '#ff2b00'
+const brand = '#0096fa'
+
+const common = {
+  typography: {
+    size: TYPOGRAPHY_SIZE,
+  },
+  spacing: SPACING,
+  grid: {
+    unit: {
+      column: COLUMN_UNIT,
+      gutter: GUTTER_UNIT,
+    },
+  },
+  borderRadius: BORDER_RADIUS,
+  transition: {
+    default: {
+      duration: 0.2,
+    },
+  },
+  breakpoint: {
+    screen1: BREAKPOINT[6],
+    screen2: BREAKPOINT[8],
+    screen3: BREAKPOINT[10],
+    screen4: BREAKPOINT[12],
+  },
+  gradientColor: {
+    surface5: [
+      { color: rgba('#000000', 0.32), ratio: 0 },
+      { color: rgba('#000000', 0), ratio: 100 },
+    ],
+    callToAction: [
+      { color: '#d1ff1a', ratio: 0 },
+      { color: '#1ad1ff', ratio: 100 },
+    ],
+  },
+  outline: {
+    default: {
+      color: applyEffect(brand, outlineEffect),
+      weight: 4,
+    },
+    assertive: {
+      color: applyEffect(assertive, outlineEffect),
+      weight: 4,
+    },
+  },
+  elementEffect: {
+    disabled: {
+      type: 'opacity',
+      opacity: 0.32,
+    },
+  },
+} as const
+
+export const light: CharcoalTheme = {
+  ...common,
+  effect: {
+    hover: {
+      type: 'alpha',
+      color: '#000000',
+      opacity: 0.08,
+    },
+    press: {
+      type: 'alpha',
+      color: '#000000',
+      opacity: 0.16,
+    },
+  },
+  color: {
+    // TODO: colors should be picked from foundation color palette
+    transparent: rgba('#000000', 0),
+    background1: '#ffffff',
+    background2: '#f5f5f5',
+    icon6: rgba('#ffffff', 0.28),
+    link1: '#3d7699',
+    link2: rgba('#ffffff', 0.36),
+    surface1: '#ffffff',
+    surface2: rgba('#000000', 0.02),
+    surface3: rgba('#000000', 0.04),
+    surface4: rgba('#000000', 0.32),
+    surface6: rgba('#000000', 0.88),
+    surface7: rgba('#000000', 0.02),
+    surface8: rgba('#000000', 0.88),
+    surface9: rgba('#ffffff', 0.84),
+    text1: rgba('#000000', 0.88),
+    text2: rgba('#000000', 0.64),
+    text3: rgba('#000000', 0.32),
+    text4: rgba('#000000', 0.16),
+    text5: '#ffffff',
+    brand,
+    assertive,
+  },
+  border: {
+    default: {
+      color: rgba('#000000', 0.08),
+    },
+  },
+}
+
+export const dark: CharcoalTheme = {
+  ...common,
+  effect: {
+    hover: {
+      type: 'alpha',
+      color: '#000000',
+      opacity: 0.08,
+    },
+    press: {
+      type: 'alpha',
+      color: '#000000',
+      opacity: 0.16,
+    },
+  },
+  color: {
+    transparent: rgba('#000000', 0),
+    background1: '#1f1f1f',
+    background2: '#000000',
+    icon6: light.color.icon6,
+    link1: light.color.link1,
+    link2: light.color.link2,
+    surface1: '#1f1f1f',
+    surface2: rgba('#000000', 0.16),
+    surface3: rgba('#ffffff', 0.12),
+    surface4: light.color.surface4,
+    surface6: rgba('#ffffff', 0.12),
+    surface7: light.color.surface7,
+    surface8: light.color.surface8,
+    surface9: light.color.surface9,
+    text1: '#ffffff',
+    text2: rgba('#ffffff', 0.68),
+    text3: rgba('#ffffff', 0.36),
+    text4: rgba('#ffffff', 0.28),
+    text5: light.color.text5,
+    brand,
+    assertive,
+  },
+  border: {
+    default: {
+      color: rgba('#ffffff', 0.12),
+    },
+  },
+}

package/src/index.ts

@@ -1,155 +1,3 @@
-import { Effect, Effects, OpacityEffect } from './effect'
-
-export default {}
-
-export * from './effect'
-
-export type Material = string
-export type GradientMaterial = { color: Material; ratio: number }[]
-
-/**
- * @deprecated
- */
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-type ThemeMaterials = {
-  background1: Material
-  background2: Material
-  surface1: Material
-  surface2: Material
-  /**
-   * Black Fade 20にするとボーダーと共通化できる
-   */
-  surface3: Material
-  surface4: Material
-  // NOTE: the current definition of surface5 is invalid
-  surface6: Material
-  /**
-   * サムネイルに被せる色。
-   * Lightモードの色が2と共通。コントラストの低下を狙うなら2でいいが、サムネイルで色味を調整しすぎる感がある。
-   */
-  surface7: Material
-  /**
-   * 磨りガラス効果を使えれば6と統合できそう
-   */
-  surface8: Material
-  surface9: Material
-  link1: Material
-  link2: Material
-  text1: Material
-  /**
-   * 1と2は統合できるかもしれない
-   */
-  text2: Material
-  text3: Material
-  /**
-   * Surface 4に重ねた時に薄すぎる感あり
-   */
-  text4: Material
-  text5: Material
-  icon6: Material
-  border: Material
-}
-
-/**
- * @deprecated
- */
-export interface ThemeEffects {
-  hover: Effects
-  press: Effects
-  disabled: Effects
-}
-
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-export type ThemeEffect = {
-  hover: Effect
-  press: Effect
-}
-
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-export type ThemeElementEffect = {
-  disabled: OpacityEffect
-}
-
-/**
- * @deprecated
- */
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-type ThemeSemantic = {
-  brand: Material
-}
-
-/**
- * @deprecated Use `ThemeColor` instead
- */
-export type ThemeColors = ThemeMaterials &
-  ThemeSemantic & {
-    premium: Material
-  }
-
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-export type ThemeColor = {
-  transparent: Material
-  background1: Material
-  background2: Material
-  surface1: Material
-  surface2: Material
-  surface3: Material
-  surface4: Material
-  surface6: Material
-  surface7: Material
-  surface8: Material
-  surface9: Material
-  link1: Material
-  link2: Material
-  text1: Material
-  text2: Material
-  text3: Material
-  text4: Material
-  text5: Material
-  icon6: Material
-  border: Material
-  brand: Material
-  assertive: Material
-  /**
-   * @deprecated
-   */
-  premium: Material
-}
-
-// eslint-disable-next-line @typescript-eslint/consistent-type-definitions
-export type ThemeColorGradient = {
-  surface4Gradient: GradientMaterial
-}
-
-export interface Theme {
-  /**
-   * @deprecated
-   *
-   * Use `color` instead.
-   */
-  materials: ThemeMaterials
-  /**
-   * @deprecated
-   *
-   * Use `color` instead.
-   */
-  semantic: ThemeSemantic
-  /**
-   * @deprecated Use `color` instead
-   */
-  colors: ThemeColors
-  color: ThemeColor
-  gradientColor: ThemeColorGradient
-  /**
-   * @deprecated Use `effect` instead
-   */
-  effects: ThemeEffects
-  /**
-   * effect for color (background or font color)
-   */
-  effect: ThemeEffect
-  /**
-   * effect for element its own (opacify element includes descendants)
-   */
-  elementEffect: ThemeElementEffect
-}
+export * from './theme'
+export * from './abstract-theme'
+export * from './default'

package/src/theme.ts

@@ -0,0 +1,100 @@
+import {
+  type GradientMaterial,
+  type Material,
+  type TypographyDescriptor,
+  type Effect,
+  type OpacityEffect,
+  SPACING,
+  BORDER_RADIUS,
+} from '@charcoal-ui/foundation'
+import { CharcoalAbstractTheme } from './abstract-theme'
+
+export interface CharcoalTheme extends CharcoalAbstractTheme {
+  readonly color: ThemeColor
+  readonly gradientColor: ThemeColorGradient
+  /**
+   * effect for color (background or font color)
+   */
+  readonly effect: ThemeEffect
+  /**
+   * effect for element its own (opacify element includes descendants)
+   */
+  readonly elementEffect: ThemeElementEffect
+  readonly spacing: Spacing
+  readonly typography: {
+    readonly size: Typography
+  }
+  readonly borderRadius: BorderRadius
+  readonly border: {
+    readonly default: {
+      readonly color: Material
+    }
+  }
+  readonly outline: {
+    readonly default: {
+      readonly color: string
+      readonly weight: 4
+    }
+    readonly assertive: {
+      readonly color: string
+      readonly weight: 4
+    }
+  }
+  readonly breakpoint: Breakpoint
+}
+
+export type ThemeColor = {
+  readonly transparent: Material
+  readonly background1: Material
+  readonly background2: Material
+  readonly surface1: Material
+  readonly surface2: Material
+  readonly surface3: Material
+  readonly surface4: Material
+  readonly surface6: Material
+  readonly surface7: Material
+  readonly surface8: Material
+  readonly surface9: Material
+  readonly link1: Material
+  readonly link2: Material
+  readonly text1: Material
+  readonly text2: Material
+  readonly text3: Material
+  readonly text4: Material
+  readonly text5: Material
+  readonly icon6: Material
+  readonly brand: Material
+  readonly assertive: Material
+}
+
+export type ThemeEffect = {
+  readonly hover: Effect
+  readonly press: Effect
+}
+
+export type ThemeElementEffect = {
+  readonly disabled: OpacityEffect
+}
+
+export type ThemeColorGradient = {
+  readonly surface5: GradientMaterial
+  readonly callToAction: GradientMaterial
+}
+
+export type Typography = {
+  readonly [12]: TypographyDescriptor
+  readonly [14]: TypographyDescriptor
+  readonly [16]: TypographyDescriptor
+  readonly [20]: TypographyDescriptor
+  readonly [32]: TypographyDescriptor
+}
+
+export type Breakpoint = {
+  readonly screen1: number
+  readonly screen2: number
+  readonly screen3: number
+  readonly screen4: number
+}
+
+export type Spacing = Readonly<Record<keyof typeof SPACING, number>>
+export type BorderRadius = Readonly<Record<keyof typeof BORDER_RADIUS, number>>