npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@chapanda/style-preset-base

v1.4.6

Published

chapanda style preset

Downloads

391

Readme

@chapanda/style-preset-base

基于中心规范基础的样式预设,它包含有 colors 颜色预设, font 字体预设,border 边框预设、layout 对齐预设。

使用

通过 scss 文件 引入,来使用其提供的预设方法或变量,详情方法或变量参考 API 不分

@use '@chapanda/style-preset-base/theme' as cbdPreset;

// 挂载预设颜色变量
:root {
  @include cbdPreset.generate-root-css-variables();
}
  1. 入口文件 main.tsx 引入 scss 样式文件(单靠 antd 提供的 token 定制主题,无法完全满足样式需求)
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
import '@chapanda/style-preset-antd/theme'
createRoot(document.getElementById('root')!).render(
  <StrictMode>
    <App />
  </StrictMode>,
)

API

colors 颜色预设

colors 颜色预设的颜色所有颜色变量如下, 当挂载到根元素下后, 你可以看到所有颜色变量, 通过 var(--cbd-xx-yy) 访问,
比如: var(--cbd-brand-5).

const yellow = {
  '1': '#FFF7EB',
  '2': '#FFBB33',
  // 警告色
  '3': '#FF9900',
  '4': '#EB8120',
  // 以下为不在设计规范中但UI使用的颜色
  '5': '#fef6c8',
  '6': '#f99784',
  '7': '#FABF00',
}

const red = {
  '1': '#FFF1F2',
  '2': '#FF808A',
  // 错误色
  '3': '#FF5F66',
  '4': '#F53F3F',
  // 以下为不在设计规范中但UI使用的颜色
  '5': '#dc0407',
  '6': '#F12B43',
}

const green = {
  '1': '#F1F7EA',
  '2': '#95DB42',
  // 成功色
  '3': '#72B22F',
  '4': '#529908',
  // 以下为不在设计规范中但UI使用的颜色
  '5': '#f3feee',
  '6': '#c5f89b',
  '7': '#06A561',
  '8': '#33D65F',
  '9': '#6ACC48'
}

const mint = {
  '1': '#E9F7F9',
  '2': '#77D5D4',
  '3': '#14C7B8',
  '4': '#00A590',
  // 以下为不在设计规范中但UI使用的颜色
  '5': '#008489',
}

const purple = {
  '1': '#EFEBFF',
  '2': '#887DFD',
  '3': '#5348CE',
  '4': '#352BA5',
}

const gray = {
  // 浅色背景
  '1': '#F9FAFC',
  // 深色背景/浅色分割线、边框
  '2': '#F0F1F5',
  // 深色色分割线、边框
  '3': '#E5E6EB',
  // 置灰/引导信息
  '4': '#C9CDD4',
  // 次要信息/辅助说明
  '5': '#86909C',
  // 次强调信息
  '6': '#4E5969',
  // 强调信息、基础的文字颜色
  '7': '#1D2129',
  // 以下为不在设计规范中但UI使用的颜色
  '8': '#2c3e50',
  '9': '#d0d0d0',
  '10': '#d3dce6',
  '11': '#99a9bf',
  '12': '#97a8be',
  '13': '#5a5e66',
  '14': '#2b2f3a',
  '15': '#676a6c',
  '16': '#707070',
  '17': '#484848',
  '18': '#bdc1c8',
  '19': '#D9E1EC',
  '20': '#1A1819',
  '21': '#131523',
  '22': '#5A607F',
  '23': '#888F9E',
  '24': '#535C6B',
  '25': '#969799',
  '26': '#ECF2FF',
  '27': '#1D2026',
  '28': '#586070',
  '29': '#8D97A8',
  '30': '#F5F8FC',
  '31': '#323233',
  '32': '#F5F5F5',
  '33': '#1c1c1e',
  '34': '#3a3a3c',
  '35': '#6C7294',
  '36': '#5C5C5C',
  '37': '#F5F6FA',
  '38': '#E2E2E2',
  '39': '#BBBDBF',
  '40': '#d9d9d9',
  '41': '#d4d4d4',
  '42': '#F2F4FD',
  '43': '#4f4f4f',
  '44': '#F7F8FC',
  '45': '#F7F8FA',
  '46': '#282F38',
  '47': '#F4F5F7',
  '48': '#8C94A3',
  '49': '#EDF0F7',
  '50': '#F8F8F8',
  '51': '#e1e8ee',
  '52': '#f3f4f6',
  '53': '#ebedf0',
  '54': '#EAEDF0',
  '55': '#7f8fa4',
  '56': '#f4f4f4',
  '57': '#e6e6e7',
}

