@cloud-ru/ds-ai-suggestion 1.0.5 → 1.0.6-preview-a2208aeb.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 (9) hide show
  1. package/dist/cjs/AiSuggestionParent/styles.module.css +21 -21
  2. package/dist/cjs/AiSuggestionSimple/styles.module.css +17 -17
  3. package/dist/cjs/style.css +38 -38
  4. package/dist/esm/AiSuggestionParent/styles.module.css +21 -21
  5. package/dist/esm/AiSuggestionSimple/styles.module.css +17 -17
  6. package/dist/esm/style.css +38 -38
  7. package/package.json +4 -4
  8. package/src/AiSuggestionParent/styles.module.scss +1 -1
  9. package/src/AiSuggestionSimple/styles.module.scss +1 -1
package/dist/cjs/AiSuggestionParent/styles.module.css CHANGED
@@ -26,8 +26,8 @@
26
26
  flex-shrink:0;
27
27
  align-items:center;
28
28
  justify-content:center;
29
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
30
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
29
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
30
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
31
31
  color:currentcolor;
32
32
  }
33
33
 
@@ -45,7 +45,7 @@
45
45
  border-radius:var(--sn-primitive-dimension-full, 10000px);
46
46
  font-family:inherit;
47
47
  text-decoration:none;
48
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
48
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
49
49
  outline:0;
50
50
  outline-offset:0;
51
51
  transition:background-color 450ms cubic-bezier(1, 0, 0.26, 0.7), border-color 450ms cubic-bezier(1, 0, 0.26, 0.7), color 450ms cubic-bezier(1, 0, 0.26, 0.7), outline-color 120ms ease;
@@ -53,30 +53,30 @@
53
53
  .chip .icon,
54
54
  .chip .label,
55
55
  .chip .chevron{
56
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
56
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
57
57
  }
58
58
  .chip:disabled{
59
59
  cursor:not-allowed;
60
60
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
61
61
  }
62
62
  .chip:not(:disabled):focus-visible{
63
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
63
+ outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
64
64
  outline-offset:0;
65
65
  }
66
66
  .chip[data-activated]{
67
- border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
68
- background-color:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, var(--sn-brandRole-color-brandA-95, var(--sn-primitive-color-brandA-95, #f5fdf8))));
67
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
68
+ background-color:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
69
69
  transition:background-color 450ms cubic-bezier(0.7, 0.26, 0, 1.58), border-color 450ms cubic-bezier(0.7, 0.26, 0, 1.58), color 450ms cubic-bezier(0.7, 0.26, 0, 1.58), outline-color 120ms ease;
70
70
  }
71
71
  .chip[data-activated] .icon,
72
72
  .chip[data-activated] .label,
73
73
  .chip[data-activated] .chevron{
74
- color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
74
+ color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
75
75
  }
76
76
  @media (hover: hover){
77
77
  .chip[data-activated]:hover:not(:disabled){
78
- border-color:color-mix(in srgb, var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74)))) 80%, transparent);
79
- background-color:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, var(--sn-brandRole-color-brandA-99, var(--sn-primitive-color-brandA-99, #fbfffc))));
78
+ border-color:color-mix(in srgb, var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74)) 80%, transparent);
79
+ background-color:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #fbfffc));
80
80
  }
81
81
  }
82
82
  @media (hover: hover){
@@ -85,10 +85,10 @@
85
85
  }
86
86
  }
87
87
  .chip[data-size=s]{
88
- font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
88
+ font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
89
89
  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
90
- line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
91
- font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
90
+ line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-platform-comfort-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-20, 20px))));
91
+ font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-platform-comfort-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-14, 14px))));
92
92
  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
93
93
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
94
94
  height:var(--sn-primitive-dimension-32, 32px);
@@ -99,8 +99,8 @@
99
99
  flex-shrink:0;
100
100
  align-items:center;
101
101
  justify-content:center;
102
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
103
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
102
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
103
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
104
104
  }
105
105
  .chip[data-size=s] .icon > svg{
106
106
  display:block;
@@ -108,13 +108,13 @@
108
108
  height:100%;
109
109
  }
110
110
  .chip[data-size=s] .labelContainer{
111
- padding-inline:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-0, 0);
111
+ padding-inline:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-0, 0px);
112
112
  }
113
113
  .chip[data-size=m]{
114
- font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
114
+ font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
115
115
  font-weight:var(--sn-regular-label-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-l, var(--sn-brand-font-fontWeight-light-regular-label-l, var(--sn-primitive-font-fontWeightValue-550, 550))));
