Skip to content

Commit 6670191

Browse files
amanabiyamanabiy
committed
feat: Add style api for token component
1 parent f5bcafe commit 6670191

File tree

10 files changed

+531
-17
lines changed

10 files changed

+531
-17
lines changed

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

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -163,5 +163,18 @@ const customCssPropertiesList = [
163163
'styleSliderHandleBackgroundHover',
164164
'styleSliderHandleBackgroundActive',
165165
'styleSliderHandleBorderRadius',
166+
// Token style properties
167+
'tokenStyleBackgroundDefault',
168+
'tokenStyleBackgroundDisabled',
169+
'tokenStyleBackgroundHover',
170+
'tokenStyleBorderColorDefault',
171+
'tokenStyleBorderColorDisabled',
172+
'tokenStyleBorderColorHover',
173+
'tokenStyleColorDefault',
174+
'tokenStyleColorDisabled',
175+
'tokenStyleColorHover',
176+
'tokenStyleDismissColorDefault',
177+
'tokenStyleDismissColorDisabled',
178+
'tokenStyleDismissColorHover',
166179
];
167180
module.exports = customCssPropertiesList;

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

Lines changed: 91 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,91 @@
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+
hover: 'light-dark(#dbeafe, #3b0764)',
17+
disabled: 'light-dark(#f1f5f9, #1e1b2e)',
18+
},
19+
borderColor: {
20+
default: 'light-dark(#c7d2fe, #6d28d9)',
21+
hover: 'light-dark(#93c5fd, #7c3aed)',
22+
disabled: 'light-dark(#e2e8f0, #334155)',
23+
},
24+
borderRadius: '24px',
25+
paddingBlock: '4px',
26+
paddingInline: '12px',
27+
color: {
28+
default: 'light-dark(#4338ca, #c4b5fd)',
29+
hover: 'light-dark(#3730a3, #ddd6fe)',
30+
disabled: 'light-dark(#94a3b8, #475569)',
31+
},
32+
},
33+
dismissButton: {
34+
color: {
35+
default: 'light-dark(#6366f1, #a78bfa)',
36+
hover: 'light-dark(#4338ca, #c4b5fd)',
37+
disabled: 'light-dark(#cbd5e1, #475569)',
38+
},
39+
focusRing: {
40+
borderColor: 'light-dark(#6366f1, #a78bfa)',
41+
borderRadius: '12px',
42+
borderWidth: '2px',
43+
},
44+
},
45+
};
46+
47+
const greenOutlineStyle: TokenProps['style'] = {
48+
root: {
49+
background: {
50+
default: 'light-dark(#ecfdf5, #022c22)',
51+
hover: 'light-dark(#d1fae5, #064e3b)',
52+
disabled: 'light-dark(#f8fafc, #1e1b2e)',
53+
},
54+
borderColor: {
55+
default: 'light-dark(#6ee7b7, #059669)',
56+
hover: 'light-dark(#34d399, #10b981)',
57+
disabled: 'light-dark(#e2e8f0, #334155)',
58+
},
59+
borderRadius: '6px',
60+
borderWidth: '2px',
61+
paddingBlock: '4px',
62+
paddingInline: '10px',
63+
color: {
64+
default: 'light-dark(#065f46, #6ee7b7)',
65+
hover: 'light-dark(#064e3b, #a7f3d0)',
66+
disabled: 'light-dark(#94a3b8, #475569)',
67+
},
68+
},
69+
};
70+
71+
const permutations = createPermutations<TokenProps>([
72+
{
73+
label: ['Styled token'],
74+
icon: [undefined, <Icon key="icon" name="settings" />],
75+
onDismiss: [() => {}],
76+
disabled: [false, true],
77+
variant: ['normal', 'inline'],
78+
style: [roundedPillStyle, greenOutlineStyle],
79+
},
80+
]);
81+
82+
export default function TokenStylePermutations() {
83+
return (
84+
<SimplePage title="Token Style permutations" screenshotArea={{ disableAnimations: true }}>
85+
<PermutationsView
86+
permutations={permutations}
87+
render={(permutation, index) => <Token {...permutation} dismissLabel={`Dismiss ${index}`} />}
88+
/>
89+
</SimplePage>
90+
);
91+
}

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

