@salutejs/plasma-new-hope 0.269.0-dev.0 → 0.270.0-canary.1744.13385332397.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (17) hide show
  1. package/emotion/cjs/examples/plasma_b2c/components/Tokens/Tokens.stories.tsx +28 -22
  2. package/emotion/cjs/examples/plasma_b2c/components/Tokens/Tokens.styles.js +14 -14
  3. package/emotion/cjs/examples/plasma_web/components/Tokens/Tokens.stories.tsx +28 -22
  4. package/emotion/cjs/examples/plasma_web/components/Tokens/Tokens.styles.js +14 -14
  5. package/emotion/es/examples/plasma_b2c/components/Tokens/Tokens.stories.tsx +28 -22
  6. package/emotion/es/examples/plasma_b2c/components/Tokens/Tokens.styles.js +14 -14
  7. package/emotion/es/examples/plasma_web/components/Tokens/Tokens.stories.tsx +28 -22
  8. package/emotion/es/examples/plasma_web/components/Tokens/Tokens.styles.js +14 -14
  9. package/package.json +5 -5
  10. package/styled-components/cjs/examples/plasma_b2c/components/Tokens/Tokens.stories.tsx +28 -22
  11. package/styled-components/cjs/examples/plasma_b2c/components/Tokens/Tokens.styles.js +2 -2
  12. package/styled-components/cjs/examples/plasma_web/components/Tokens/Tokens.stories.tsx +28 -22
  13. package/styled-components/cjs/examples/plasma_web/components/Tokens/Tokens.styles.js +2 -2
  14. package/styled-components/es/examples/plasma_b2c/components/Tokens/Tokens.stories.tsx +28 -22
  15. package/styled-components/es/examples/plasma_b2c/components/Tokens/Tokens.styles.js +2 -2
  16. package/styled-components/es/examples/plasma_web/components/Tokens/Tokens.stories.tsx +28 -22
  17. package/styled-components/es/examples/plasma_web/components/Tokens/Tokens.styles.js +2 -2
package/styled-components/es/examples/plasma_b2c/components/Tokens/Tokens.styles.js CHANGED
@@ -9,7 +9,7 @@ export var Category = /*#__PURE__*/styled.h2.withConfig({
9
9
  })(["margin:0 0 1.125rem 1.5rem;", ";"], h2);
10
10
  export var AccordionInfo = /*#__PURE__*/styled.div.withConfig({
11
11
  componentId: "plasma-new-hope__sc-19i9718-2"
12
- })(["display:grid;grid-template-columns:18rem 7.938rem 3.813rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"]);
12
+ })(["display:grid;grid-template-columns:18rem 7.938rem 2.375rem 3.813rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"]);
13
13
  export var Subcategory = /*#__PURE__*/styled.div.withConfig({
14
14
  componentId: "plasma-new-hope__sc-19i9718-3"
15
15
  })(["color:var(--text-secondary);"]);
@@ -27,7 +27,7 @@ export var OpacityPart = /*#__PURE__*/styled.span.withConfig({
27
27
  })(["color:var(--text-secondary);padding-left:0.125rem;"]);
