@brilo/base-blocks 0.1.42 → 0.1.44

package/src/blocks/compare/compare-group/constants.ts

@@ -1 +1,28 @@
+import {__} from '@wordpress/i18n'
+
 export const HEADING_LEVELS = [2, 3, 4] as const
+
+export const RATIOS = ['4:3', '3:2', '16:9', '1:1', '2:1', '3:4'] as const
+
+export const DEFAULT_IMAGE_CLIP_PATHS = [
+  {value: 'none', label: __('Žádný', 'brilo-blocks')},
+  {value: 'circle', label: __('Kruh', 'brilo-blocks')},
+  {value: 'triangle', label: __('Trojúhelník', 'brilo-blocks')},
+  {value: 'rhombus', label: __('Kosočtverec', 'brilo-blocks')},
+  {value: 'octagon', label: __('Osmiúhelník', 'brilo-blocks')},
+  {value: 'bevel', label: __('Zkosený', 'brilo-blocks')},
+  {value: 'rabbet', label: __('Drážkovaný', 'brilo-blocks')},
+  {value: 'parallelogram', label: __('Rovnoběžník', 'brilo-blocks')},
+] as const
+
+// Frontend reads the shapes from the theme's --shape-* tokens; the editor has no
+// access to them, so the same geometry is inlined here for the preview CSS var.
+export const IMAGE_CLIP_PATH_VALUES: Record<string, string> = {
+  circle: 'circle(50% at 50% 50%)',
+  triangle: 'polygon(50% 0%, 0% 100%, 100% 100%)',
+  rhombus: 'polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)',
+  octagon: 'polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%)',
+  bevel: 'polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%)',
+  rabbet: 'polygon(0% 15%, 15% 15%, 15% 0%, 85% 0%, 85% 15%, 100% 15%, 100% 85%, 85% 85%, 85% 100%, 15% 100%, 15% 85%, 0% 85%)',
+  parallelogram: 'polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%)',
+}

package/src/blocks/compare/compare-group/edit.tsx

@@ -1,13 +1,14 @@
 import {InspectorControls} from '@wordpress/block-editor'
 import {
   PanelBody,
+  SelectControl,
   __experimentalToggleGroupControl as ToggleGroupControl,
   __experimentalToggleGroupControlOption as ToggleGroupControlOption,
 } from '@wordpress/components'
 import {__} from '@wordpress/i18n'
 import {useGroupBlock} from '~/hooks/useGroupBlock'
