组件
主题
Seeds提供了一个默认主题,可以方便地访问大量的设计标记。
令牌和值
令牌和值有几种不同的形式:硬编码值,文字标记,语义标记。其中只有一些可以从种子主题中获得。
硬编码值
硬编码值是像像素值、十六进制值甚至字符串值这样的值。Seeds主题不提供任何硬编码值。
16进制值
:
# FFFFFF
;
像素值
:
12
px
;
识别硬编码值的一种方法是问自己,如果主题中的某些内容发生变化,它是否会动态更新。如果答案是否定的,那么它可能是硬编码的。
类似的
:
“透明”
;
重要的是要记住,当在CSS速记之类的东西中使用令牌时,有些值可能是硬编码的,而另一些则不是。只要需要动态的值使用语义值,这是可以的。
边境
:
1
px
坚实的美元
{
(
p
)
= > p.theme.colors.container.background.base
}
;
文字标记
蓝色的
.100
'或'
theme.colors。
蓝色的
[
One hundred.
] =
# dcf2ff
文字标记是表示主题中特定值的设计标记。更新该值将更改该令牌的所有实例。但是,文字标记不能表示多个值,因此不能用于动态主题化。
在明暗模式之间切换上面的例子。注意,盒子的颜色没有变化。那是因为价值bg
正在使用仅表示单个颜色值的文字标记。虽然它不会根据主题而改变,但如果我们要改变blue.100
从蓝色到白色,blue.100
现在看起来是白色的。
blue.100
稍后,我们将在一个地方更改硬编码值。
//主题使用的简化示例
//硬编码值、文字标记和语义标记。
常量
coreColorPalette
=
{
blueLiteralToken
:
{
700
:
“# 2079 c3”
,
}
,
purpleLiteralToken
:
{
700
:
“# 6 f5ed3”
,
}
,
}
;
常量
themeA
=
{
语义
:
{
令牌
:
coreColorPalette
。
blueLiteralToken
[
700
]
,
}
,
}
;
常量
themeB
=
{
语义
:
{
令牌
:
coreColorPalette
。
purpleLiteralToken
[
700
]
,
}
,
}
;
//框的颜色。背景我n App will depend on whether
// theme = themeA或themeB。你知道盒子是什么颜色的吗
//将在下面?
函数
应用程序
(
{
主题
=
themeA
}
)
{
返回
<
盒子
bg
=
{
主题
。
语义
。
令牌
}
高度
=
"
100 px
"
>
盒子
>
;
}
语义标记
Container.background.base = ?
语义标记本质上是别名指定有特定目的或意义的其他符号。例如,我们不是问某物长什么样,而是问“what is it?”或者“这是什么意思?”这些问题的答案将最终决定它的价值。
容器
并赋予它的意义背景
来装饰
,我们现在可以访问分配给的颜色container.background.decorative
在任何主题中。我们再来看看那个蓝盒子文字标记的例子。注意,当我们将主题切换为深色模式时,框的颜色是如何变化的。我们知道是一个容器
。我们也知道它是背景
蓝色纯粹是为了装饰
的原因。通过更改背景属性(bg
)来反映它的目的和意义,现在它完全是主题化的。
例子
让我们再看几个语义思维的例子。
如果我们看一下上面示例中的代码,我们可以清楚地看到,我们正在处理的组件的目的是传递错误。切换暗主题,看看组件会发生什么变化。
容器
。它的目的是包含内容。我们也知道背景
(bg
)是红色的。根据上面的上下文,我们知道红色可能意味着错误
。所以我们给bg
属性令牌container.background.error
。
容器
+
背景
+
Error = container.background.error
我们可以将同样的思路应用到边界上,通过替换背景
与边境
。现在我们分配container.border.error
到borderColor
财产。
容器
+
边境
+
Error = container.border.error
最后,我们可以通过询问“what is it?”和“这是什么意思?”这是一个图标
这意味着错误
。所以我们设置颜色
支撑在来icon.error
。
图标
+
Error = icon.error
现在试着将主题切换到暗模式。它只是工作!通过使用语义标记,我们可以确保我们的组件样式不仅适用于暗模式,还适用于任何不同的主题。
参考
访问主题
在你的作品中有几种使用主题的方法:
系统道具
系统道具引用主题中的令牌,使消费者能够通过一组预先确定的道具向组件添加自定义样式。
<
盒子
bg
=
"
container.background.error
"
/>
风格的组件
样式组件可以通过一个键路径直接访问主题(在组件的prop对象上)。
保证金:$
{
P => P .theme.space[
500
]
}
;
背景:美元
{
P => P .theme.colors.container.background.base
}
;
SCSS
在SCSS文件中访问主题主题
功能。使用同名函数访问主题的子集(例如,颜色
,阴影
,半径
),或使用泛型函数t
访问主题的任何部分。
.selector
{
颜色
:
颜色
(
“text.body”
)
;
//或者,t("colors.text.body")
}
为了使用这些函数,必须将它们直接导入到SCSS文件中,或者将它们导入到父样式表中@ import“主题”
。有一个主题
所以你必须将CSS构建工具指向正确的主题文件夹(例如:dist /主题/黑暗
(同时生成暗模式CSS),以便包含正确的主题
功能。
颜色
使用的颜色
基地
表示元素不需要任何修改就应该具有的默认颜色。例如,默认的蓝色链接。
链接
。
基地
但是,元素的基本颜色可以用修饰符替换,例如徘徊
或错误
允许您根据状态或目的更改其外观。每个元素都有一组唯一的修饰符反映在这个引用中。
链接
。
徘徊
某些元素文本不要有基础或修饰语,每次使用都要仔细考虑。
文本
。
标题
此外,更复杂的元素由多个彩色部分组成。
形式
。
背景
。
基地
形式
。
边境
。
基地
形式
。
占位符
。
基地
在某些时候,您需要为与此引用中的任何内容不匹配的组件着色。在这种情况下,尝试根据构建组件的元素为组件着色。
<
消息
/>
=
容器
+
文本
+
按钮
颜色被分成不同的类别。这些类别代表了构成大多数界面的常见主题元素。
应用程序
背景
:
(
p
)
= > p.theme.colors.app.background.base
;
基本元素 | 修饰符 |
---|---|
app.background.base | - |
容器
容器是任何可见的元素,其特定目的是封装内容。认为,< div >
背景
:
美元
{
(
p
)
= > p.theme.colors.container.background
}
;
基本元素 | 修饰符 |
---|---|
container.background.base |
成功
警告
错误
信息
机会
危险
装饰
选择
positive_sentiment
negative_sentiment
neutral_sentiment |
container.border.base |
成功
警告
错误
危险
信息
机会
装饰
选择 |
按钮
背景
:
美元
{
(
p
)
= > p.theme.colors.button.primary.background.base
}
;
主要的
用于最重要的行动呼吁。
基本元素 | 修饰符 |
---|---|
button.primary.background.base |
徘徊
活跃的 |
button.primary.border.base | - |
button.primary.text.base |
徘徊 |
二次
用作行动的补充号召。
基本元素 | 修饰符 |
---|---|
button.secondary.background.base |
徘徊
活跃的 |
button.secondary.border.base | - |
button.secondary.text.base |
徘徊 |
具有破坏性的
当用户的行为有破坏性后果时使用。
基本元素 | 修饰符 |
---|---|
button.destructive.background.base |
徘徊
活跃的 |
button.destructive.border.base | - |
button.destructive.text.base |
徘徊 |
药丸
一个低水平,柔和的行动与一个大悬停和点击目标。
基本元素 | 修饰符 |
---|---|
button.pill.background.base |
徘徊
活跃的 |
button.pill.border.base | - |
button.pill.text.base |
徘徊 |
占位符
作为添加内容的占位符的柔和动作。
基本元素 | 修饰符 |
---|---|
button.placeholder.background.base |
徘徊
活跃的 |
button.placeholder.border.base | - |
button.placeholder.text.base |
徘徊 |
了无样式
当需要整体风格灵活性时使用的无样式按钮。
基本元素 | 修饰符 |
---|---|
button.unstyled.background.base | - |
button.unstyled.border.base | - |
button.unstyled.text.base |
徘徊 |
链接
基本元素 | 修饰符 |
---|---|
link.base |
徘徊 |
文本
基本元素 | 修饰符 |
---|---|
text.headline | - |
text.subtext | - |
text.body | - |
text.inverse | - |
text.error | - |
text.background.highlight | - |
text.background.selection | # a1d2f8 |
图标
基本元素 | 修饰符 |
---|---|
icon.base |
逆
成功
警告
错误
危险
信息
机会
应用
positive_sentiment
negative_sentiment
neutral_sentiment |
形式
基本元素 | 修饰符 |
---|---|
form.background.base |
选择 |
form.border.base |
错误
警告
选择 |
form.placeholder.base | - |
列表项
基本元素 | 修饰符 |
---|---|
listItem.background.base |
徘徊
选择 |
覆盖
基本元素 | 修饰符 |
---|---|
overlay.background.base | - |
overlay.text.base | - |
overlay.icon.base | - |
海拔高度
boxShadow
:
(
p
)
=>
p
。
主题
。
颜色
。
海拔高度
。
基地
;
基本元素 | 修饰符 |
---|---|
elevation.base | - |
网络
基本元素 | 修饰符 |
---|---|
network.twitter | - |
network.twitter_like | - |
network.facebook | - |
network.facebook_audience_network | - |
network.linkedin | - |
network.instagram | - |
network.feedly | - |
network.analytics | - |
network.youtube | - |
network.messenger | - |
network.snapchat | - |
network.pinterest | - |
network.tumblr | - |
network.reddit | - |
network.tripadvisor | - |
network.glassdoor | - |
network.google_my_business | - |
network.google_business_messages | - |
network.google_play_store | - |
network.apple_app_store | - |
network.salesforce | - |
network.zendesk | - |
network.hubspot | - |
network.microsoft_dynamics | - |
network.yelp | - |
network.whatsapp | - |
network.tiktok | - |
Dataviz
数据可视化调色板是用于数据可视化的有序颜色列表。
进口
{
useContext
}
从
“反应”
进口
{
ThemeContext
}
从
“styled-components”
常量
generateChart
=
(
)
=>
{
常量
主题
=
useContext
(
ThemeContext
)
返回
(
主题
。
颜色
。
dataviz
。
列表
。
地图
(
(
datavizColor
,
我
)
=>
{
<
盒子
bg
=
{
datavizColor
}
>
Dataviz颜色
{
我
}
盒子
>
}
)
)
}
基本元素 | 修饰符 |
---|---|
dataviz.map | 一个对象,包含数据可视化颜色的有序列表 |
dataviz.list | 数据可视化颜色的数组 |
空间
注意:所有的空格值也可以是负数。只需在值前加上连字符,即。
将给出-4px的边距。
系统支持 | 关键路径 | 价值 |
---|---|---|
0 |
theme.space [0] |
|
One hundred.
/-One hundred. |
theme.space [One hundred.]
/theme.space [-One hundred.] |
|
200
/-200 |
theme.space [200]
/theme.space [-200] |
|
300
/-300 |
theme.space [300]
/theme.space [-300] |
|
350
/-350 |
theme.space [350]
/theme.space [-350] |
|
400
/-400 |
theme.space [400]
/theme.space [-400] |
|
450
/-450 |
theme.space [450]
/theme.space [-450] |
|
500
/-500 |
theme.space [500]
/theme.space [-500] |
|
600
/-600 |
theme.space [600]
/theme.space [-600] |
排版
排版令牌封装字体大小和行高值。
系统支持 | 关键路径 | 价值 |
---|---|---|
One hundred. |
theme.typography [One hundred.] |
|
200 |
theme.typography [200] |
|
300 |
theme.typography [300] |
|
400 |
theme.typography [400] |
|
500 |
theme.typography [500] |
|
600 |
theme.typography [600] |
|
700 |
theme.typography [700] |
|
800 |
theme.typography [800] |
|
900 |
theme.typography [900] |
|
1000 |
theme.typography [1000] |
|
1100 |
theme.typography [1100] |
|
1200 |
theme.typography [1200] |
字体粗细
系统支持 | 关键路径 | 价值 |
---|---|---|
正常的 |
theme.fontWeights。正常的 |
|
半黑体的 |
theme.fontWeights。半黑体的 |
|
大胆的 |
theme.fontWeights。大胆的 |
|
粗黑体 |
theme.fontWeights。粗黑体 |
边框宽度
系统支持 | 关键路径 | 价值 |
---|---|---|
500 |
theme.borderWidths [500] |
1 px |
边界半径
系统支持 | 关键路径 | 价值 |
---|---|---|
内心的 |
theme.radii。内心的 |
500 令牌
6像素 |
外 |
theme.radii。外 |
600 令牌
8像素 |
药丸 |
theme.radii。药丸 |
1000 令牌
999999像素 |
盒阴影
系统支持 | 关键路径 | 价值 |
---|---|---|
低 |
theme.shadows。低 |
0px 2px 4px #2733333D |
媒介 |
theme.shadows。媒介 |
0px 8px 16px #2733333D |
高 |
theme.shadows。高 |
0px 16px 32px #2733333D |
宽松
系统支持 | 关键路径 | 价值 |
---|---|---|
ease_in |
theme.easing [ease_in] |
cubic-bezier(。4,0, .7, .2) |
ease_out |
theme.easing [ease_out] |
三次bezier(0,0,0.2, 1) |
ease_inout |
theme.easing [ease_inout] |
cubic-bezier(。4、0、2、1) |
持续时间
系统支持 | 关键路径 | 价值 |
---|---|---|
快 |
theme.duration [快] |
酒精含量 |
媒介 |
theme.duration [媒介] |
3 |
慢 |
theme.duration [慢] |
6 |
断点
断点值不会在系统道具中直接引用。请查看系统道具页面有关如何使用响应式道具的更多详细信息。
指数/名称 | 关键路径 | 价值 |
---|---|---|
0 (小) |
theme.breakpoints [0] |
900 px |
1 (媒介) |
theme.breakpoints [1] |
1200 px |
2 (大) |
theme.breakpoints [2] |
1500 px |
3. (X大) |
theme.breakpoints [3.] |
1800 px |
扩展主题
方法
基本的Racine主题应该满足构建UI所需的90%的用例,但每个产品和品牌都是独特的。爱游戏全站下载在某些情况下,您可能需要扩展主题。通过这样做,您将获得所有基本主题所提供的,并且还可以自定义它。扩展的主题应该是每个人都可以访问在萌芽社会。爱游戏app体育官方爱游戏体育官网首页
治理
要增加可见性,请将扩展主题文件存储在src /主题/ extendedThemes目录中。这确保了一个独特的地方协作的主题更新。创建主题文件时,请确保遵循我们特定的命名约定。
如何创建扩展主题
在Racine 's中为您的扩展主题创建一个新目录extendedThemes目录。在扩展主题中,为光
和黑暗
或者应用程序将使用的任何其他模式。最后,添加theme.js
文件到每个模式的目录。
src /主题/ extendedThemes / customTheme /光/ theme.js
src /主题/ extendedThemes / customTheme /黑/ theme.js
要启动我们的新主题,我们将首先导入基本的Racine主题。稍后我们将使用它作为新主题的基本值。
进口
{
主题
作为
baseLightTheme
}
从
“@爱游戏体育官网首页sprout-social /拉辛”
/ /或
进口
{
darkTheme
作为
baseDarkTheme
}
从
“@爱游戏体育官网首页sprout-social /拉辛”
接下来,我们将定义一个新对象来保存新主题的值。在这个例子中,我们称之为customTheme
。
/ / src /主题/ extendedThemes / customTheme /光/ theme.js
进口
{
主题
作为
baseLightTheme
}
从
“@爱游戏体育官网首页sprout-social /拉辛”
常量
customTheme
=
{
}
;
出口
默认的
customTheme
将基本主题扩展到自定义主题中。这将所有现有的主题属性复制到您的自定义主题中。
/ / src /主题/ extendedThemes / customTheme /光/ theme.js
进口
{
主题
作为
baseLightTheme
}
从
“@爱游戏体育官网首页sprout-social /拉辛”
常量
customTheme
=
{
…
baseLightTheme
,
}
;
出口
默认的
customTheme
现在我们可以自定义扩展主题了。让我们添加一个新的color属性,并覆盖我们的主要按钮的背景颜色。
/ / src /主题/ extendedThemes / customTheme /光/ theme.js
进口
{
主题
作为
baseLightTheme
}
从
“@爱游戏体育官网首页sprout-social /拉辛”
//你可以给主题对象添加一个新属性
//我们建议使用您的区域或团队名称来设置新属性的命名空间
常量
uniqueColorThing
=
{
文本
:
{
基地
:
baseLightTheme
。
颜色
。
中性
[
0
]
,
徘徊
:
baseLightTheme
。
颜色
。
中性
[
0
]
}
;
}
;
//覆盖基本主题中的值
//下面是一个如何重写按钮背景色的例子
常量
overridePrimaryButtonBackground
=
{
基地
:
baseLightTheme
。
颜色
。
紫色的
[
700
]
,
徘徊
:
“橙”
,
活跃的
:
“绿色”
}
;
常量
customTheme
=
{
//在基本主题中展开
…
baseLightTheme
,
颜色
:
{
//在基本主题的颜色中展开,以免覆盖所有颜色。
…
baseLightTheme
。
颜色
,
按钮
:
{
…
baseLightTheme
。
颜色
。
按钮
,
主要的
:
{
…
baseLightTheme
。
颜色
。
按钮
。
主要的
,
背景
:
overridePrimaryButtonBackground
}
}
,
//在新的主题属性中展开。
uniqueColorThing
}
}
;
出口
默认的
customTheme
;
中导出自定义主题拉辛索引文件。
出口
{
customTheme
}
从
“. . /主题/ extendedThemes / customTheme /主题”
;
如何使用扩展主题
从Racine导入扩展主题和ThemeProvider
进口
{
customTheme
,
customDarkTheme
,
ThemeProvider
}
从
“@爱游戏体育官网首页sproutsocial /拉辛”
;
你可以把你的新主题传递给一个ThemeProvider
渲染
(
<
ThemeProvider
主题
=
{
isDarkMode
?
customTheme
:
customDarkTheme
}
>
<
按钮
>
默认主题
按钮
>
ThemeProvider
>
)
;