const brand = {
  // 浅色背景
  '1': '#F2F5FD',
  // 特殊场景
  '2': '#ECF1FD',
  // 填充/悬浮
  '3': '#3775FC',
  // 填充/常规
  '4': '#105CFF',
  // 品牌色/字体/点击
  '5': '#0A4CDE',
  // 深色填充/字体
  '6': '#18284A',
  // 以下为不在设计规范中但UI使用的颜色
  '7': '#F7F9FF',
  '8': '#bcd1ff',
  '9': '#337ab7',
  '10': '#4662e6',
  '11': '#476DAB',
  '12': '#5a89cf',
  '13': '#CEDDFF',
  '14': '#94BFFF',
  '15': '#a9e6f8',
  '16': '#3f9fe9',
  '17': '#1a5da1',
  '18': '#1E5EFF',
  '19': '#2457FF',
  '20': '#E6F7FF',
}

scss 提供如下方法:

generate-root-css-variables

generate-root-css-variables 可以将预设颜色变量挂载到 root 下, 他接受一个被 generate-color-map 处理过得参数, 生成对应的颜色变量

@use '@chapanda/style-preset-base/theme' as cbdPreset;
// 挂载预设颜色变量
:root {
  @include cbdPreset.generate-root-css-variables();
}

generate-color-map

generate-color-map 用于生成颜色变量映射,结合 generate-root-css-variables 使用可以自定义生成颜色变量。

@use '@chapanda/style-preset-base/theme' as cbdPreset;