-import {HEADING_LEVELS} from './constants'
-import type {CompareGroupAttributes, CompareGroupOptions} from './types'
+import {DEFAULT_IMAGE_CLIP_PATHS, HEADING_LEVELS, IMAGE_CLIP_PATH_VALUES, RATIOS} from './constants'
+import type {CompareGroupAttributes, CompareGroupOptions, CompareImageClipPath} from './types'
 
 export function createCompareGroupEdit(options: CompareGroupOptions) {
   return function Edit({
@@ -17,10 +18,16 @@ export function createCompareGroupEdit(options: CompareGroupOptions) {
     attributes: CompareGroupAttributes
     setAttributes: (a: Partial<CompareGroupAttributes>) => void
   }) {
-    const {headingLevel} = attributes
+    const {headingLevel, ratio, img} = attributes
+    const clipPath = img?.clipPath ?? 'none'
+
     const {blockProps, innerBlocksProps} = useGroupBlock({
       blockClassName: options.blockClassName ?? 'g-compare wp-block-section',
-      containerClassName: [options.containerClassName ?? 'u-grid-responsive'],
+      containerClassName: [options.containerClassName ?? 'u-grid-responsive', `--ratio-${ratio.replace(':', '-')}`],
+      containerStyle: {
+        // Inherited by every compare item inside the container.
+        ...(IMAGE_CLIP_PATH_VALUES[clipPath] && {'--compare-image-clip-path': IMAGE_CLIP_PATH_VALUES[clipPath]}),
+      },
       allowedBlocks: options.allowedBlocks,
       orientation: 'horizontal',
       template: options.template,
@@ -41,6 +48,22 @@ export function createCompareGroupEdit(options: CompareGroupOptions) {
                 <ToggleGroupControlOption key={l} value={String(l)} label={`H${l}`} />
               ))}
             </ToggleGroupControl>
+            <ToggleGroupControl
+              isBlock
+              label={__('Poměr stran obrázku', 'brilo-blocks')}
+              value={ratio}
+              onChange={(v) => setAttributes({ratio: v as CompareGroupAttributes['ratio']})}
+            >
+              {RATIOS.map((r) => (
+                <ToggleGroupControlOption key={r} value={r} label={r} />
+              ))}
+            </ToggleGroupControl>
+            <SelectControl<string>
+              label={__('Tvar výřezu obrázku', 'brilo-blocks')}
+              value={clipPath}
+              options={[...DEFAULT_IMAGE_CLIP_PATHS]}
+              onChange={(v) => setAttributes({img: {...img, clipPath: v as CompareImageClipPath}})}
+            />
           </PanelBody>
         </InspectorControls>
         <div {...blockProps}>

package/src/blocks/compare/compare-group/factory.tsx

@@ -3,7 +3,7 @@ import type {BlockConfiguration} from '@wordpress/blocks'
 import {__} from '@wordpress/i18n'
 import {createCompareGroupEdit} from './edit'
 import {icon as defaultIcon} from './icon'
-import {HEADING_LEVELS} from './constants'
+import {DEFAULT_IMAGE_CLIP_PATHS, HEADING_LEVELS, RATIOS} from './constants'
 import type {CompareGroupAttributes, CompareGroupOptions} from './types'
 
 export type {CompareGroupAttributes, CompareGroupOptions}
@@ -22,6 +22,15 @@ export function createCompareGroupBlock(options: CompareGroupOptions): BlockConf
         type: 'number',
         default: HEADING_LEVELS[1],
       },
+      ratio: {
+        type: 'string',
+        default: RATIOS[0],
+        enum: [...RATIOS],
+      },
+      img: {
+        type: 'object',
+        default: {clipPath: DEFAULT_IMAGE_CLIP_PATHS[0].value},
+      },
     },
     edit: createCompareGroupEdit(options),
     save: () => <InnerBlocks.Content />,

package/src/blocks/compare/compare-group/index.ts

@@ -1,4 +1,10 @@
-export type {CompareGroupAttributes, CompareGroupOptions} from './types'
+export type {
+  CompareGroupAttributes,
+  CompareGroupOptions,
+  CompareHeadingLevel,
+  CompareImageClipPath,
+  CompareRatio,
+} from './types'
 export {createCompareGroupBlock} from './factory'
 import type {CompareGroupOptions} from './types'
 

package/src/blocks/compare/compare-group/types.ts

@@ -1,10 +1,14 @@
-import {HEADING_LEVELS} from './constants'
 import type {BriloBlockType} from '~/types'
+import type {DEFAULT_IMAGE_CLIP_PATHS, HEADING_LEVELS, RATIOS} from './constants'
 
 export type CompareHeadingLevel = (typeof HEADING_LEVELS)[number]
+export type CompareRatio = (typeof RATIOS)[number]
+export type CompareImageClipPath = (typeof DEFAULT_IMAGE_CLIP_PATHS)[number]['value']
 
 export interface CompareGroupAttributes extends Record<string, unknown> {
   headingLevel: CompareHeadingLevel
+  ratio: CompareRatio
+  img: {clipPath: CompareImageClipPath}
 }
 
 export interface CompareGroupOptions extends BriloBlockType {

package/src/blocks/compare/compare-item/edit.tsx

@@ -1,5 +1,7 @@
-import {RichText, useBlockProps, useInnerBlocksProps} from '@wordpress/block-editor'
+import {InspectorControls, RichText, useBlockProps, useInnerBlocksProps} from '@wordpress/block-editor'
+import {PanelBody} from '@wordpress/components'
 import {__} from '@wordpress/i18n'
+import {ImagePickerControl} from '~/components/ImagePicker'
 import type {CompareItemAttributes, CompareItemOptions} from './types'
 
 export function createCompareItemEdit(options: CompareItemOptions) {
@@ -10,7 +12,7 @@ export function createCompareItemEdit(options: CompareItemOptions) {
     attributes: CompareItemAttributes
     setAttributes: (a: Partial<CompareItemAttributes>) => void
   }) {
-    const {title} = attributes
+    const {title, img} = attributes
     const blockProps = useBlockProps({className: 'i-compare'})
     const innerBlocksProps = useInnerBlocksProps(
       {className: 'i-compare__options wp-block-inner-content'},
@@ -21,18 +23,35 @@ export function createCompareItemEdit(options: CompareItemOptions) {
     )
 
     return (
-      <div {...blockProps}>
-        <div className={'i-compare__inner'}>
-          <RichText
-            tagName={'div'}
-            className="i-compare__title u-text-editable"
-            value={title}
-            onChange={(v) => setAttributes({title: v})}
-            placeholder={__('Nadpis...', 'brilo-blocks')}
-          />
-          <div {...innerBlocksProps} />
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Obrázek', 'brilo-blocks')}>
+            <ImagePickerControl value={img} onChange={(val) => setAttributes({img: val})} />
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <div className={'i-compare__inner'}>
+            <div className="i-compare__image-wrapper">
+              {img.id ? (
+                <ImagePickerControl value={img} onChange={(val) => setAttributes({img: val})} size={[128, 128]} />
+              ) : (
+                <div className="i-compare__image-placeholder">
+                  <ImagePickerControl value={img} onChange={(val) => setAttributes({img: val})} />
+                </div>
+              )}
+            </div>
+            <RichText
+              tagName={'div'}
+              className="i-compare__title u-text-editable"
+              value={title}
+              onChange={(v) => setAttributes({title: v})}
+              placeholder={__('Nadpis...', 'brilo-blocks')}
+            />
+            <div {...innerBlocksProps} />
+          </div>
         </div>
-      </div>
+      </>
     )
   }
 }

package/src/blocks/compare/compare-item/editor.scss

@@ -12,4 +12,20 @@
   .i-compare {
     width: 100%;
   }
+
+  .i-compare__image-placeholder {
+    border: 1px dashed #0073aa;
+    padding: 16px 8px 8px;
+  }
+
+  .i-compare__image-wrapper {
+    .c-image-picker-control__row {
+      flex-direction: column;
+    }
+
+    // Set by the parent compare group on the inner blocks container.
+    .c-image-picker-control__thumb {
+      clip-path: var(--compare-image-clip-path, none);
+    }
+  }
 }

package/src/blocks/compare/compare-item/factory.tsx

@@ -21,6 +21,10 @@ export function createCompareItemBlock(options: CompareItemOptions): BlockConfig
         type: 'string',
         default: '',
       },