Lines changed: 188 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -29749,6 +29749,194 @@ use the \`id\` attribute, consider setting it on a parent element instead.",
2974929749
"optional": true,
2975029750
"type": "boolean",
2975129751
},
29752+
{
29753+
"description": "An object containing CSS properties to customize the token's visual appearance.
29754+
Refer to the [style](/components/token/?tabId=style) tab for more details.",
29755+
"inlineType": {
29756+
"name": "TokenProps.Style",
29757+
"properties": [
29758+
{
29759+
"inlineType": {
29760+
"name": "object",
29761+
"properties": [
29762+
{
29763+
"inlineType": {
29764+
"name": "{ default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; }",
29765+
"properties": [
29766+
{
29767+
"name": "default",
29768+
"optional": true,
29769+
"type": "string",
29770+
},
29771+
{
29772+
"name": "disabled",
29773+
"optional": true,
29774+
"type": "string",
29775+
},
29776+
{
29777+
"name": "hover",
29778+
"optional": true,
29779+
"type": "string",
29780+
},
29781+
],
29782+
"type": "object",
29783+
},
29784+
"name": "color",
29785+
"optional": true,
29786+
"type": "{ default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; }",
29787+
},
29788+
],
29789+
"type": "object",
29790+
},
29791+
"name": "dismissButton",
29792+
"optional": true,
29793+
"type": "{ color?: { default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; } | undefined; }",
29794+
},
29795+
{
29796+
"inlineType": {
29797+
"name": "object",
29798+
"properties": [
29799+
{
29800+
"inlineType": {
29801+
"name": "{ default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; }",
29802+
"properties": [
29803+
{
29804+
"name": "default",
29805+
"optional": true,
29806+
"type": "string",
29807+
},
29808+
{
29809+
"name": "disabled",
29810+
"optional": true,
29811+
"type": "string",
29812+
},
29813+
{
29814+
"name": "hover",
29815+
"optional": true,
29816+
"type": "string",
29817+
},
29818+
],
29819+
"type": "object",
29820+
},
29821+
"name": "background",
29822+
"optional": true,
29823+
"type": "{ default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; }",
29824+
},
29825+
{
29826+
"inlineType": {
29827+
"name": "{ default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; }",
29828+
"properties": [
29829+
{
29830+
"name": "default",
29831+
"optional": true,
29832+
"type": "string",
29833+
},
29834+
{
29835+
"name": "disabled",
29836+
"optional": true,
29837+
"type": "string",
29838+
},
29839+
{
29840+
"name": "hover",
29841+
"optional": true,
29842+
"type": "string",
29843+
},
29844+
],
29845+
"type": "object",
29846+
},
29847+
"name": "borderColor",
29848+
"optional": true,
29849+
"type": "{ default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; }",
29850+
},
29851+
{
29852+
"name": "borderRadius",
29853+
"optional": true,
29854+
"type": "string",
29855+
},
29856+
{
29857+
"name": "borderWidth",
29858+
"optional": true,
29859+
"type": "string",
29860+
},
29861+
{
29862+
"inlineType": {
29863+
"name": "{ default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; }",
29864+
"properties": [
29865+
{
29866+
"name": "default",
29867+
"optional": true,
29868+
"type": "string",
29869+
},
29870+
{
29871+
"name": "disabled",
29872+
"optional": true,
29873+
"type": "string",
29874+
},
29875+
{
29876+
"name": "hover",
29877+
"optional": true,
29878+
"type": "string",
29879+
},
29880+
],
29881+
"type": "object",
29882+
},
29883+
"name": "color",
29884+
"optional": true,
29885+
"type": "{ default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; }",
29886+
},
29887+
{
29888+
"inlineType": {
29889+
"name": "FocusRingStyle",
29890+
"properties": [
29891+
{
29892+
"name": "borderColor",
29893+
"optional": true,
29894+
"type": "string",
29895+
},
29896+
{
29897+
"name": "borderRadius",
29898+
"optional": true,
29899+
"type": "string",
29900+
},
29901+
{
29902+
"name": "borderWidth",
29903+
"optional": true,
29904+
"type": "string",
29905+
},
29906+
],
29907+
"type": "object",
29908+
},
29909+
"name": "focusRing",
29910+
"optional": true,
29911+
"type": "FocusRingStyle",
29912+
},
29913+
{
29914+
"name": "paddingBlock",
29915+
"optional": true,
29916+
"type": "string",
29917+
},
29918+
{
29919+
"name": "paddingInline",
29920+
"optional": true,
29921+
"type": "string",
29922+
},
29923+
],
29924+
"type": "object",
29925+
},
29926+
"name": "root",
29927+
"optional": true,
29928+
"type": "{ background?: { default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; } | undefined; borderColor?: { default?: string | undefined; disabled?: string | undefined; hover?: string | undefined; } | undefined; ... 5 more ...; paddingInline?: string | undefined; }",
29929+
},
29930+
],
29931+
"type": "object",
29932+
},
29933+
"name": "style",
29934+
"optional": true,
29935+
"systemTags": [
29936+
"core",
29937+
],
29938+
"type": "TokenProps.Style",
29939+
},
2975229940
{
2975329941
"description": "A list of tags giving further guidance about the token.",
2975429942
"name": "tags",

‎src/token/__tests__/__snapshots__/styles.test.tsx.snap‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
// Jest Snapshot v1, https://goo.gl/fbAQLP
2+
3+
exports[`getTokenRootStyles handles all possible style configurations 1`] = `
4+
{
5+
"--awsui-style-focus-ring-border-color-ffxlcc": "#6366f1",
6+
"--awsui-style-focus-ring-border-radius-ffxlcc": "12px",
7+
"--awsui-style-focus-ring-border-width-ffxlcc": "2px",
8+
"--awsui-token-style-background-default-ffxlcc": "#eef2ff",
9+
"--awsui-token-style-background-disabled-ffxlcc": "#f1f5f9",
10+
"--awsui-token-style-background-hover-ffxlcc": "#dbeafe",
11+
"--awsui-token-style-border-color-default-ffxlcc": "#c7d2fe",
12+
"--awsui-token-style-border-color-disabled-ffxlcc": "#e2e8f0",
13+
"--awsui-token-style-border-color-hover-ffxlcc": "#93c5fd",
14+
"--awsui-token-style-color-default-ffxlcc": "#4338ca",
15+
"--awsui-token-style-color-disabled-ffxlcc": "#94a3b8",
16+
"--awsui-token-style-color-hover-ffxlcc": "#3730a3",
17+
"--awsui-token-style-dismiss-color-default-ffxlcc": "#6366f1",
18+
"--awsui-token-style-dismiss-color-disabled-ffxlcc": "#cbd5e1",
19+
"--awsui-token-style-dismiss-color-hover-ffxlcc": "#4338ca",
20+
"borderRadius": "24px",
21+
"paddingBlock": "4px",
22+
"paddingInline": "12px",
23+
}
24+
`;
25+
26+
exports[`getTokenRootStyles returns empty object when SYSTEM is not core 1`] = `{}`;

0 commit comments

Comments
 (0)