@aws-amplify/ui 5.6.9 → 5.7.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (11) hide show
  1. package/dist/esm/theme/tokens/components/breadcrumbs.mjs +1 -0
  2. package/dist/esm/theme/tokens/components/index.mjs +1 -1
  3. package/dist/esm/types/primitives/componentClassName.mjs +1 -1
  4. package/dist/index.js +1 -1
  5. package/dist/styles.css +63 -0
  6. package/dist/theme.css +22 -0
  7. package/dist/types/theme/tokens/components/breadcrumbs.d.ts +9 -0
  8. package/dist/types/theme/tokens/components/index.d.ts +2 -0
  9. package/dist/types/theme/tokens/types/designToken.d.ts +2 -0
  10. package/dist/types/types/primitives/componentClassName.d.ts +5 -0
  11. package/package.json +2 -2
package/dist/styles.css CHANGED
@@ -83,6 +83,28 @@
83
83
  --amplify-components-badge-large-font-size: var(--amplify-font-sizes-medium);
84
84
  --amplify-components-badge-large-padding-vertical: var(--amplify-space-small);
85
85
  --amplify-components-badge-large-padding-horizontal: var(--amplify-space-medium);
86
+ --amplify-components-breadcrumbs-flex-direction: row;
87
+ --amplify-components-breadcrumbs-flex-wrap: wrap;
88
+ --amplify-components-breadcrumbs-gap: 0;
89
+ --amplify-components-breadcrumbs-color: var(--amplify-colors-font-tertiary);
90
+ --amplify-components-breadcrumbs-item-flex-direction: row;
91
+ --amplify-components-breadcrumbs-item-color: inherit;
92
+ --amplify-components-breadcrumbs-item-font-size: inherit;
93
+ --amplify-components-breadcrumbs-item-align-items: center;
94
+ --amplify-components-breadcrumbs-item-line-height: 1;
95
+ --amplify-components-breadcrumbs-separator-color: inherit;
96
+ --amplify-components-breadcrumbs-separator-font-size: inherit;
97
+ --amplify-components-breadcrumbs-separator-padding-inline: var(--amplify-space-xxs);
98
+ --amplify-components-breadcrumbs-link-color: var(--amplify-components-link-color);
99
+ --amplify-components-breadcrumbs-link-font-size: inherit;
100
+ --amplify-components-breadcrumbs-link-font-weight: normal;
101
+ --amplify-components-breadcrumbs-link-text-decoration: none;
102
+ --amplify-components-breadcrumbs-link-padding-inline: var(--amplify-space-xs);
103
+ --amplify-components-breadcrumbs-link-padding-block: var(--amplify-space-xxs);
104
+ --amplify-components-breadcrumbs-link-current-color: inherit;
105
+ --amplify-components-breadcrumbs-link-current-font-size: inherit;
106
+ --amplify-components-breadcrumbs-link-current-font-weight: normal;
107
+ --amplify-components-breadcrumbs-link-current-text-decoration: none;
86
108
  --amplify-components-button-font-weight: var(--amplify-font-weights-bold);
87
109
  --amplify-components-button-transition-duration: var(--amplify-components-fieldcontrol-transition-duration);
88
110
  --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
@@ -2254,6 +2276,47 @@ strong.amplify-text {
2254
2276
  align-self: center;
2255
2277
  }
2256
2278
 