116
- line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
117
- font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
116
+ line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-platform-comfort-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-24, 24px))));
117
+ font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-platform-comfort-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-16, 16px))));
118
118
  letter-spacing:var(--sn-regular-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
119
119
  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
120
120
  height:var(--sn-primitive-dimension-40, 40px);
@@ -125,8 +125,8 @@
125
125
  flex-shrink:0;
126
126
  align-items:center;
127
127
  justify-content:center;
128
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
129
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
128
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
129
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
130
130
  }
131
131
  .chip[data-size=m] .icon > svg{
132
132
  display:block;
package/dist/cjs/AiSuggestionSimple/styles.module.css CHANGED
@@ -33,14 +33,14 @@
33
33
  }
34
34
  .chip:focus-visible{
35
35
  background-color:transparent;
36
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
36
+ outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
37
37
  outline-offset:var(--sn-primitive-dimension-2, 2px);
38
38
  }
39
39
  .chip[data-size=s]{
40
- font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
40
+ font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
41
41
  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
42
- line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
43
- font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
42
+ line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-platform-comfort-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-20, 20px))));
43
+ font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-platform-comfort-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-14, 14px))));
44
44
  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
45
45
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
46
46
  height:var(--sn-primitive-dimension-32, 32px);
@@ -51,8 +51,8 @@
51
51
  flex-shrink:0;
52
52
  align-items:center;
53
53
  justify-content:center;
54
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
55
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
54
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
55
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
56
56
  }
57
57
  .chip[data-size=s] .icon > svg{
58
58
  max-width:100%;
@@ -62,10 +62,10 @@
62
62
  padding-inline:var(--sn-primitive-dimension-4, 4px);
63
63
  }
64
64
  .chip[data-size=m]{
65
- font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
65
+ font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
66
66
  font-weight:var(--sn-regular-label-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-l, var(--sn-brand-font-fontWeight-light-regular-label-l, var(--sn-primitive-font-fontWeightValue-550, 550))));
67
- line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
68
- font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
67
+ line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-platform-comfort-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-24, 24px))));
68
+ font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-platform-comfort-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-16, 16px))));
69
69
  letter-spacing:var(--sn-regular-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
70
70
  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
71
71
  height:var(--sn-primitive-dimension-40, 40px);
@@ -76,8 +76,8 @@
76
76
  flex-shrink:0;
77
77
  align-items:center;
78
78
  justify-content:center;
79
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
80
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
79
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
80
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
81
81
  }
82
82
  .chip[data-size=m] .icon > svg{
83
83
  max-width:100%;
@@ -90,16 +90,16 @@
90
90
  background-color:var(--sn-theme-color-primary-background1Level);
91
91
  }
92
92
  .chip[data-appearance=primary]{
93
- border-color:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
93
+ border-color:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
94
94
  }
95
95
  .chip[data-appearance=primary] .icon,
96
96
  .chip[data-appearance=primary] .label{
97
- color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
97
+ color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
98
98
  }
99
99
  @media (hover: hover){
100
100
  .chip[data-appearance=primary]:hover:not(:disabled, [data-disabled]){
101
- border-color:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
102
- background-color:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, var(--sn-brandRole-color-brandA-95, var(--sn-primitive-color-brandA-95, #f5fdf8))));
101
+ border-color:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
102
+ background-color:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
103
103
  }
104
104
  }
105
105
  .chip:focus-visible{
@@ -110,12 +110,12 @@
110
110
  }
111
111
  .chip[data-appearance=neutral] .icon,
112
112
  .chip[data-appearance=neutral] .label{
113
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
113
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
114
114
  }
115
115
  @media (hover: hover){
116
116
  .chip[data-appearance=neutral]:hover:not(:disabled, [data-disabled]){
117
117
  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
118
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
118
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
119
119
  }
120
120
  .chip[data-appearance=neutral]:hover:not(:disabled, [data-disabled]) .icon, .chip[data-appearance=neutral]:hover:not(:disabled, [data-disabled]) .label{
121
121
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
package/dist/cjs/style.css CHANGED
@@ -49,8 +49,8 @@
49
49
  flex-shrink:0;
50
50
  align-items:center;
51
51
  justify-content:center;
52
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
53
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
52
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
53
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
54
54
  color:currentcolor;
55
55
  }
56
56
 
@@ -68,7 +68,7 @@
68
68
  border-radius:var(--sn-primitive-dimension-full, 10000px);
69
69
  font-family:inherit;
70
70
  text-decoration:none;
71
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
71
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
72
72
  outline:0;
73
73
  outline-offset:0;
74
74
  transition:background-color 450ms cubic-bezier(1, 0, 0.26, 0.7), border-color 450ms cubic-bezier(1, 0, 0.26, 0.7), color 450ms cubic-bezier(1, 0, 0.26, 0.7), outline-color 120ms ease;
@@ -76,30 +76,30 @@
76
76
  .chip .icon,
77
77
  .chip .label,
78
78
  .chip .chevron{
79
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
79
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
80
80
  }
81
81
  .chip:disabled{
82
82
  cursor:not-allowed;
83
83
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
84
84
  }
85
85
  .chip:not(:disabled):focus-visible{
86
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
86
+ outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
87
87
  outline-offset:0;
88
88
  }
89
89
  .chip[data-activated]{
90
- border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
91
- background-color:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, var(--sn-brandRole-color-brandA-95, var(--sn-primitive-color-brandA-95, #f5fdf8))));
90
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
91
+ background-color:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
92
92
  transition:background-color 450ms cubic-bezier(0.7, 0.26, 0, 1.58), border-color 450ms cubic-bezier(0.7, 0.26, 0, 1.58), color 450ms cubic-bezier(0.7, 0.26, 0, 1.58), outline-color 120ms ease;
93
93
  }
94
94
  .chip[data-activated] .icon,
95
95
  .chip[data-activated] .label,
96
96
  .chip[data-activated] .chevron{
97
- color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
97
+ color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
98
98
  }
99
99
  @media (hover: hover){
100
100
  .chip[data-activated]:hover:not(:disabled){
101
- border-color:color-mix(in srgb, var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74)))) 80%, transparent);
102
- background-color:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, var(--sn-brandRole-color-brandA-99, var(--sn-primitive-color-brandA-99, #fbfffc))));
101
+ border-color:color-mix(in srgb, var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74)) 80%, transparent);
102
+ background-color:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #fbfffc));
103
103
  }
104
104
  }
105
105
  @media (hover: hover){
@@ -108,10 +108,10 @@
108
108
  }
109
109
  }