+      img: {
+        type: 'object',
+        default: {id: 0, alt: ''},
+      },
     },
     edit: createCompareItemEdit(options),
     save: () => <InnerBlocks.Content />,

package/src/blocks/compare/compare-item/types.ts

@@ -1,7 +1,9 @@
+import type {ImageValue} from '~/components/ImagePicker/ImagePicker'
 import type {BriloBlockType} from '~/types'
 
 export interface CompareItemAttributes extends Record<string, unknown> {
   title: string
+  img: ImageValue
 }
 
 export interface CompareItemOptions extends BriloBlockType {

package/src/blocks/compare/compare-option/types.ts

@@ -1,5 +1,5 @@
 import type {BriloBlockType} from '~/types'
-import {VARIANTS} from './constants'
+import type {VARIANTS} from './constants'
 
 export type CompareOptionVariant = (typeof VARIANTS)[number]['value']
 

package/src/blocks/core/basic-icon/buildPreviewStyle.ts

@@ -0,0 +1,40 @@
+import clsx from 'clsx'
+import type {BasicIconStyle} from './types'
+
+export interface BasicIconPreviewStyle {
+  rootClassName: string
+  iconClassName: string
+  cssVars: Record<string, string>
+}
+
+export function buildBasicIconPreviewStyle(
+  style: BasicIconStyle,
+  resolveHex: (value: string) => string = (value) => value,
+): BasicIconPreviewStyle {
+  const icon = style.icon ?? ({} as BasicIconStyle['icon'])
+
+  const rootClassName = clsx(
+    style.align && `--align-${style.align}`,
+    icon.background && icon.background !== 'none' && '--icon-background',
+    icon.color && icon.color !== 'none' && '--icon-color',
+    icon.borderColor && '--icon-bordered',
+  )
+
+  const iconClassName = clsx(
+    icon.backgroundShape && icon.backgroundShape !== 'none' && `--background-shape --background-shape-${icon.backgroundShape}`,
+  )
+
+  const cssVars: Record<string, string> = {}
+  if (icon.background && icon.background !== 'none') cssVars['--icon-background-color'] = resolveHex(icon.background)
+  if (icon.color && icon.color !== 'none') cssVars['--icon-color'] = resolveHex(icon.color)
+  if (icon.size) cssVars['--icon-size'] = `${icon.size}px`
+  if (icon.background && icon.background !== 'none' && icon.backgroundSize) {
+    cssVars['--icon-background-size'] = `${icon.backgroundSize}px`
+  }
+  if (icon.borderColor) {
+    cssVars['--icon-outline-color'] = resolveHex(icon.borderColor)
+    cssVars['--icon-outline-width'] = `${icon.borderWidth || 1}px`
+  }
+
+  return {rootClassName, iconClassName, cssVars}
+}

package/src/blocks/core/basic-icon/constants.ts

@@ -0,0 +1,48 @@
+import {__} from '@wordpress/i18n'
+
+export const ICON_TYPES = [
+  {value: 'preselected', label: __('Předvolená', 'brilo-blocks')},
+  {value: 'media', label: __('Obrázek', 'brilo-blocks')},
+  {value: 'number', label: __('Číslo', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_ALIGNMENTS = [
+  {value: 'left', label: __('Vlevo', 'brilo-blocks')},
+  {value: 'center', label: __('Na střed', 'brilo-blocks')},
+  {value: 'right', label: __('Vpravo', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_ICON_SIZE = 88
+export const ICON_SIZE_MIN = 4
+export const ICON_SIZE_MAX = 128
+
+export const DEFAULT_ICON_SIZE_PRESETS = [
+  {value: 8, label: __('XS', 'brilo-blocks')},
+  {value: 16, label: __('SM', 'brilo-blocks')},
+  {value: 24, label: __('MD', 'brilo-blocks')},
+  {value: 32, label: __('LG', 'brilo-blocks')},
+  {value: 48, label: __('XL', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_ICON_BACKGROUND_SIZE = 88
+export const ICON_BACKGROUND_SIZE_MIN = 16
+export const ICON_BACKGROUND_SIZE_MAX = 240
+
+export const DEFAULT_ICON_BACKGROUND_SIZE_PRESETS = [
+  {value: 48, label: __('XS', 'brilo-blocks')},
+  {value: 64, label: __('SM', 'brilo-blocks')},
+  {value: 88, label: __('Výchozí', 'brilo-blocks')},
+  {value: 104, label: __('LG', 'brilo-blocks')},
+  {value: 128, label: __('XL', 'brilo-blocks')},
+] as const
+
+export const DEFAULT_ICON_BACKGROUND_SHAPES = [
+  {value: 'none', label: __('Žádný', 'brilo-blocks')},
+  {value: 'circle', label: __('Kruh', 'brilo-blocks')},
+  {value: 'triangle', label: __('Trojúhelník', 'brilo-blocks')},
+  {value: 'rhombus', label: __('Kosočtverec', 'brilo-blocks')},
+  {value: 'octagon', label: __('Osmiúhelník', 'brilo-blocks')},
+  {value: 'bevel', label: __('Zkosený', 'brilo-blocks')},
+  {value: 'rabbet', label: __('Drážkovaný', 'brilo-blocks')},
+  {value: 'parallelogram', label: __('Rovnoběžník', 'brilo-blocks')},
+] as const

package/src/blocks/core/basic-icon/edit.tsx

@@ -0,0 +1,170 @@
+import {InspectorControls, useBlockProps} from '@wordpress/block-editor'
+import {
+  BaseControl,
+  Button,
+  ColorPalette,
+  PanelBody,
+  RangeControl,
+  SelectControl,
+  __experimentalToggleGroupControl as ToggleGroupControl,
+  __experimentalToggleGroupControlOption as ToggleGroupControlOption,
+} from '@wordpress/components'
+import {__} from '@wordpress/i18n'
+import clsx from 'clsx'
+import {ItemIconControl, ItemIconPreview} from '~/components/ItemIconControl'
+import {useTenantColorPalette} from '~/hooks/useTenantColorPalette'
+import {buildBasicIconPreviewStyle} from './buildPreviewStyle'
+import {
+  DEFAULT_ALIGNMENTS,
+  DEFAULT_ICON_BACKGROUND_SHAPES,
+  DEFAULT_ICON_BACKGROUND_SIZE_PRESETS,
+  DEFAULT_ICON_SIZE_PRESETS,
+  ICON_BACKGROUND_SIZE_MAX,
+  ICON_BACKGROUND_SIZE_MIN,
+  ICON_SIZE_MAX,
+  ICON_SIZE_MIN,
+  ICON_TYPES,
+} from './constants'
+import type {BasicIconAlignment, BasicIconAttributes, BasicIconBackgroundShape, BasicIconOptions, BasicIconSizePreset} from './types'
+
+function PresetSizeControl({
+  label,
+  value,
+  presets,
+  min,
+  max,
+  onChange,
+}: {
+  label: string
+  value: number
+  presets: readonly BasicIconSizePreset[]
+  min: number
+  max: number
+  onChange: (v: number) => void
+}) {
+  return (
+    <BaseControl label={label} id={`basic-icon-size-${label}`}>
+      <div style={{display: 'flex', gap: 4, marginBottom: 8, flexWrap: 'wrap'}}>
+        {presets.map((p) => (
+          <Button key={p.label} variant={value === p.value ? 'primary' : 'secondary'} size="small" onClick={() => onChange(p.value)}>
+            {p.label}
+          </Button>
+        ))}
+      </div>
+      <RangeControl value={value} onChange={(v) => onChange(v ?? min)} min={min} max={max} step={1} withInputField />
+    </BaseControl>
+  )
+}
+
+export function createBasicIconEdit(options: BasicIconOptions) {
+  return function Edit({
+    attributes,
+    setAttributes,
+  }: {
+    attributes: BasicIconAttributes
+    setAttributes: (a: Partial<BasicIconAttributes>) => void
+  }) {
+    const {icon, style} = attributes
+    const {paletteColors, resolveHex} = useTenantColorPalette()
+    const {rootClassName, iconClassName, cssVars} = buildBasicIconPreviewStyle(style, resolveHex)
+
+    const blockProps = useBlockProps({className: clsx('i-basic-icon', rootClassName)})
+
+    const setIcon = (patch: Partial<BasicIconAttributes['style']['icon']>) =>
+      setAttributes({style: {...style, icon: {...style.icon, ...patch}}})
+
+    return (
+      <>
+        <InspectorControls>
+          <PanelBody title={__('Ikona', 'brilo-blocks')}>
+            <ItemIconControl icon={icon} setAttributes={setAttributes} iconTypes={ICON_TYPES} options={options} />
+          </PanelBody>
+          <PanelBody title={__('Zarovnání', 'brilo-blocks')}>
+            <ToggleGroupControl
+              isBlock
+              label={__('Zarovnání', 'brilo-blocks')}
+              value={style.align}
+              onChange={(v) => setAttributes({style: {...style, align: v as BasicIconAlignment}})}
+            >
+              {DEFAULT_ALIGNMENTS.map((a) => (
+                <ToggleGroupControlOption key={a.value} value={a.value} label={a.label} />
+              ))}
+            </ToggleGroupControl>
+          </PanelBody>
+          <PanelBody title={__('Styl ikony', 'brilo-blocks')} initialOpen={false}>
+            <PresetSizeControl
+              label={__('Velikost', 'brilo-blocks')}
+              value={style.icon.size}
+              presets={DEFAULT_ICON_SIZE_PRESETS}
+              min={ICON_SIZE_MIN}
+              max={ICON_SIZE_MAX}
+              onChange={(v) => setIcon({size: v})}
+            />
+            <BaseControl label={__('Barva', 'brilo-blocks')} id="basic-icon-color">
+              <ColorPalette
+                colors={paletteColors}
+                value={style.icon.color || undefined}
+                onChange={(value) => setIcon({color: value ?? ''})}
+              />
+            </BaseControl>
+            <BaseControl label={__('Pozadí', 'brilo-blocks')} id="basic-icon-background-color">
+              <ColorPalette
+                colors={paletteColors}
+                value={style.icon.background || undefined}
+                onChange={(value) => setIcon({background: value ?? ''})}
+              />
+            </BaseControl>
+            <PresetSizeControl
+              label={__('Velikost pozadí', 'brilo-blocks')}
+              value={style.icon.backgroundSize}
+              presets={DEFAULT_ICON_BACKGROUND_SIZE_PRESETS}
+              min={ICON_BACKGROUND_SIZE_MIN}
+              max={ICON_BACKGROUND_SIZE_MAX}
+              onChange={(v) => setIcon({backgroundSize: v})}
+            />
+            {style.icon.background && (
+              <SelectControl<string>
+                label={__('Tvar pozadí', 'brilo-blocks')}
+                value={style.icon.backgroundShape}
+                options={[...DEFAULT_ICON_BACKGROUND_SHAPES]}
+                onChange={(v) => setIcon({backgroundShape: v as BasicIconBackgroundShape})}
+              />
+            )}
+            <BaseControl
+              label={__('Barva ohraničení', 'brilo-blocks')}
+              help={__('Bez vybrané barvy se okraj nevykreslí.', 'brilo-blocks')}
+              id="basic-icon-border-color"
+            >
+              <ColorPalette
+                colors={paletteColors}
+                value={style.icon.borderColor || undefined}
+                onChange={(value) => setIcon({borderColor: value ?? ''})}
+              />
+            </BaseControl>
+            {style.icon.borderColor && (
+              <RangeControl
+                label={__('Šířka ohraničení (px)', 'brilo-blocks')}
+                value={style.icon.borderWidth}
+                onChange={(v) => setIcon({borderWidth: v ?? 0})}
+                min={0}
+                max={10}
+                step={1}
+              />
+            )}
+          </PanelBody>
+        </InspectorControls>
+
+        <div {...blockProps}>
+          <ItemIconPreview
+            icon={icon}
+            className="i-basic-icon__icon"
+            modifierClassName={iconClassName}
+            style={cssVars}
+            setAttributes={setAttributes}
+            options={options}
+          />
+        </div>
+      </>
+    )
+  }
+}

package/src/blocks/core/basic-icon/editor.scss

@@ -0,0 +1,119 @@
+.i-basic-icon {
+  display: flex;
+  --icon-background-size: 0px;
+
+  // Background size only reserves space when a background or outline is actually selected.
+  &.--icon-background,
+  &.--icon-bordered {
+    --icon-background-size: 88px;
+  }
+
+  &.--align-left {
+    justify-content: flex-start;
+  }
+
+  &.--align-center {
+    justify-content: center;
+  }
+
+  &.--align-right {
+    justify-content: flex-end;
+  }
+}
+
+.i-basic-icon__icon {
+  --icon-box-size: max(var(--icon-background-size, 0px), var(--icon-size, 88px));
+
+  width: var(--icon-box-size);
+  height: var(--icon-box-size);
+  flex: 0 0 var(--icon-box-size);
+  display: grid;
+  grid-template-areas: "pile";
+  place-items: center;
+  isolation: isolate;
+
+  &::before,
+  &::after {
+    content: "";
+    grid-area: pile;
+    width: var(--icon-background-size, 0px);
+    height: var(--icon-background-size, 0px);
+    border-radius: inherit;
+    clip-path: var(--icon-background-shape, none);
+  }
+
+  &::before {
+    z-index: 0;
+    background-color: var(--icon-outline-color, transparent);
+  }
+
+  &::after {
+    z-index: 1;
+    width: calc(var(--icon-background-size, 0px) - var(--icon-outline-width, 0px) * 2);
+    height: calc(var(--icon-background-size, 0px) - var(--icon-outline-width, 0px) * 2);
+    background-color: var(--icon-background-color, transparent);
+  }
+
+  img,
+  svg,
+  span {
+    grid-area: pile;
+    position: relative;
+    z-index: 2;
+    width: var(--icon-size, 88px);
+    height: var(--icon-size, 88px);
+    object-fit: contain;
+  }
+
+  svg path {
+    fill: var(--icon-color, currentcolor);
+  }
+
+  span {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--icon-color, currentcolor);
+  }
+
+  &.--background-shape-circle {
+    --icon-background-shape: circle(50% at 50% 50%);
+  }
+
+  &.--background-shape-triangle {
+    --icon-background-shape: polygon(50% 0%, 0% 100%, 100% 100%);
+  }
+
+  &.--background-shape-rhombus {
+    --icon-background-shape: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
+  }
+
+  &.--background-shape-octagon {
+    --icon-background-shape: polygon(30% 0%, 70% 0%, 100% 30%, 100% 70%, 70% 100%, 30% 100%, 0% 70%, 0% 30%);
+  }
+
+  &.--background-shape-bevel {
+    --icon-background-shape: polygon(20% 0%, 80% 0%, 100% 20%, 100% 80%, 80% 100%, 20% 100%, 0% 80%, 0% 20%);
+  }
+
+  &.--background-shape-rabbet {
+    --icon-background-shape: polygon(
+      0% 15%,
+      15% 15%,
+      15% 0%,
+      85% 0%,
+      85% 15%,
+      100% 15%,
+      100% 85%,
+      85% 85%,
+      85% 100%,
+      15% 100%,
+      15% 85%,
+      0% 85%
+    );
+  }
+
+  &.--background-shape-parallelogram {
+    --icon-background-shape: polygon(25% 0%, 100% 0%, 75% 100%, 0% 100%);
+  }
+}