@patreon/studio/module/utilities/color-scheme/index.js

Patreon Studio Design System

import { css } from 'styled-components';
export const colorSchemeModes = ['light', 'dark'];
// TODO (legacied consistent-return)
// This failure is legacied in and should be updated. DO NOT COPY.
/* eslint-disable consistent-return */
export function cssForDarkMode(content) {
    return ({ theme: { tokenColorMode } }) => {
        if (tokenColorMode === 'auto') {
            return css `
        @media (prefers-color-scheme: dark) {
          ${content}
        }
      `;
        }
        if (tokenColorMode === 'dark') {
            return css `
        ${content}
      `;
        }
        return;
    };
}
/* eslint-enable consistent-return */
// TODO (legacied consistent-return)
// This failure is legacied in and should be updated. DO NOT COPY.
/* eslint-disable consistent-return */
export function cssForLightMode(content) {
    return ({ theme: { tokenColorMode } }) => {
        if (tokenColorMode === 'auto') {
            return css `
        @media (prefers-color-scheme: light) {
          ${content}
        }
      `;
        }
        if (tokenColorMode === 'light') {
            return css `
        ${content}
      `;
        }
        return;
    };
}
/* eslint-enable consistent-return */
/**
 * generates css for a given tokenColorMode based on the current theme
 */
function cssForTokenColorMode({ tokenColorMode, light, dark, }) {
    if (tokenColorMode === 'light' || dark === undefined) {
        return css `
      ${light}
    `;
    }
    if (tokenColorMode === 'dark') {
        return css `
      ${dark}
    `;
    }
    return css `
    ${light}

    @media (prefers-color-scheme: dark) {
      ${dark}
    }
  `;
}
/**
 * generates css which will automatically switch between light and dark mode
 */
export function cssForColorScheme({ light, dark, }) {
    return css `
    ${({ theme }) => css `
      ${cssForTokenColorMode({
        tokenColorMode: theme.tokenColorMode,
        light,
        dark,
    })}
    `}
  `;
}
//# sourceMappingURL=index.js.map