110
110
  .chip[data-size=s]{
111
- font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
111
+ font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
112
112
  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
113
- line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
114
- font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
113
+ line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-platform-comfort-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-20, 20px))));
114
+ font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-platform-comfort-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-14, 14px))));
115
115
  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
116
116
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
117
117
  height:var(--sn-primitive-dimension-32, 32px);
@@ -122,8 +122,8 @@
122
122
  flex-shrink:0;
123
123
  align-items:center;
124
124
  justify-content:center;
125
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
126
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
125
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
126
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
127
127
  }
128
128
  .chip[data-size=s] .icon > svg{
129
129
  display:block;
@@ -131,13 +131,13 @@
131
131
  height:100%;
132
132
  }
133
133
  .chip[data-size=s] .labelContainer{
134
- padding-inline:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-0, 0);
134
+ padding-inline:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-0, 0px);
135
135
  }
136
136
  .chip[data-size=m]{
137
- font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
137
+ font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
138
138
  font-weight:var(--sn-regular-label-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-l, var(--sn-brand-font-fontWeight-light-regular-label-l, var(--sn-primitive-font-fontWeightValue-550, 550))));
139
- line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
140
- font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
139
+ line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-platform-comfort-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-24, 24px))));
140
+ font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-platform-comfort-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-16, 16px))));
141
141
  letter-spacing:var(--sn-regular-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
142
142
  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
143
143
  height:var(--sn-primitive-dimension-40, 40px);
@@ -148,8 +148,8 @@
148
148
  flex-shrink:0;
149
149
  align-items:center;
150
150
  justify-content:center;
151
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
152
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
151
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
152
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
153
153
  }
154
154
  .chip[data-size=m] .icon > svg{
155
155
  display:block;
@@ -212,14 +212,14 @@
212
212
  }
213
213
  .chip:focus-visible{
214
214
  background-color:transparent;
215
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
215
+ outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
216
216
  outline-offset:var(--sn-primitive-dimension-2, 2px);
217
217
  }
218
218
  .chip[data-size=s]{
219
- font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
219
+ font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
220
220
  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
221
- line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
222
- font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
221
+ line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-platform-comfort-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-20, 20px))));
222
+ font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-platform-comfort-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-14, 14px))));
223
223
  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
224
224
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
225
225
  height:var(--sn-primitive-dimension-32, 32px);
@@ -230,8 +230,8 @@
230
230
  flex-shrink:0;
231
231
  align-items:center;
232
232
  justify-content:center;
233
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
234
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
233
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
234
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
235
235
  }
236
236
  .chip[data-size=s] .icon > svg{
237
237
  max-width:100%;
@@ -241,10 +241,10 @@
241
241
  padding-inline:var(--sn-primitive-dimension-4, 4px);
242
242
  }
243
243
  .chip[data-size=m]{
244
- font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
244
+ font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
245
245
  font-weight:var(--sn-regular-label-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-l, var(--sn-brand-font-fontWeight-light-regular-label-l, var(--sn-primitive-font-fontWeightValue-550, 550))));