28
28
  export var TokenInfo = /*#__PURE__*/styled.div.withConfig({
29
29
  componentId: "plasma-new-hope__sc-19i9718-8"
30
- })(["color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:0.5rem;}&.opacity{text-align:right;}&:not(.opacity):hover{color:var(--text-paragraph-hover);", "{color:var(--text-paragraph-hover);}}&:not(.opacity):active{color:var(--text-paragraph-active);", "{color:var(--text-secondary-active);}}"], OpacityPart, OpacityPart);
30
+ })(["color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:0.5rem;}&.no-interaction{text-align:right;}&:not(.no-interaction):hover{color:var(--text-paragraph-hover);", "{color:var(--text-paragraph-hover);}}&:not(.no-interaction):active{color:var(--text-paragraph-active);", "{color:var(--text-secondary-active);}}"], OpacityPart, OpacityPart);
31
31
  export var ColorCircle = /*#__PURE__*/styled.div.withConfig({
32
32
  componentId: "plasma-new-hope__sc-19i9718-9"
33
33
  })(["width:1.25rem;height:1.25rem;border-radius:50%;background:", ";box-shadow:", ";"], function (props) {
package/styled-components/es/examples/plasma_web/components/Tokens/Tokens.stories.tsx CHANGED
@@ -69,11 +69,11 @@ const StoryDemo = ({ context }) => {
69
69
 
70
70
  return (
71
71
  <>
72
- {Object.entries(groupedTokens).map(([category, value]) => (
72
+ {Object.entries(groupedTokens).map(([category, subcategoties]) => (
73
73
  <CategoryContainer key={category}>
74
74
  <Category>{category}</Category>
75
75
  <Accordion view="clear" size="s" stretching="filled" defaultActiveEventKey={[0]}>
76
- {Object.entries(value).map(([subcategory, value2], index) => (
76
+ {Object.entries(subcategoties).map(([subcategory, subcategoryTokens], index) => (
77
77
  <StyledAccordionItem
78
78
  key={subcategory}
79
79
  eventKey={index}
@@ -85,31 +85,37 @@ const StoryDemo = ({ context }) => {
85
85
  <ColorCircle disableShadow />
86
86
  Color
87
87
  </ColumnTitle>
88
+ <ColumnTitle>Tone</ColumnTitle>
88
89
  <ColumnTitle>Opacity</ColumnTitle>
89
90
  </AccordionInfo>
90
91
  }
91
92
  >
92
93
  <TokenInfoWrapper>
93
- {Object.entries(value2).map(([token, { value: value3, opacity }]) => (
94
- <AccordionInfo key={token}>
95
- <TokenInfo className="copy" onClick={() => copyToClipboard(token)}>
96
- {token}
97
- </TokenInfo>
98
- <TokenInfo
99
- className="color copy"
100
- onClick={() => copyToClipboard(value3, opacity?.alpha)}
101
- >
102
- <ColorCircle background={value3} />
103
- <div>
104
- {value3.includes('gradient') ? 'Градиент' : value3}
105
- {opacity && <OpacityPart>{opacity.alpha}</OpacityPart>}
106
- </div>
107
- </TokenInfo>
108
- {opacity && (
109
- <TokenInfo className="opacity">{opacity.parsedAlpha}</TokenInfo>
110
- )}
111
- </AccordionInfo>
112
- ))}
94
+ {Object.entries(subcategoryTokens).map(
95
+ ([token, { value, opacity, tone, colorName }]) => (
96
+ <AccordionInfo key={token}>
97
+ <TokenInfo className="copy" onClick={() => copyToClipboard(token)}>
98
+ {token}
99
+ </TokenInfo>
100
+ <TokenInfo
101
+ className="color copy"
102
+ onClick={() => copyToClipboard(value, opacity?.alpha)}
103
+ >
104
+ <ColorCircle background={value} />
105
+ <div>
106
+ {value.includes('gradient') ? 'Градиент' : colorName || value}
107
+ {!colorName && opacity && (
108
+ <OpacityPart>{opacity.alpha}</OpacityPart>
109
+ )}
110
+ </div>
111
+ </TokenInfo>
112
+ <TokenInfo className="no-interaction">
113
+ {tone !== 'none' && tone}
114
+ </TokenInfo>
115
+ <TokenInfo className="no-interaction">{opacity?.parsedAlpha}</TokenInfo>
116
+ </AccordionInfo>
117
+ ),
118
+ )}
113
119
  </TokenInfoWrapper>
114
120
  </StyledAccordionItem>
115
121
  ))}
package/styled-components/es/examples/plasma_web/components/Tokens/Tokens.styles.js CHANGED
@@ -9,7 +9,7 @@ export var Category = /*#__PURE__*/styled.h2.withConfig({
9
9
  })(["margin:0 0 1.125rem 1.5rem;", ";"], h2);
10
10
  export var AccordionInfo = /*#__PURE__*/styled.div.withConfig({
11
11
  componentId: "plasma-new-hope__sc-1ptu1dv-2"
12
- })(["display:grid;grid-template-columns:18rem 7.938rem 3.813rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"]);
12
+ })(["display:grid;grid-template-columns:18rem 7.938rem 2.375rem 3.813rem;grid-column-gap:1.5rem;font-family:var(--plasma-typo-body-m-font-family);font-size:var(--plasma-typo-body-m-font-size);font-style:var(--plasma-typo-body-m-font-style);font-weight:var(--plasma-typo-body-m-font-weight);letter-spacing:var(--plasma-typo-body-m-letter-spacing);line-height:var(--plasma-typo-body-m-line-height);"]);
13
13
  export var Subcategory = /*#__PURE__*/styled.div.withConfig({
14
14
  componentId: "plasma-new-hope__sc-1ptu1dv-3"
15
15
  })(["color:var(--text-secondary);"]);
@@ -27,7 +27,7 @@ export var OpacityPart = /*#__PURE__*/styled.span.withConfig({
27
27
  })(["color:var(--text-secondary);padding-left:0.125rem;"]);
28
28
  export var TokenInfo = /*#__PURE__*/styled.div.withConfig({
29
29
  componentId: "plasma-new-hope__sc-1ptu1dv-8"
30
- })(["color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:0.5rem;}&.opacity{text-align:right;}&:not(.opacity):hover{color:var(--text-paragraph-hover);", "{color:var(--text-paragraph-hover);}}&:not(.opacity):active{color:var(--text-paragraph-active);", "{color:var(--text-secondary-active);}}"], OpacityPart, OpacityPart);
30
+ })(["color:var(--text-paragraph);cursor:default;&.copy{cursor:copy;}&.color{display:flex;align-items:center;gap:0.5rem;}&.no-interaction{text-align:right;}&:not(.no-interaction):hover{color:var(--text-paragraph-hover);", "{color:var(--text-paragraph-hover);}}&:not(.no-interaction):active{color:var(--text-paragraph-active);", "{color:var(--text-secondary-active);}}"], OpacityPart, OpacityPart);
31
31
  export var ColorCircle = /*#__PURE__*/styled.div.withConfig({
32
32
  componentId: "plasma-new-hope__sc-1ptu1dv-9"
33
33
  })(["width:1.25rem;height:1.25rem;border-radius:50%;background:", ";box-shadow:", ";"], function (props) {