@daikin-oss/tailwind/dist/index.js

Tailwind plugin using DDS design tokens

// src/index.ts
import designTokens from "@daikin-oss/dds-tokens/json/daikin/Light/tokens.json";
import plugin from "tailwindcss/plugin";

// src/tokenTypes.ts
function unifyTokenType(sdType, tsType) {
  switch (tsType) {
    case "borderWidth":
    case "borderRadius":
    case "sizing":
    case "spacing":
      return tsType;
    default:
      return sdType;
  }
}

// src/index.ts
function createPerTypeTokenMap(keyPrefix, cssVarPrefix) {
  return Object.entries(designTokens).reduce((acc, [key, [value, sdType, tsType]]) => {
    const unifiedType = unifyTokenType(
      sdType,
      tsType
    );
    const object = acc[unifiedType] ??= {};
    const varRef = `var(${cssVarPrefix}${key})`;
    const comment = value ? ` /* ${value} */` : "";
    object[`${keyPrefix}${key}`] = `${varRef}${comment}`;
    return acc;
  }, {});
}
var DEFAULT_OPTIONS = {
  prefix: "dds-",
  cssVarPrefix: "--dds-"
};
var tokensPlugin = plugin.withOptions(
  (options) => (
    // eslint-disable-next-line @typescript-eslint/unbound-method
    ({ addUtilities }) => {
      const { prefix, cssVarPrefix } = { ...DEFAULT_OPTIONS, ...options };
      const perTypeTokenMap = createPerTypeTokenMap(prefix, cssVarPrefix);
      addUtilities(
        Object.entries(perTypeTokenMap.border ?? {}).map(
          ([key, value]) => ({
            [`.b-${key}`]: {
              border: value
            },
            [`.bl-${key}`]: {
              "border-left": value
            },
            [`.br-${key}`]: {
              "border-right": value
            },
            [`.bt-${key}`]: {
              "border-top": value
            },
            [`.bb-${key}`]: {
              "border-bottom": value
            },
            [`.bx-${key}`]: {
              "border-left": value,
              "border-right": value
            },
            [`.by-${key}`]: {
              "border-top": value,
              "border-bottom": value
            },
            [`.o-${key}`]: {
              outline: value
            }
          })
        )
      );
      addUtilities(
        Object.entries(perTypeTokenMap.typography ?? {}).map(
          ([key, value]) => ({
            [`.type-${key}`]: {
              font: value
            }
          })
        )
      );
    }
  ),
  (options) => {
    const { prefix, cssVarPrefix } = { ...DEFAULT_OPTIONS, ...options };
    const perTypeTokenMap = createPerTypeTokenMap(prefix, cssVarPrefix);
    return {
      theme: {
        extend: {
          colors: perTypeTokenMap.color,
          boxShadow: perTypeTokenMap.shadow,
          fontFamily: {
            ...perTypeTokenMap.fontFamily,
            // TODO: This is kept for compatibility reasons. We should migrate to design token.
            daikinSerif: "Roboto, sans-serif"
          },
          fontSize: perTypeTokenMap.fontSize,
          fontWeight: perTypeTokenMap.fontWeight,
          lineHeight: perTypeTokenMap.lineHeight,
          spacing: {
            ...perTypeTokenMap.dimension,
            ...perTypeTokenMap.spacing,
            ...perTypeTokenMap.sizing
          },
          borderRadius: perTypeTokenMap.borderRadius,
          borderWidth: perTypeTokenMap.borderWidth
        }
      }
    };
  }
);
var src_default = tokensPlugin;
export {
  src_default as default
};