246
- line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
247
- font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
246
+ line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-platform-comfort-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-24, 24px))));
247
+ font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-platform-comfort-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-16, 16px))));
248
248
  letter-spacing:var(--sn-regular-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
249
249
  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
250
250
  height:var(--sn-primitive-dimension-40, 40px);
@@ -255,8 +255,8 @@
255
255
  flex-shrink:0;
256
256
  align-items:center;
257
257
  justify-content:center;
258
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
259
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
258
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
259
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
260
260
  }
261
261
  .chip[data-size=m] .icon > svg{
262
262
  max-width:100%;
@@ -269,16 +269,16 @@
269
269
  background-color:var(--sn-theme-color-primary-background1Level);
270
270
  }
271
271
  .chip[data-appearance=primary]{
272
- border-color:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
272
+ border-color:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
273
273
  }
274
274
  .chip[data-appearance=primary] .icon,
275
275
  .chip[data-appearance=primary] .label{
276
- color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
276
+ color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
277
277
  }
278
278
  @media (hover: hover){
279
279
  .chip[data-appearance=primary]:hover:not(:disabled, [data-disabled]){
280
- border-color:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
281
- background-color:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, var(--sn-brandRole-color-brandA-95, var(--sn-primitive-color-brandA-95, #f5fdf8))));
280
+ border-color:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
281
+ background-color:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
282
282
  }
283
283
  }
284
284
  .chip:focus-visible{
@@ -289,12 +289,12 @@
289
289
  }
290
290
  .chip[data-appearance=neutral] .icon,
291
291
  .chip[data-appearance=neutral] .label{
292
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
292
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
293
293
  }
294
294
  @media (hover: hover){
295
295
  .chip[data-appearance=neutral]:hover:not(:disabled, [data-disabled]){
296
296
  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
297
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
297
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
298
298
  }
299
299
  .chip[data-appearance=neutral]:hover:not(:disabled, [data-disabled]) .icon, .chip[data-appearance=neutral]:hover:not(:disabled, [data-disabled]) .label{
300
300
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
package/dist/esm/AiSuggestionParent/styles.module.css CHANGED
@@ -26,8 +26,8 @@
26
26
  flex-shrink:0;
27
27
  align-items:center;
28
28
  justify-content:center;
29
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
30
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
29
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
30
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
31
31
  color:currentcolor;
32
32
  }
33
33
 
@@ -45,7 +45,7 @@
45
45
  border-radius:var(--sn-primitive-dimension-full, 10000px);
46
46
  font-family:inherit;
47
47
  text-decoration:none;
48
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
48
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
49
49
  outline:0;
50
50
  outline-offset:0;
51
51
  transition:background-color 450ms cubic-bezier(1, 0, 0.26, 0.7), border-color 450ms cubic-bezier(1, 0, 0.26, 0.7), color 450ms cubic-bezier(1, 0, 0.26, 0.7), outline-color 120ms ease;
@@ -53,30 +53,30 @@
53
53
  .chip .icon,
54
54
  .chip .label,
55
55
  .chip .chevron{
56
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
56
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
57
57
  }
58
58
  .chip:disabled{
59
59
  cursor:not-allowed;
60
60
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
61
61
  }
62
62
  .chip:not(:disabled):focus-visible{
63
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
63
+ outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
64
64
  outline-offset:0;
65
65
  }
66
66
  .chip[data-activated]{
67
- border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
68
- background-color:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, var(--sn-brandRole-color-brandA-95, var(--sn-primitive-color-brandA-95, #f5fdf8))));
67
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
68
+ background-color:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
69
69
  transition:background-color 450ms cubic-bezier(0.7, 0.26, 0, 1.58), border-color 450ms cubic-bezier(0.7, 0.26, 0, 1.58), color 450ms cubic-bezier(0.7, 0.26, 0, 1.58), outline-color 120ms ease;
70
70
  }
71
71
  .chip[data-activated] .icon,
72
72
  .chip[data-activated] .label,
73
73
  .chip[data-activated] .chevron{
74
- color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
74
+ color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
75
75
  }
76
76
  @media (hover: hover){
77
77
  .chip[data-activated]:hover:not(:disabled){
78
- border-color:color-mix(in srgb, var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74)))) 80%, transparent);
79
- background-color:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, var(--sn-brandRole-color-brandA-99, var(--sn-primitive-color-brandA-99, #fbfffc))));
78
+ border-color:color-mix(in srgb, var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74)) 80%, transparent);
79
+ background-color:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #fbfffc));
80
80
  }
81
81
  }
82
82
  @media (hover: hover){
@@ -85,10 +85,10 @@
85
85
  }
86
86
  }
87
87
  .chip[data-size=s]{
88
- font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
88
+ font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
89
89
  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
90
- line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
91
- font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
90
+ line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-platform-comfort-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-20, 20px))));
91
+ font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-platform-comfort-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-14, 14px))));
92
92
  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