$colorsHaHa: generate-color-map(
        // 前缀
        "--cbd",
        // 名称
        "haha",
        // 后缀列表
       (1),
        // 颜色列表
       ( #00ffff),
);

// 挂载预设颜色变量
:root {
  @include cbdPreset.generate-root-css-variables($colorsHaHa);
}

在上述例子中最终你可以通过 var(--cbd-haha-1) 访问到颜色变量.

get-color-value

get-color-value 方法可以通过传入变量名称直接获取颜色值, 在某些 scss 函数进行颜色计算时不能是一个变量,可以使用 get-color-value 来方便的获取值, 但它只支持预设的变量,手动通过 generate-color-mapgenerate-root-css-variables 创建的变量无法获取。 比如使用cbdPreset.get-color-value('--cbd-brand-5') 可以直接获取到颜色值 #0A4CDE

colors 的颜色预设除了使用 scss 外还提供了纯运行时的颜色变量生成, 在运行时获取颜色变量会很有用。

genThemeColors

genThemeColors 用于生成主题颜色变量对象.

declare type ThemeColors = Record<string, string | Record<string, string>>;
/**
 * 生成主题颜色变量
 * @param themeColors 主题色对象,默认是 chapanda 的颜色变量,可以在此基础上扩展,但是 chapanda 的颜色变量优先级 更高
 * @param mix 是否集成默认颜色, 默认是 false,为 true 的话会使用 themeColors 参数,并合并默认 chapanda 的颜色变量
 * @param prefix 变量前缀, 默认是 'cbd'
 */
declare const genThemeColors: (themeColors?: ThemeColors, mix?: boolean, prefix?: string) => {
    preflights: string;
    colorsVariable: Record<string, any>;
    colors: Record<string, string>;
};

border 边框预设

border 边框预设提供 4 中默认的情感边框

警告色边框

.border-warning {
  border-style: solid;
  border-color: var(--cbd-yellow-3);
  border-width: 1px;
}

你也可以自己控制边框的粗细和风格

@use '@chapanda/style-preset-base/theme' as cbdPreset;
.border-warning-dash-2 {
  @include cbdPreset.gen-border-warning(4px, dashed)
}

错误色边框

.border-error {
  border-style: solid;
  border-color: var(--cbd-red-3);
  border-width: 1px;
}

你也可以自己控制边框的粗细和风格

@use '@chapanda/style-preset-base/theme' as cbdPreset;
.border-error-dash-2 {
  @include cbdPreset.gen-border-error(4px, dashed)
}

成功色边框

.border-success {
  border-style: solid;
  border-color: var(--cbd-green-3);
  border-width: 1px;
}

你也可以自己控制边框的粗细和风格

@use '@chapanda/style-preset-base/theme' as cbdPreset;
.border-success-dash-2 {
  @include cbdPreset.gen-border-success(4px, dashed)
}

默认色边框

.border-basic {
  border-style: solid;
  border-color: var(--cbd-gray-3);
  border-width: 1px;
}

你也可以自己控制边框的粗细和风格

@use '@chapanda/style-preset-base/theme' as cbdPreset;
.border-basic-dash-2 {
  @include cbdPreset.gen-border-style(4px, var(--cbd-gray-3), dashed)
}

font 字体预设

font 字体预设 提供默认字体样式类如下, 根据需求酌情使用对应大小的字体类


@mixin font-pingfang {
  font-family: PingFang-SC, -apple-system, BlinkMacSystemFont, "Segoe UI",
  Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
  "Segoe UI Emoji", "Segoe UI Symbol"
}
.font-pingfang{
  font-family: PingFang-SC, -apple-system, BlinkMacSystemFont, "Segoe UI",
  Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
  "Segoe UI Emoji", "Segoe UI Symbol"
}

.pf-medium-24 {
  font-weight: 500;
  line-height: 1.4;
  font-size: 24px;
  @include font-pingfang()
}
.pf-medium-22 {
  font-weight: 500;
  font-size: 24px;
  @include font-pingfang()
}

.pf-medium-20 {
  font-weight: 500;
  font-size: 20px;
  @include font-pingfang()
}
.pf-medium-18 {
  font-weight: 500;
  font-size: 18px;
  @include font-pingfang()
}

.pf-medium-17 {
  font-weight: 500;
  font-size: 17px;
  @include font-pingfang()
}

.pf-medium-16 {
  font-weight: 500;
  font-size: 16px;
  @include font-pingfang()
}

.pf-medium-15 {
  font-weight: 500;
  font-size: 15px;
  @include font-pingfang()
}

.pf-regular-24 {
  font-weight: 400;
  line-height: 1.4;
  font-size: 24px;
  @include font-pingfang()
}

.pf-regular-22 {
  font-weight: 500;
  font-size: 24px;
  @include font-pingfang()
}

.pf-regular-20 {
  font-weight: 400;
  font-size: 20px;
  @include font-pingfang()
}

.pf-regular-18 {
  font-weight: 400;
  font-size: 18px;
  @include font-pingfang()
}


.pf-regular-17 {
  font-weight: 400;
  font-size: 17px;
  @include font-pingfang()
}


.pf-regular-16 {
  font-weight: 400;
  font-size: 16px;
  @include font-pingfang()
}

.pf-regular-15 {
  font-weight: 400;
  font-size: 15px;
  @include font-pingfang()
}


.pf-regular-14 {
  font-weight: 400;
  font-size: 14px;
  @include font-pingfang()
}

.pf-regular-12 {
  font-weight: 400;
  font-size: 12px;
  @include font-pingfang()
}


@mixin font-harmony {
  font-family: 'HarmonyOS Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI",
  Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
  "Segoe UI Emoji", "Segoe UI Symbol"
}
.font-harmony{
  font-family: 'HarmonyOS Sans SC', -apple-system, BlinkMacSystemFont, "Segoe UI",
  Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
  "Segoe UI Emoji", "Segoe UI Symbol"
}

.hm-medium-24 {
  font-weight: 500;
  line-height: 1.4;
  font-size: 24px;
  @include font-harmony()
}
.hm-medium-20 {
  font-weight: 500;
  font-size: 20px;
  @include font-harmony()
}
.hm-medium-18 {
  font-weight: 500;
  font-size: 18px;
  @include font-harmony()
}

.hm-medium-17 {
  font-weight: 500;
  font-size: 17px;
  @include font-harmony()
}

.hm-medium-16 {
  font-weight: 500;
  font-size: 16px;
  @include font-harmony()
}

.hm-medium-15 {
  font-weight: 500;
  font-size: 15px;
  @include font-harmony()
}

.hm-regular-24 {
  font-weight: 400;
  line-height: 1.4;
  font-size: 24px;
  @include font-harmony()
}

.hm-regular-20 {
  font-weight: 400;
  font-size: 20px;
  @include font-harmony()
}

.hm-regular-18 {
  font-weight: 400;
  font-size: 18px;
  @include font-harmony()
}


.hm-regular-17 {
  font-weight: 400;
  font-size: 17px;
  @include font-harmony()
}


.hm-regular-16 {
  font-weight: 400;
  font-size: 16px;
  @include font-harmony()
}

.hm-regular-15 {
  font-weight: 400;
  font-size: 15px;
  @include font-harmony()
}


.hm-regular-14 {
  font-weight: 400;
  font-size: 14px;
  @include font-harmony()
}

.hm-regular-12 {
  font-weight: 400;
  font-size: 12px;
  @include font-harmony()
}

而对于移动端看板会有特殊的字体要求也进行了集成

// 以下是非设计规范里所使用的字体,
// 在移动端看板的数字显示上使用了
@font-face {
  font-family: 'DIN';
  src: url('@chapanda/style-preset-base/theme/font/DIN-Bold.otf');
  font-weight: normal;
  font-style: normal;
}

@mixin font-din($important:null) {
  @if type-of($important) != null {
    font-family: DIN, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol" !important;
  } @else {
    font-family: DIN, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol"
  }
}
.font-din{
  font-family: DIN, -apple-system, BlinkMacSystemFont, "Segoe UI",
  Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
  "Segoe UI Emoji", "Segoe UI Symbol"
}

@font-face {
  font-family: 'DIN-Bold';
  src: url('@chapanda/style-preset-base/theme/font/DINNextLTPro-Bold.ttf');
  font-weight: normal;
  font-style: normal;
}

@mixin font-din-bold($important:null) {
  @if type-of($important) != null {
    font-family: DIN-Bold, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol" !important;
  } @else {
    font-family: DIN-Bold, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol"
  }
}

.font-din-bold{
  font-family: DIN-Bold, -apple-system, BlinkMacSystemFont, "Segoe UI",
  Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
  "Segoe UI Emoji", "Segoe UI Symbol"
}


@font-face {
  font-family: 'DIN-Heavy';
  src: url('@chapanda/style-preset-base/theme/font/DINNextLTPro-Heavy.ttf');
  font-weight: normal;
  font-style: normal;
}
@mixin font-din-heavy($important:null) {
  @if type-of($important) != null {
    font-family: DIN-Heavy, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol" !important;
  } @else {
    font-family: DIN-Heavy, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol"
  }
}
.font-din-heavy{
  font-family: DIN-Heavy, -apple-system, BlinkMacSystemFont, "Segoe UI",
  Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
  "Segoe UI Emoji", "Segoe UI Symbol"
}


@font-face {
  font-family: 'DIN-Heavy-Lighter';
  src: url('@chapanda/style-preset-base/theme/font/DINNextLTPro-Medium.ttf');
  font-weight: normal;
  font-style: normal;
}
@mixin font-din-heavy-lighter($important:null) {
  @if type-of($important) != null {
    font-family: DIN-Heavy-Lighter, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol" !important;
  } @else {
    font-family: DIN-Heavy-Lighter, -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
    "Segoe UI Emoji", "Segoe UI Symbol"
  }
}

.font-din-heavy-lighter{
  font-family: DIN-Heavy-Lighter, -apple-system, BlinkMacSystemFont, "Segoe UI",
  Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji",
  "Segoe UI Emoji", "Segoe UI Symbol"
}

layout 对齐预设

layout 对齐预设提供了一些对齐和定位的简写

.pr {
  position: relative;
}

.pa {
  position: absolute;
}

.pf {
  position: fixed;
}

.fcs {
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

.fbs {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.fcc {
  display: flex;
  justify-content: center;
  align-items: center;
}

.fec {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.fsc {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.fss {
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}

.fbc {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.ifc {
  display: inline-flex;
  align-items: center;
}