Skip to content

Commit 7d3ac02

Browse files
amanabiyamanabiy
authored
feat: Add style api for token (#4346)
1 parent 00b00b5 commit 7d3ac02

File tree

15 files changed

+683
-234
lines changed

15 files changed

+683
-234
lines changed

‎build-tools/utils/custom-css-properties.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,5 +163,16 @@ const customCssPropertiesList = [
163163
'styleSliderHandleBackgroundHover',
164164
'styleSliderHandleBackgroundActive',
165165
'styleSliderHandleBorderRadius',
166+
// Token style properties
167+
'tokenStyleBackgroundDefault',
168+
'tokenStyleBackgroundDisabled',
169+
'tokenStyleBackgroundReadOnly',
170+
'tokenStyleBorderColorDefault',
171+
'tokenStyleBorderColorDisabled',
172+
'tokenStyleBorderColorReadOnly',
173+
'tokenStyleDismissColorDefault',
174+
'tokenStyleDismissColorDisabled',
175+
'tokenStyleDismissColorHover',
176+
'tokenStyleDismissColorReadOnly',
166177
];
167178
module.exports = customCssPropertiesList;

‎pages/token/style-permutations.page.tsx‎

Lines changed: 83 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
2+
// SPDX-License-Identifier: Apache-2.0
3+
import React from 'react';
4+
5+
import Icon from '~components/icon';
6+
import Token, { TokenProps } from '~components/token';
7+
8+
import { SimplePage } from '../app/templates';
9+
import createPermutations from '../utils/permutations';
10+
import PermutationsView from '../utils/permutations-view';
11+
12+
const roundedPillStyle: TokenProps['style'] = {
13+
root: {
14+
background: {
15+
default: 'light-dark(#eef2ff, #2e1065)',
16+
disabled: 'light-dark(#f1f5f9, #1e1b2e)',
17+
readOnly: 'light-dark(#f8fafc, #1e1b3a)',
18+
},
19+
borderColor: {
20+
default: 'light-dark(#c7d2fe, #6d28d9)',
21+
disabled: 'light-dark(#e2e8f0, #334155)',
22+
readOnly: 'light-dark(#cbd5e1, #4c1d95)',
23+
},
24+
borderRadius: '24px',
25+
paddingBlock: '4px',
26+
paddingInline: '12px',
27+
},
28+
dismissButton: {
29+
color: {
30+
default: 'light-dark(#6366f1, #a78bfa)',
31+
hover: 'light-dark(#4338ca, #c4b5fd)',
32+
disabled: 'light-dark(#cbd5e1, #475569)',
33+
readOnly: 'light-dark(#94a3b8, #6d28d9)',
34+
},
35+
focusRing: {
36+
borderColor: 'light-dark(#6366f1, #a78bfa)',
37+
borderRadius: '12px',
38+
borderWidth: '2px',
39+
},
40+
},
41+
};
42+
43+
const greenOutlineStyle: TokenProps['style'] = {
44+
root: {
45+
background: {
46+
default: 'light-dark(#ecfdf5, #022c22)',
47+
disabled: 'light-dark(#f8fafc, #1e1b2e)',
48+
readOnly: 'light-dark(#f0fdf4, #0a3d2e)',
49+
},
50+
borderColor: {
51+
default: 'light-dark(#6ee7b7, #059669)',
52+
disabled: 'light-dark(#e2e8f0, #334155)',
53+
readOnly: 'light-dark(#a7f3d0, #047857)',
54+
},
55+
borderRadius: '6px',
56+
borderWidth: '2px',
57+
paddingBlock: '4px',
58+
paddingInline: '10px',
59+
},
60+
};
61+
62+
const permutations = createPermutations<TokenProps>([
63+
{
64+
label: ['Styled token'],
65+
icon: [undefined, <Icon key="icon" name="settings" />],
66+
onDismiss: [() => {}],
67+
disabled: [false, true],
68+
readOnly: [false, true],
69+
variant: ['normal', 'inline'],
70+
style: [roundedPillStyle, greenOutlineStyle],
71+
},
72+
]);
73+
74+
export default function TokenStylePermutations() {
75+
return (
76+
<SimplePage title="Token Style permutations" screenshotArea={{ disableAnimations: true }}>
77+
<PermutationsView
78+
permutations={permutations}
79+
render={(permutation, index) => <Token {...permutation} dismissLabel={`Dismiss ${index}`} />}
80+
/>
81+
</SimplePage>
82+
);
83+
}

‎src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap‎

Lines changed: 167 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29794,6 +29794,173 @@ use the \`id\` attribute, consider setting it on a parent element instead.",
2979429794
"optional": true,
2979529795
"type": "boolean",
2979629796
},
29797+
{
29798+
"description": "An object containing CSS properties to customize the token's visual appearance.
29799+
Refer to the [style](/components/token/?tabId=style) tab for more details.",
29800+
"inlineType": {
29801+
"name": "TokenProps.Style",
29802+
"properties": [
29803+
{
29804+
"inlineType": {
29805+
"name": "object",
29806+
"properties": [
29807+
{
29808+
"inlineType": {
29809+
"name": "object",
29810+
"properties": [
29811+
{
29812+
"name": "default",
29813+
"optional": true,
29814+
"type": "string",
29815+
},
29816+
{
29817+
"name": "disabled",
29818+
"optional": true,
29819+
"type": "string",
29820+
},
29821+
{
29822+
"name": "hover",
29823+
"optional": true,
29824+
"type": "string",
29825+
},
29826+
{
29827+
"name": "readOnly",
29828+
"optional": true,
29829+
"type": "string",
29830+
},
29831+
],
29832+
"type": "object",
29833+
},
29834+
"name": "color",
29835+
"optional": true,
29836+
"type": "{ default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; readOnly?: string | undefined; }",
29837+
},
29838+
{
29839+
"inlineType": {
29840+
"name": "object",
29841+
"properties": [
29842+
{
29843+
"name": "borderColor",
29844+
"optional": true,
29845+
"type": "string",
29846+
},
29847+
{
29848+
"name": "borderRadius",
29849+
"optional": true,
29850+
"type": "string",
29851+
},
29852+
{
29853+
"name": "borderWidth",
29854+
"optional": true,
29855+
"type": "string",
29856+
},
29857+
],
29858+
"type": "object",
29859+
},
29860+
"name": "focusRing",
29861+
"optional": true,
29862+
"type": "{ borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; }",
29863+
},
29864+
],
29865+
"type": "object",
29866+
},
29867+
"name": "dismissButton",
29868+
"optional": true,
29869+
"type": "{ color?: { default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; readOnly?: string | undefined; } | undefined; focusRing?: { borderColor?: string | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; } | undefined; }",
29870+
},
29871+
{
29872+
"inlineType": {
29873+
"name": "object",
29874+
"properties": [
29875+
{
29876+
"inlineType": {
29877+
"name": "{ default?: string | undefined; disabled?: string | undefined; readOnly?: string | undefined; }",
29878+
"properties": [
29879+
{
29880+
"name": "default",
29881+
"optional": true,
29882+
"type": "string",
29883+
},
29884+
{
29885+
"name": "disabled",
29886+
"optional": true,
29887+
"type": "string",
29888+
},
29889+
{
29890+
"name": "readOnly",
29891+
"optional": true,
29892+
"type": "string",
29893+
},
29894+
],
29895+
"type": "object",
29896+
},
29897+
"name": "background",
29898+
"optional": true,
29899+
"type": "{ default?: string | undefined; disabled?: string | undefined; readOnly?: string | undefined; }",
29900+
},
29901+
{
29902+
"inlineType": {
29903+
"name": "{ default?: string | undefined; disabled?: string | undefined; readOnly?: string | undefined; }",
29904+
"properties": [
29905+
{
29906+
"name": "default",
29907+
"optional": true,
29908+
"type": "string",
29909+
},
29910+
{
29911+
"name": "disabled",
29912+
"optional": true,
29913+
"type": "string",
29914+
},
29915+
{
29916+
"name": "readOnly",
29917+
"optional": true,
29918+
"type": "string",
29919+
},
29920+
],
29921+
"type": "object",
29922+
},
29923+
"name": "borderColor",
29924+
"optional": true,
29925+
"type": "{ default?: string | undefined; disabled?: string | undefined; readOnly?: string | undefined; }",
29926+
},
29927+
{
29928+
"name": "borderRadius",
29929+
"optional": true,
29930+
"type": "string",
29931+
},
29932+
{
29933+
"name": "borderWidth",
29934+
"optional": true,
29935+
"type": "string",
29936+
},
29937+
{
29938+
"name": "paddingBlock",
29939+
"optional": true,
29940+
"type": "string",
29941+
},
29942+
{
29943+
"name": "paddingInline",
29944+
"optional": true,
29945+
"type": "string",
29946+
},
29947+
],
29948+
"type": "object",
29949+
},
29950+
"name": "root",
29951+
"optional": true,
29952+
"type": "{ background?: { default?: string | undefined; disabled?: string | undefined; readOnly?: string | undefined; } | undefined; borderColor?: { default?: string | undefined; disabled?: string | undefined; readOnly?: string | undefined; } | undefined; borderRadius?: string | undefined; borderWidth?: string | undefined; p...",
29953+
},
29954+
],
29955+
"type": "object",
29956+
},
29957+
"name": "style",
29958+
"optional": true,
29959+
"systemTags": [
29960+
"core",
29961+
],
29962+
"type": "TokenProps.Style",
29963+
},
2979729964
{
2979829965
"description": "A list of tags giving further guidance about the token.",
2979929966
"name": "tags",

0 commit comments

Comments
 (0)