93
93
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
94
94
  height:var(--sn-primitive-dimension-32, 32px);
@@ -99,8 +99,8 @@
99
99
  flex-shrink:0;
100
100
  align-items:center;
101
101
  justify-content:center;
102
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
103
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
102
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
103
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
104
104
  }
105
105
  .chip[data-size=s] .icon > svg{
106
106
  display:block;
@@ -108,13 +108,13 @@
108
108
  height:100%;
109
109
  }
110
110
  .chip[data-size=s] .labelContainer{
111
- padding-inline:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-0, 0);
111
+ padding-inline:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-0, 0px);
112
112
  }
113
113
  .chip[data-size=m]{
114
- font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
114
+ font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
115
115
  font-weight:var(--sn-regular-label-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-l, var(--sn-brand-font-fontWeight-light-regular-label-l, var(--sn-primitive-font-fontWeightValue-550, 550))));
116
- line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
117
- font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
116
+ line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-platform-comfort-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-24, 24px))));
117
+ font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-platform-comfort-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-16, 16px))));
118
118
  letter-spacing:var(--sn-regular-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
119
119
  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
120
120
  height:var(--sn-primitive-dimension-40, 40px);
@@ -125,8 +125,8 @@
125
125
  flex-shrink:0;
126
126
  align-items:center;
127
127
  justify-content:center;
128
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
129
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
128
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
129
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
130
130
  }
131
131
  .chip[data-size=m] .icon > svg{
132
132
  display:block;
package/dist/esm/AiSuggestionSimple/styles.module.css CHANGED
@@ -33,14 +33,14 @@
33
33
  }
34
34
  .chip:focus-visible{
35
35
  background-color:transparent;
36
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
36
+ outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
37
37
  outline-offset:var(--sn-primitive-dimension-2, 2px);
38
38
  }
39
39
  .chip[data-size=s]{
40
- font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
40
+ font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
41
41
  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
42
- line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
43
- font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
42
+ line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-platform-comfort-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-20, 20px))));
43
+ font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-platform-comfort-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-14, 14px))));
44
44
  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
45
45
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
46
46
  height:var(--sn-primitive-dimension-32, 32px);
@@ -51,8 +51,8 @@
51
51
  flex-shrink:0;
52
52
  align-items:center;
53
53
  justify-content:center;
54
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
55
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
54
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
55
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
56
56
  }
57
57
  .chip[data-size=s] .icon > svg{
58
58
  max-width:100%;
@@ -62,10 +62,10 @@
62
62
  padding-inline:var(--sn-primitive-dimension-4, 4px);
63
63
  }
64
64
  .chip[data-size=m]{
65
- font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
65
+ font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
66
66
  font-weight:var(--sn-regular-label-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-l, var(--sn-brand-font-fontWeight-light-regular-label-l, var(--sn-primitive-font-fontWeightValue-550, 550))));
67
- line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
68
- font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
67
+ line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-platform-comfort-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-24, 24px))));
68
+ font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-platform-comfort-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-16, 16px))));
69
69
  letter-spacing:var(--sn-regular-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
70
70
  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
71
71
  height:var(--sn-primitive-dimension-40, 40px);
@@ -76,8 +76,8 @@
76
76
  flex-shrink:0;
77
77
  align-items:center;
78
78
  justify-content:center;
79
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
80
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
79
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
80
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
81
81
  }
82
82
  .chip[data-size=m] .icon > svg{
83
83
  max-width:100%;
@@ -90,16 +90,16 @@
90
90
  background-color:var(--sn-theme-color-primary-background1Level);
91
91
  }
92
92
  .chip[data-appearance=primary]{
93
- border-color:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
93
+ border-color:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
94
94
  }
95
95
  .chip[data-appearance=primary] .icon,
96
96
  .chip[data-appearance=primary] .label{
97
- color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
97
+ color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
98
98
  }
