@charcoal-ui/styled 3.9.1 → 3.10.0

package/dist/index.d.ts

@@ -8,6 +8,13 @@ export { defineThemeVariables } from './util';
 export * from './SetThemeScript';
 type Blank = null | undefined | false;
 /**
+ * @deprecated
+ * 実行時のパフォーマンスが低い問題があります。
+ * ref. https://github.com/pixiv/charcoal/pull/377
+ *
+ * styled-components の theming 方法を推奨します。
+ * ref. https://styled-components.com/docs/advanced#theming
+ *
  * `theme(o => [...])` の `theme` ユーティリティを構築する
  *
  * @param _styled - DEPRECATED: styled-components の `styled` そのものを渡すとそれを元に型推論ができる。が、型引数を渡す方が型推論が高速になりやすい
@@ -126,5 +133,9 @@ export declare function createTheme<T extends CharcoalAbstractTheme>(_styled?: T
 export type ThemeProp<T> = ({ theme, }: {
     theme: T | undefined;
 }) => CSSObject | CSSObject[];
-export * from './styles/focusVisibleFocusRingCss';
+export { focusVisibleFocusRingCss } from './styles/focusVisibleFocusRingCss';
+export { disabledCss } from './styles/disabledCss';
+export { assertiveRingCss } from './styles/assertiveRingCss';
+export type { CharcoalThemeUtils } from './utils/CharcoalStyledTheme';
+export { addThemeUtils } from './utils/addThemeUtils';
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AACpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAyC,MAAM,QAAQ,CAAA;AAC7E,OAAO,EAAE,QAAQ,EAAgB,MAAM,aAAa,CAAA;AAGpD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EACL,YAAY,EACZ,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,eAAe,EACf,QAAQ,GACT,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAAA;AAC7C,cAAc,kBAAkB,CAAA;AAEhC,KAAK,KAAK,GAAG,IAAI,GAAG,SAAS,GAAG,KAAK,CAAA;AAKrC;;;;;;;;;;;;;GAaG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,qBAAqB,EACzD,OAAO,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAMR,cAAc,QAAQ,GAAG,KAAK,CAAC,KACtD,UAAU,CAAC,CAAC,CAgChB;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI,CAAC,EAC1B,KAAK,GACN,EAAE;IACD,KAAK,EAAE,CAAC,GAAG,SAAS,CAAA;CACrB,KAAK,SAAS,GAAG,SAAS,EAAE,CAAA;AAE7B,cAAc,mCAAmC,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAA;AACpE,OAAO,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAA;AAC1D,OAAO,EAAE,aAAa,EAAyC,MAAM,QAAQ,CAAA;AAC7E,OAAO,EAAE,QAAQ,EAAgB,MAAM,aAAa,CAAA;AAGpD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA;AAC1D,OAAO,EACL,YAAY,EACZ,WAAW,EACX,aAAa,EACb,kBAAkB,EAClB,QAAQ,EACR,cAAc,EACd,eAAe,EACf,QAAQ,GACT,MAAM,UAAU,CAAA;AACjB,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAAA;AAC7C,cAAc,kBAAkB,CAAA;AAEhC,KAAK,KAAK,GAAG,IAAI,GAAG,SAAS,GAAG,KAAK,CAAA;AAKrC;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,WAAW,CAAC,CAAC,SAAS,qBAAqB,EACzD,OAAO,CAAC,EAAE,qBAAqB,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OAMR,cAAc,QAAQ,GAAG,KAAK,CAAC,KACtD,UAAU,CAAC,CAAC,CAgChB;AAED,MAAM,MAAM,SAAS,CAAC,CAAC,IAAI,CAAC,EAC1B,KAAK,GACN,EAAE;IACD,KAAK,EAAE,CAAC,GAAG,SAAS,CAAA;CACrB,KAAK,SAAS,GAAG,SAAS,EAAE,CAAA;AAE7B,OAAO,EAAE,wBAAwB,EAAE,MAAM,mCAAmC,CAAA;AAC5E,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAClD,OAAO,EAAE,gBAAgB,EAAE,MAAM,2BAA2B,CAAA;AAC5D,YAAY,EAAE,kBAAkB,EAAE,MAAM,6BAA6B,CAAA;AACrE,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA"}

package/dist/index.esm.js

@@ -48,8 +48,8 @@ function isSupportedEffect(effect) {
   return ["hover", "press", "disabled"].includes(effect);
 }
 var variable = (value) => `var(${value})`;
-function onEffectPseudo(effect, css3) {
-  return effect === "hover" ? { "&:hover": { [notDisabledSelector]: css3 } } : effect === "press" ? { "&:active": { [notDisabledSelector]: css3 } } : effect === "disabled" ? { [disabledSelector]: css3 } : unreachable(effect);
+function onEffectPseudo(effect, css9) {
+  return effect === "hover" ? { "&:hover": { [notDisabledSelector]: css9 } } : effect === "press" ? { "&:active": { [notDisabledSelector]: css9 } } : effect === "disabled" ? { [disabledSelector]: css9 } : unreachable(effect);
 }
 function withPrefixes(...parts) {
   return parts.join("-");
@@ -416,18 +416,18 @@ var createOutlineColorCss = (theme) => (variant, modifiers) => {
     }
   });
 };
-var onFocus = (css3) => ({
+var onFocus = (css9) => ({
   [notDisabledSelector2]: {
     "&:focus, &:active": {
       outline: "none",
-      ...css3
+      ...css9
     },
     "&:focus:not(:focus-visible), &:active:not(:focus-visible)": {
       outline: "none"
     },
     "&:focus-visible": {
       outline: "none",
-      ...css3
+      ...css9
     }
   }
 });
@@ -581,7 +581,7 @@ var createTypographyCss = (theme) => (size2, options = {}) => {
     bold = false
   } = options;
   const descriptor = theme.typography.size[size2];
-  const margin = -halfLeading(descriptor);
+  const margin2 = -halfLeading(descriptor);
   function toCSS(context) {
     return {
       fontSize: px5(descriptor.fontSize),
@@ -596,11 +596,11 @@ var createTypographyCss = (theme) => (size2, options = {}) => {
         display: "flow-root",
         "&::before": {
           ...leadingCancel,
-          marginTop: px5(margin)
+          marginTop: px5(margin2)
         },
         "&::after": {
           ...leadingCancel,
-          marginBottom: px5(margin)
+          marginBottom: px5(margin2)
         }
       }
     };
@@ -608,7 +608,7 @@ var createTypographyCss = (theme) => (size2, options = {}) => {
   return createInternal({
     toCSS,
     context: !preserveHalfLeading ? {
-      cancelHalfLeadingPx: margin
+      cancelHalfLeadingPx: margin2
     } : {}
   });
 };
@@ -697,8 +697,8 @@ var defineColorVariableCSS = (theme) => {
   const colors2 = defineThemeVariables({ ...theme.color, ...borders })({ theme });
   return toCSSVariables(colors2);
 };
-function toCSSVariables(css3) {
-  return Object.entries(css3).map(([varName, value]) => variableDefinition(varName, value.toString())).join(";");
+function toCSSVariables(css9) {
+  return Object.entries(css9).map(([varName, value]) => variableDefinition(varName, value.toString())).join(";");
 }
 var variableDefinition = (prop, value) => `${prop}: ${value}`;
 
@@ -875,6 +875,166 @@ var focusVisibleFocusRingCss = css2`
   }
 `;
 
+// src/styles/disabledCss.ts
+import { css as css3 } from "styled-components";
+var disabledCss = css3`
+  :disabled,
+  [aria-disabled]:not([aria-disabled='false']) {
+    opacity: 0.32;
+    cursor: default;
+  }
+`;
+
+// src/styles/assertiveRingCss.ts
+import { css as css4 } from "styled-components";
+var assertiveRingCss = css4`
+  box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+`;
+
+// src/utils/margin.ts
+import { css as css5 } from "styled-components";
+
+// src/utils/helpers/pxIfNum.ts
+function pxIfNum(v) {
+  if (v === void 0)
+    return "";
+  if (typeof v === "number")
+    return `${v}px`;
+  return v;
+}
+
+// src/utils/margin.ts
+function margin(arg1, arg2, arg3, arg4) {
+  return css5`
+    margin: ${pxIfNum(arg1)} ${pxIfNum(arg2)} ${pxIfNum(arg3)} ${pxIfNum(arg4)};
+  `;
+}
+function marginTop(v) {
+  return css5`
+    margin-top: ${pxIfNum(v)};
+  `;
+}
+function marginBottom(v) {
+  return css5`
+    margin-bottom: ${pxIfNum(v)};
+  `;
+}
+function marginLeft(v) {
+  return css5`
+    margin-left: ${pxIfNum(v)};
+  `;
+}
+function marginRight(v) {
+  return css5`
+    margin-right: ${pxIfNum(v)};
+  `;
+}
+
+// src/utils/padding.ts
+import { css as css6 } from "styled-components";
+function padding(arg1, arg2, arg3, arg4) {
+  return css6`
+    padding: ${arg1}px ${pxIfNum(arg2)} ${pxIfNum(arg3)} ${pxIfNum(arg4)};
+  `;
+}
+function paddingTop(v) {
+  return css6`
+    padding-top: ${v}px;
+  `;
+}
+function paddingBottom(v) {
+  return css6`
+    padding-bottom: ${v}px;
+  `;
+}
+function paddingLeft(v) {
+  return css6`
+    padding-left: ${v}px;
+  `;
+}
+function paddingRight(v) {
+  return css6`
+    padding-right: ${v}px;
+  `;
+}
+
+// src/utils/gap.ts
+import { css as css7 } from "styled-components";
+function gap(v1, v2) {
+  return css7`
+    gap: ${v1}px ${pxIfNum(v2)};
+  `;
+}
+function rowGap(v) {
+  return css7`
+    row-gap: ${v}px;
+  `;
+}
+function columnGap(v) {
+  return css7`
+    column-gap: ${v}px;
+  `;
+}
+
+// src/utils/typographyCss.ts
+import { css as css8 } from "styled-components";
+var boldCss = css8`
+  font-weight: bold;
+`;
+var removeHalfLeadingCss = css8`
+  &::before {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-top: -4px;
+  }
+
+  &::after {
+    display: block;
+    width: 0;
+    height: 0;
+    content: '';
+    margin-bottom: -4px;
+  }
+`;
+function typography2(size2, bold = false, preserveHalfLeading = false) {
+  const cssObj = css8`
+    font-size: ${size2}px;
+    line-height: ${size2 + 8}px;
+    display: flow-root;
+    ${bold === true && boldCss}
+    ${preserveHalfLeading !== true && removeHalfLeadingCss}
+  `;
+  return cssObj;
+}
+
+// src/utils/addThemeUtils.ts
+function addThemeUtils(theme) {
+  return {
+    ...theme,
+    utils: {
+      margin,
+      marginTop,
+      marginLeft,
+      marginBottom,
+      marginRight,
+      padding,
+      paddingTop,
+      paddingLeft,
+      paddingBottom,
+      paddingRight,
+      gap,
+      rowGap,
+      columnGap,
+      typography: typography2,
+      focusVisibleFocusRingCss,
+      assertiveRingCss,
+      disabledCss
+    }
+  };
+}
+
 // src/index.ts
 var nonBlank = (value) => isPresent(value) && value !== false;
 function createTheme(_styled) {
@@ -896,8 +1056,11 @@ function createTheme(_styled) {
 export {
   SetThemeScript,
   TokenInjector,
+  addThemeUtils,
+  assertiveRingCss,
   createTheme,
   defineThemeVariables,
+  disabledCss,
   focusVisibleFocusRingCss,
   getThemeSync,
   makeSetThemeScriptCode,