@frontile/theme

@ frontile/ 主题

Ember Octane apps 组件库:主题

兼容性

• Ember.js v3.16 或以上 (中文(简体) )
• Ember CLI v2.13 或以上 (单位:千美元)
• 节点.js v10 或以上

安装

ember install @frontile/theme

样式

尾风 CSS v3

// tailwind.config.js

const { frontile, safelist } = require('@frontile/theme/plugin');

module.exports = {
  content: [
    './app/**/*.{html,js,ts,hbs,gts,gjs}',
    './node_modules/@frontile/theme/dist/**/*.js',
  ],
  safelist: [
    ...safelist,
  ],
  darkMode: "class",
  theme: {
    extend: {},
  },
  plugins: [frontile()],
  // ...
};

尾风 CSS v4

使用默认主题

对于默认主题,请将此添加到您的 app/styles/app.css数字 :

@import "tailwindcss" source("../../");
@plugin "@frontile/theme/plugin/default";
@source '../../node_modules/@frontile';

自定义前置主题

要自定义前置主题, 请在您命名的项目根创建文件 frontile.js 内容如下:

const { frontile } = require('@frontile/theme/plugin');

module.exports = frontile({ /* your config */ });

那就更新你的 app/styles/app.css 来使用自定义配置 :

@import "tailwindcss" source("../../");
@plugin "./../../frontile.js";
@source '../../node_modules/@frontile';

颜色配置

您可以自定义前沿颜色的两种方式:

备选案文1: Via 插件配置(建议)

配置您的颜色 frontile.js 文档。 这种方法会自动生成最佳文本对比的"上"颜色:

const { frontile } = require('@frontile/theme/plugin');

module.exports = frontile({
  themes: {
    light: {
      colors: {
        primary: {
          subtle: '#3b82f6',
          DEFAULT: '#2563eb',
          strong: '#1d4ed8',
        }
      }
    },
    dark: {
      colors: {
        primary: {
          subtle: '#60a5fa',
          DEFAULT: '#3b82f6',
          strong: '#2563eb',
        }
      }
    }
  }
});

使用任何颜色格式(hex, rgb, hsl, oklch等). 插件会自动生成"上"的颜色来进行最优的文本对比.

CSS 可变引用 : 您也可以引用配置中的其他 CSS 变量 :

module.exports = frontile({
  themes: {
    light: {
      colors: {
        primary: {
          subtle: 'var(--color-surface-solid-6)',
        }
      }
    }
  }
});

说明: 在使用 CSS 变量引用时,自动"上"颜色生成被跳过,因为实际颜色值在构建时不为人所知. 需要时需要手动定义相应的"上"颜色.

自定义颜色

主题系统自动生成"上色"变体(如, on-primary, (中文(简体) ), on-success)用于语义颜色,以确保最佳文本对比. 这些颜色被作为语义背景上的文字/前色.

默认情况下,在彩色上使用WCAG对比指针来计算,并且会是纯白色或纯黑色. 然而,您可以覆盖这些自动生成的颜色,以符合您的品牌或设计要求:

const { frontile } = require('@frontile/theme/plugin');

module.exports = frontile({
  themes: {
    light: {
      colors: {
        // Define background colors as usual
        primary: {
          subtle: '#3b82f6',
          soft: '#2563eb',
          strong: '#1e3a8a',
          DEFAULT: '#1e40af'
        },
        // Override on-colors to use custom values
        'on-primary': {
          subtle: '#ffffff',      // Pure white
          soft: '#e0f2ff',        // Light blue tint instead of pure white
          strong: '#bfdbfe',      // Lighter blue
          DEFAULT: '#ffffff'      // Pure white
        }
      }
    }
  }
});

支持部分覆盖 - 你没有定义的任何变体仍将是自动生成的:

module.exports = frontile({
  themes: {
    light: {
      colors: {
        primary: {
          subtle: '#3b82f6',
          DEFAULT: '#1e40af',
          strong: '#1e3a8a',
        },
        'on-primary': {
          DEFAULT: '#e0f2ff',  // Only override the DEFAULT level, others auto-generate
        }
      }
    }
  }
});

您可以为任意语义色彩类别覆盖颜色 :

• on-neutral, (中文(简体) ), on-primary, (中文(简体) ), on-secondary, (中文(简体) ), on-tertiary, (中文(简体) ), on-success, (中文(简体) ), on-warning, (中文(简体) ), on-danger
• on-surface-modal

备选案文2:通过CSS变量

在您的 CSS 中直接覆盖颜色 :

@import "tailwindcss" source("../../");
@plugin "@frontile/theme/plugin/default";
@source '../../node_modules/@frontile';

@theme {
  /* Override primary colors */
  --color-primary-subtle: #3b82f6;
  --color-primary: #2563eb;
  --color-primary-strong: #1d4ed8;

  /* Manually define "on-" colors for text contrast */
  --color-on-primary-subtle: #ffffff;
  --color-on-primary: #ffffff;
  --color-on-primary-strong: #ffffff;
}

说明: 在通过 CSS 定义颜色时,必须手动定义相应的"上"颜色. 插件无法自动生成它们,因为CSS变量值在构建时无法访问.

文档

访问 前卫. dev 读取文件 并看到现场演示.

许可证

本项目根据以下规定获得许可证: MIT 许可证。 。 。 .