99
99
  @media (hover: hover){
100
100
  .chip[data-appearance=primary]:hover:not(:disabled, [data-disabled]){
101
- border-color:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
102
- background-color:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, var(--sn-brandRole-color-brandA-95, var(--sn-primitive-color-brandA-95, #f5fdf8))));
101
+ border-color:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
102
+ background-color:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
103
103
  }
104
104
  }
105
105
  .chip:focus-visible{
@@ -110,12 +110,12 @@
110
110
  }
111
111
  .chip[data-appearance=neutral] .icon,
112
112
  .chip[data-appearance=neutral] .label{
113
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
113
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
114
114
  }
115
115
  @media (hover: hover){
116
116
  .chip[data-appearance=neutral]:hover:not(:disabled, [data-disabled]){
117
117
  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
118
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
118
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
119
119
  }
120
120
  .chip[data-appearance=neutral]:hover:not(:disabled, [data-disabled]) .icon, .chip[data-appearance=neutral]:hover:not(:disabled, [data-disabled]) .label{
121
121
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
package/dist/esm/style.css CHANGED
@@ -49,8 +49,8 @@
49
49
  flex-shrink:0;
50
50
  align-items:center;
51
51
  justify-content:center;
52
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
53
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
52
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
53
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
54
54
  color:currentcolor;
55
55
  }
56
56
 
@@ -68,7 +68,7 @@
68
68
  border-radius:var(--sn-primitive-dimension-full, 10000px);
69
69
  font-family:inherit;
70
70
  text-decoration:none;
71
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
71
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
72
72
  outline:0;
73
73
  outline-offset:0;
74
74
  transition:background-color 450ms cubic-bezier(1, 0, 0.26, 0.7), border-color 450ms cubic-bezier(1, 0, 0.26, 0.7), color 450ms cubic-bezier(1, 0, 0.26, 0.7), outline-color 120ms ease;
@@ -76,30 +76,30 @@
76
76
  .chip .icon,
77
77
  .chip .label,
78
78
  .chip .chevron{
79
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
79
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
80
80
  }
81
81
  .chip:disabled{
82
82
  cursor:not-allowed;
83
83
  opacity:var(--sn-theme-effect-opacity-disabled, 0.4);
84
84
  }
85
85
  .chip:not(:disabled):focus-visible{
86
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
86
+ outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
87
87
  outline-offset:0;
88
88
  }
89
89
  .chip[data-activated]{
90
- border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
91
- background-color:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, var(--sn-brandRole-color-brandA-95, var(--sn-primitive-color-brandA-95, #f5fdf8))));
90
+ border-color:var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
91
+ background-color:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
92
92
  transition:background-color 450ms cubic-bezier(0.7, 0.26, 0, 1.58), border-color 450ms cubic-bezier(0.7, 0.26, 0, 1.58), color 450ms cubic-bezier(0.7, 0.26, 0, 1.58), outline-color 120ms ease;
93
93
  }
94
94
  .chip[data-activated] .icon,
95
95
  .chip[data-activated] .label,
96
96
  .chip[data-activated] .chevron{
97
- color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
97
+ color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
98
98
  }
99
99
  @media (hover: hover){
100
100
  .chip[data-activated]:hover:not(:disabled){
101
- border-color:color-mix(in srgb, var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74)))) 80%, transparent);
102
- background-color:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, var(--sn-brandRole-color-brandA-99, var(--sn-primitive-color-brandA-99, #fbfffc))));
101
+ border-color:color-mix(in srgb, var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74)) 80%, transparent);
102
+ background-color:var(--sn-theme-color-primary-background2Level, var(--sn-brand-color-primary-99, #fbfffc));
103
103
  }
104
104
  }
105
105
  @media (hover: hover){
@@ -108,10 +108,10 @@
108
108
  }
109
109
  }
110
110
  .chip[data-size=s]{
111
- font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
111
+ font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
112
112
  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
113
- line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
114
- font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
113
+ line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-platform-comfort-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-20, 20px))));
114
+ font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-platform-comfort-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-14, 14px))));
115
115
  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
116
116
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
117
117
  height:var(--sn-primitive-dimension-32, 32px);
@@ -122,8 +122,8 @@
122
122
  flex-shrink:0;
123
123
  align-items:center;
124
124
  justify-content:center;
125
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
126
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
125
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
126
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
127
127
  }
128
128
  .chip[data-size=s] .icon > svg{
129
129
  display:block;
@@ -131,13 +131,13 @@
131
131
  height:100%;
132
132
  }
133
133
  .chip[data-size=s] .labelContainer{
134
- padding-inline:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-0, 0);
134
+ padding-inline:var(--sn-primitive-dimension-4, 4px) var(--sn-primitive-dimension-0, 0px);
135
135
  }
136
136
  .chip[data-size=m]{
137
- font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
137
+ font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
138
138
  font-weight:var(--sn-regular-label-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-l, var(--sn-brand-font-fontWeight-light-regular-label-l, var(--sn-primitive-font-fontWeightValue-550, 550))));
139
- line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
140
- font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
139
+ line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-platform-comfort-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-24, 24px))));
140
+ font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-platform-comfort-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-16, 16px))));
141
141
  letter-spacing:var(--sn-regular-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
142
142
  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
143
143
  height:var(--sn-primitive-dimension-40, 40px);
@@ -148,8 +148,8 @@
148
148
  flex-shrink:0;
149
149
  align-items:center;
150
150
  justify-content:center;
151
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
152
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
151
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
152
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
153
153
  }