2279
+ .amplify-breadcrumbs__list {
2280
+ display: flex;
2281
+ flex-wrap: var(--amplify-components-breadcrumbs-flex-wrap);
2282
+ flex-direction: var(--amplify-components-breadcrumbs-flex-direction);
2283
+ gap: var(--amplify-components-breadcrumbs-gap);
2284
+ color: var(--amplify-components-breadcrumbs-color);
2285
+ }
2286
+
2287
+ .amplify-breadcrumbs__item {
2288
+ display: inline-flex;
2289
+ flex-direction: var(--amplify-components-breadcrumbs-item-flex-direction);
2290
+ align-items: var(--amplify-components-breadcrumbs-item-align-items);
2291
+ line-height: var(--amplify-components-breadcrumbs-item-line-height);
2292
+ color: var(--amplify-components-breadcrumbs-item-color);
2293
+ font-size: var(--amplify-components-breadcrumbs-item-font-size);
2294
+ }
2295
+
2296
+ .amplify-breadcrumbs__separator {
2297
+ color: var(--amplify-components-breadcrumbs-separator-color);
2298
+ font-size: var(--amplify-components-breadcrumbs-separator-font-size);
2299
+ padding-inline: var(--amplify-components-breadcrumbs-separator-padding-inline);
2300
+ }
2301
+
2302
+ .amplify-breadcrumbs__link {
2303
+ color: var(--amplify-components-breadcrumbs-link-color);
2304
+ font-size: var(--amplify-components-breadcrumbs-link-font-size);
2305
+ font-weight: var(--amplify-components-breadcrumbs-link-font-weight);
2306
+ padding-inline: var(--amplify-components-breadcrumbs-link-padding-inline);
2307
+ padding-block: var(--amplify-components-breadcrumbs-link-padding-block);
2308
+ -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
2309
+ text-decoration: var(--amplify-components-breadcrumbs-link-text-decoration);
2310
+ }
2311
+
2312
+ .amplify-breadcrumbs__link--current {
2313
+ color: var(--amplify-components-breadcrumbs-link-current-color);
2314
+ font-size: var(--amplify-components-breadcrumbs-link-current-font-size);
2315
+ font-weight: var(--amplify-components-breadcrumbs-link-current-font-weight);
2316
+ -webkit-text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
2317
+ text-decoration: var(--amplify-components-breadcrumbs-link-current-text-decoration);
2318
+ }
2319
+
2257
2320
  .amplify-card {
2258
2321
  background-color: var(--amplify-components-card-background-color);
2259
2322
  border-radius: var(--amplify-components-card-border-radius);
package/dist/theme.css CHANGED
@@ -80,6 +80,28 @@
80
80
  --amplify-components-badge-large-font-size: var(--amplify-font-sizes-medium);
81
81
  --amplify-components-badge-large-padding-vertical: var(--amplify-space-small);
82
82
  --amplify-components-badge-large-padding-horizontal: var(--amplify-space-medium);
83
+ --amplify-components-breadcrumbs-flex-direction: row;
84
+ --amplify-components-breadcrumbs-flex-wrap: wrap;
85
+ --amplify-components-breadcrumbs-gap: 0;
86
+ --amplify-components-breadcrumbs-color: var(--amplify-colors-font-tertiary);
87
+ --amplify-components-breadcrumbs-item-flex-direction: row;
88
+ --amplify-components-breadcrumbs-item-color: inherit;
89
+ --amplify-components-breadcrumbs-item-font-size: inherit;
90
+ --amplify-components-breadcrumbs-item-align-items: center;
91
+ --amplify-components-breadcrumbs-item-line-height: 1;
92
+ --amplify-components-breadcrumbs-separator-color: inherit;
93
+ --amplify-components-breadcrumbs-separator-font-size: inherit;
94
+ --amplify-components-breadcrumbs-separator-padding-inline: var(--amplify-space-xxs);
95
+ --amplify-components-breadcrumbs-link-color: var(--amplify-components-link-color);
96
+ --amplify-components-breadcrumbs-link-font-size: inherit;
97
+ --amplify-components-breadcrumbs-link-font-weight: normal;
98
+ --amplify-components-breadcrumbs-link-text-decoration: none;
99
+ --amplify-components-breadcrumbs-link-padding-inline: var(--amplify-space-xs);
100
+ --amplify-components-breadcrumbs-link-padding-block: var(--amplify-space-xxs);
101
+ --amplify-components-breadcrumbs-link-current-color: inherit;
102
+ --amplify-components-breadcrumbs-link-current-font-size: inherit;
103
+ --amplify-components-breadcrumbs-link-current-font-weight: normal;
104
+ --amplify-components-breadcrumbs-link-current-text-decoration: none;
83
105
  --amplify-components-button-font-weight: var(--amplify-font-weights-bold);
84
106
  --amplify-components-button-transition-duration: var(--amplify-components-fieldcontrol-transition-duration);
85
107
  --amplify-components-button-font-size: var(--amplify-components-fieldcontrol-font-size);
package/dist/types/theme/tokens/components/breadcrumbs.d.ts ADDED
@@ -0,0 +1,9 @@
1
+ import { DesignTokenProperties, OutputVariantKey } from '../types/designToken';
2
+ export type BreadcrumbsTokens<OutputType extends OutputVariantKey> = DesignTokenProperties<'gap' | 'flexDirection' | 'flexWrap' | 'color', OutputType> & {
3
+ item?: DesignTokenProperties<'color' | 'fontSize' | 'alignItems' | 'lineHeight' | 'flexDirection', OutputType>;
4
+ separator?: DesignTokenProperties<'color' | 'fontSize' | 'paddingInline', OutputType>;
5
+ link?: DesignTokenProperties<'color' | 'fontSize' | 'fontWeight' | 'paddingInline' | 'paddingBlock' | 'textDecoration', OutputType> & {
6
+ current?: DesignTokenProperties<'color' | 'fontSize' | 'fontWeight' | 'textDecoration', OutputType>;
7
+ };
8
+ };
9
+ export declare const breadcrumbs: Required<BreadcrumbsTokens<'default'>>;
package/dist/types/theme/tokens/components/index.d.ts CHANGED
@@ -2,6 +2,7 @@ import { AlertTokens } from './alert';
2
2
  import { AutocompleteTokens } from './autocomplete';
3
3
  import { AuthenticatorTokens } from './authenticator';
4
4
  import { BadgeTokens } from './badge';
5
+ import { BreadcrumbsTokens } from './breadcrumbs';
5
6
  import { ButtonTokens } from './button';
6
7
  import { CardTokens } from './card';
7
8
  import { CheckboxTokens } from './checkbox';
@@ -53,6 +54,7 @@ type BaseComponentTokens<Output extends OutputVariantKey> = {
53
54
  authenticator?: AuthenticatorTokens<Output>;
54
55
  autocomplete?: AutocompleteTokens<Output>;
55
56
  badge?: BadgeTokens<Output>;
57
+ breadcrumbs?: BreadcrumbsTokens<Output>;
56
58
  button?: ButtonTokens<Output>;
57
59
  card?: CardTokens<Output>;
58
60
  checkbox?: CheckboxTokens<Output>;
package/dist/types/theme/tokens/types/designToken.d.ts CHANGED
@@ -80,6 +80,7 @@ export type StrokeLinecapValue = string;
80
80
  export type StrokeWidthValue = string;
81
81
  export type SpaceValue<Platform extends PlatformKey = unknown> = Platform extends 'react-native' ? string | number : string;
82
82
  export type TextAlignValue = string;
83
+ export type TextDecorationValue = string;
83
84
  export type TimeValue<Platform extends PlatformKey = unknown, Output extends OutputVariantKey = unknown> = Output extends 'required' ? Platform extends 'react-native' ? number : string : string;
84
85
  export type TransformValue = string;
85
86
  export type TransitionDurationValue = string;
@@ -160,6 +161,7 @@ interface TokenStandardProperties {
160
161
  strokeLinecap: StrokeLinecapValue;
161
162
  strokeWidth: StrokeWidthValue;
162
163
  textAlign: TextAlignValue;
164
+ textDecoration: TextDecorationValue;
163
165
  top: SpaceValue;
164
166
  transform: TransformValue;
165
167
  transitionDuration: TransitionDurationValue;
package/dist/types/types/primitives/componentClassName.d.ts CHANGED
@@ -13,6 +13,11 @@ export declare enum ComponentClassName {
13
13
  AutocompleteMenuOption = "amplify-autocomplete__menu__option",
14
14
  AutocompleteMenuOptions = "amplify-autocomplete__menu__options",
15
15
  Badge = "amplify-badge",
16
+ Breadcrumbs = "amplify-breadcrumbs",
17
+ BreadcrumbsList = "amplify-breadcrumbs__list",
18
+ BreadcrumbsItem = "amplify-breadcrumbs__item",
19
+ BreadcrumbsSeparator = "amplify-breadcrumbs__separator",
20
+ BreadcrumbsLink = "amplify-breadcrumbs__link",
16
21
  Button = "amplify-button",
17
22
  ButtonGroup = "amplify-buttongroup",
18
23
  ButtonLoaderWrapper = "amplify-button__loader-wrapper",
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@aws-amplify/ui",
3
- "version": "5.6.9",
3
+ "version": "5.7.0",
4
4
  "main": "dist/index.js",
5
5
  "module": "dist/esm/index.mjs",
6
6
  "exports": {
@@ -51,7 +51,7 @@
51
51
  "tslib": "2.4.1"
52
52
  },
53
53
  "peerDependencies": {
54
- "aws-amplify": ">= 5.0.1",
54
+ "aws-amplify": "^5.0.1",
55
55
  "xstate": "^4.33.6"
56
56
  },
57
57
  "peerDependenciesMeta": {