154
154
  .chip[data-size=m] .icon > svg{
155
155
  display:block;
@@ -212,14 +212,14 @@
212
212
  }
213
213
  .chip:focus-visible{
214
214
  background-color:transparent;
215
- outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-55, var(--sn-brandRole-color-brandA-55, var(--sn-primitive-color-brandA-55, #389f74))));
215
+ outline:var(--sn-primitive-strokeWeight-strokeSemiBold, 2px) solid var(--sn-theme-color-primary-accent, var(--sn-brand-color-primary-50, #389f74));
216
216
  outline-offset:var(--sn-primitive-dimension-2, 2px);
217
217
  }
218
218
  .chip[data-size=s]{
219
- font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
219
+ font-family:var(--sn-regular-label-m-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
220
220
  font-weight:var(--sn-regular-label-m-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-m, var(--sn-brand-font-fontWeight-light-regular-label-m, var(--sn-primitive-font-fontWeightValue-550, 550))));
221
- line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-by16, 24px)));
222
- font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-16, 16px)));
221
+ line-height:var(--sn-regular-label-m-lineHeight, var(--sn-density-typography-roleLabel-lineHeightM, var(--sn-platform-comfort-typography-roleLabel-lineHeightM, var(--sn-primitive-font-lineHeight-20, 20px))));
222
+ font-size:var(--sn-regular-label-m-fontSize, var(--sn-density-typography-roleLabel-fontSizeM, var(--sn-platform-comfort-typography-roleLabel-fontSizeM, var(--sn-primitive-font-fontSize-14, 14px))));
223
223
  letter-spacing:var(--sn-regular-label-m-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
224
224
  paragraph-spacing:var(--sn-regular-label-m-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize12, 6px));
225
225
  height:var(--sn-primitive-dimension-32, 32px);
@@ -230,8 +230,8 @@
230
230
  flex-shrink:0;
231
231
  align-items:center;
232
232
  justify-content:center;
233
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
234
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
233
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
234
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
235
235
  }
236
236
  .chip[data-size=s] .icon > svg{
237
237
  max-width:100%;
@@ -241,10 +241,10 @@
241
241
  padding-inline:var(--sn-primitive-dimension-4, 4px);
242
242
  }
243
243
  .chip[data-size=m]{
244
- font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, var(--sn-primitive-fontFamily-brandA-sans, SB Sans Interface)));
244
+ font-family:var(--sn-regular-label-l-fontFamily, var(--sn-brand-font-fontFamily-regular-label, SB Sans Interface));
245
245
  font-weight:var(--sn-regular-label-l-fontWeight, var(--sn-theme-typography-fontWeight-regular-label-l, var(--sn-brand-font-fontWeight-light-regular-label-l, var(--sn-primitive-font-fontWeightValue-550, 550))));
246
- line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-by20, 28px)));
247
- font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-20, 20px)));
246
+ line-height:var(--sn-regular-label-l-lineHeight, var(--sn-density-typography-roleLabel-lineHeightL, var(--sn-platform-comfort-typography-roleLabel-lineHeightL, var(--sn-primitive-font-lineHeight-24, 24px))));
247
+ font-size:var(--sn-regular-label-l-fontSize, var(--sn-density-typography-roleLabel-fontSizeL, var(--sn-platform-comfort-typography-roleLabel-fontSizeL, var(--sn-primitive-font-fontSize-16, 16px))));
248
248
  letter-spacing:var(--sn-regular-label-l-letterSpacing, var(--sn-primitive-font-letterSpacing-s, 0px));
249
249
  paragraph-spacing:var(--sn-regular-label-l-paragraphSpacing, var(--sn-primitive-font-paragraphSpacing-byFontSize14, 7px));
250
250
  height:var(--sn-primitive-dimension-40, 40px);
@@ -255,8 +255,8 @@
255
255
  flex-shrink:0;
256
256
  align-items:center;
257
257
  justify-content:center;
258
- width:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
259
- height:var(--sn-density-size-icon-s, var(--sn-primitive-dimension-24, 24px));
258
+ width:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
259
+ height:var(--sn-density-icon-s, var(--sn-platform-comfort-icon-s, var(--sn-primitive-dimension-24, 24px)));
260
260
  }
261
261
  .chip[data-size=m] .icon > svg{
262
262
  max-width:100%;
@@ -269,16 +269,16 @@
269
269
  background-color:var(--sn-theme-color-primary-background1Level);
270
270
  }
271
271
  .chip[data-appearance=primary]{
272
- border-color:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, var(--sn-brandRole-color-brandA-backgroundActivatedDefault, rgba(56, 159, 116, 0.1490196078))));
272
+ border-color:var(--sn-theme-color-material-stateLayer-activated-default-filled, var(--sn-brand-color-state-activated-default-background, rgba(56, 159, 116, 0.1019607843)));
273
273
  }
274
274
  .chip[data-appearance=primary] .icon,
275
275
  .chip[data-appearance=primary] .label{
276
- color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-45, var(--sn-brandRole-color-brandA-45, var(--sn-primitive-color-brandA-45, #22775b))));
276
+ color:var(--sn-theme-color-primary-text, var(--sn-brand-color-primary-40, #22775b));
277
277
  }
278
278
  @media (hover: hover){
279
279
  .chip[data-appearance=primary]:hover:not(:disabled, [data-disabled]){
280
- border-color:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, var(--sn-brandRole-color-brandA-backgroundActivatedHovered, rgba(56, 159, 116, 0.3490196078))));
281
- background-color:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, var(--sn-brandRole-color-brandA-95, var(--sn-primitive-color-brandA-95, #f5fdf8))));
280
+ border-color:var(--sn-theme-color-material-stateLayer-activated-hovered-filled, var(--sn-brand-color-state-activated-hovered-background, rgba(56, 159, 116, 0.2)));
281
+ background-color:var(--sn-theme-color-primary-background1Level, var(--sn-brand-color-primary-95, #f5fdf8));
282
282
  }
283
283
  }
284
284
  .chip:focus-visible{
@@ -289,12 +289,12 @@
289
289
  }
290
290
  .chip[data-appearance=neutral] .icon,
291
291
  .chip[data-appearance=neutral] .label{
292
- color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-45, var(--sn-primitive-color-gray-45, #81869c)));
292
+ color:var(--sn-theme-color-neutral-text, var(--sn-brand-color-neutral-40, var(--sn-brand-palette-gray-40, #81869c)));
293
293
  }
294
294
  @media (hover: hover){
295
295
  .chip[data-appearance=neutral]:hover:not(:disabled, [data-disabled]){
296
296
  border-color:var(--sn-theme-color-material-stateLayer-neutral-border-hovered-borderColor, var(--sn-brand-color-state-neutralBorder-forLightMode-hovered-borderColor, rgba(159, 166, 198, 0.6509803922)));
297
- background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-primitive-color-gray-95, #fdfdfd)));
297
+ background-color:var(--sn-theme-color-neutral-background1Level, var(--sn-brand-color-neutral-95, var(--sn-brand-palette-gray-95, #fdfdfd)));
298
298
  }
299
299
  .chip[data-appearance=neutral]:hover:not(:disabled, [data-disabled]) .icon, .chip[data-appearance=neutral]:hover:not(:disabled, [data-disabled]) .label{
300
300
  color:var(--sn-theme-color-available-version-textMain, var(--sn-brand-color-text-version-main, #41424e));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@cloud-ru/ds-ai-suggestion",
3
- "version": "1.0.5",
3
+ "version": "1.0.6-preview-a2208aeb.0",
4
4
  "description": "AI-подсказки — простой чип и раскрывающаяся группа с вложенными подсказками.",
5
5
  "repository": {
6
6
  "type": "git",
@@ -35,9 +35,9 @@
35
35
  "dependencies": {
36
36
  "classnames": "^2.5.1",
37
37
  "framer-motion": "^12.42.2",
38
- "@cloud-ru/ds-icons": "^1.2.0",
39
- "@cloud-ru/ds-materials": "^1.0.1",
40
- "@cloud-ru/ds-utils": "^1.1.0"
38
+ "@cloud-ru/ds-materials": "1.0.2-preview-a2208aeb.0",
39
+ "@cloud-ru/ds-icons": "1.2.1-preview-a2208aeb.0",
40
+ "@cloud-ru/ds-utils": "1.1.0"
41
41
  },
42
42
  "publishConfig": {
43
43
  "access": "public"
package/src/AiSuggestionParent/styles.module.scss CHANGED
@@ -24,7 +24,7 @@ $label-padding-inline-end: (
24
24
  'm': base.$sn-primitive-dimension-2,
25
25
  );
26
26
 
27
- $icon-size: base.$sn-density-size-icon-s;
27
+ $icon-size: base.$sn-density-icon-s;
28
28
 
29
29
  $outline-transition-duration: 120ms;
30
30
  $parent-transition-duration: 450ms;
package/src/AiSuggestionSimple/styles.module.scss CHANGED
@@ -20,7 +20,7 @@ $chip-padding-inline: (
20
20
  'm': base.$sn-primitive-dimension-8,
21
21
  );
22
22
 
23
- $icon-size: base.$sn-density-size-icon-s;
23
+ $icon-size: base.$sn-density-icon-s;
24
24
 
25
25
  $chip-interaction-transition-duration: 120ms;
26
26
  $chip-interaction-transition: