@snack-uikit/status 0.5.0 → 0.5.1-preview-993a9cfb.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 (6) hide show
  1. package/dist/components/Status/Status.js +1 -1
  2. package/dist/components/Status/styles.module.css +12 -12
  3. package/dist/components/StatusIndicator/StatusIndicator.js +1 -1
  4. package/dist/components/StatusIndicator/styles.module.css +19 -19
  5. package/package.json +2 -2
  6. package/src/components/Status/styles.module.scss +1 -1
package/dist/components/Status/Status.js CHANGED
@@ -18,5 +18,5 @@ import { SIZE, STATUS_INDICATOR_SIZE_MAP } from './constants';
18
18
  import styles from './styles.module.css';
19
19
  export function Status(_a) {
20
20
  var { label, size = SIZE.Xs, appearance = APPEARANCE.Primary, hasBackground, className } = _a, rest = __rest(_a, ["label", "size", "appearance", "hasBackground", "className"]);
21
- return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-size": size, "data-has-background": hasBackground || undefined }, { children: [_jsx(StatusIndicator, { appearance: appearance, size: STATUS_INDICATOR_SIZE_MAP[size] }), _jsx("span", Object.assign({ className: styles.label }, { children: label }))] })));
21
+ return (_jsxs("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-size": size, "data-has-background": hasBackground || undefined, children: [_jsx(StatusIndicator, { appearance: appearance, size: STATUS_INDICATOR_SIZE_MAP[size] }), _jsx("span", { className: styles.label, children: label })] })));
22
22
  }
package/dist/components/Status/styles.module.css CHANGED
@@ -3,24 +3,24 @@
3
3
  align-items:center;
4
4
  }
5
5
  .container[data-has-background]{
6
- background-color:var(--sys-neutral-decor-default, #dedede);
6
+ background-color:var(--sys-neutral-decor-default, #dfe2ec);
7
7
  }
8
8
  .container[data-has-background][data-size=xs]{
9
- height:var(--dimension-theme-general-16px, 16px);
10
- padding-right:var(--dimension-theme-general-4px, 4px);
11
- padding-left:var(--dimension-theme-general-4px, 4px);
12
- gap:var(--dimension-theme-general-2px, 2px);
9
+ height:var(--size-status-background-container-xs, 16px);
10
+ padding-right:var(--spacing-status-background-container-padding-right-xs, 4px);
11
+ padding-left:var(--spacing-status-background-container-padding-left-xs, 4px);
12
+ gap:var(--spacing-status-container-gap-single, 2px);
13
13
  border-radius:var(--radius-status-xs, 6px);
14
14
  }
15
15
  .container[data-has-background][data-size=s]{
16
- height:var(--dimension-theme-general-24px, 24px);
17
- padding-right:var(--dimension-theme-general-8px, 8px);
18
- padding-left:var(--dimension-theme-general-4px, 4px);
19
- gap:var(--dimension-theme-general-2px, 2px);
16
+ height:var(--size-status-background-container-s, 24px);
17
+ padding-right:var(--spacing-status-background-container-padding-right-s, 8px);
18
+ padding-left:var(--spacing-status-background-container-padding-left-s, 4px);
19
+ gap:var(--spacing-status-container-gap-single, 2px);
20
20
  border-radius:var(--radius-status-s, 8px);
21
21
  }
22
22
  .container[data-size=xs]{
23
- gap:var(--dimension-theme-general-2px, 2px);
23
+ gap:var(--spacing-status-container-gap-single, 2px);
24
24
  }
25
25
  .container[data-size=xs] .label{
26
26
  font-family:var(--sans-label-s-font-family, SB Sans Interface);
@@ -31,7 +31,7 @@
31
31
  paragraph-spacing:var(--sans-label-s-paragraph-spacing, 6.05px);
32
32
  }
33
33
  .container[data-size=s]{
34
- gap:var(--dimension-theme-general-2px, 2px);
34
+ gap:var(--spacing-status-container-gap-single, 2px);
35
35
  }
36
36
  .container[data-size=s] .label{
37
37
  font-family:var(--sans-label-m-font-family, SB Sans Interface);
@@ -43,5 +43,5 @@
43
43
  }
44
44
 
45
45
  .label{
46
- color:var(--sys-neutral-text-support, #565656);
46
+ color:var(--sys-neutral-text-support, #656771);
47
47
  }
package/dist/components/StatusIndicator/StatusIndicator.js CHANGED
@@ -17,5 +17,5 @@ import { SIZE } from './constants';
17
17
  import styles from './styles.module.css';
18
18
  export function StatusIndicator(_a) {
19
19
  var { size = SIZE.M, appearance = APPEARANCE.Primary, className } = _a, rest = __rest(_a, ["size", "appearance", "className"]);
20
- return (_jsx("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-size": size }, { children: _jsx("div", { className: styles.indicator, "data-appearance": appearance }) })));
20
+ return (_jsx("div", Object.assign({ className: cn(styles.container, className) }, extractSupportProps(rest), { "data-size": size, children: _jsx("div", { className: styles.indicator, "data-appearance": appearance }) })));
21
21
  }
package/dist/components/StatusIndicator/styles.module.css CHANGED
@@ -4,8 +4,8 @@
4
4
  justify-content:center;
5
5
  }
6
6
  .container[data-size=xxs]{
7
- width:var(--dimension-theme-general-4px, 4px);
8
- height:var(--dimension-theme-general-4px, 4px);
7
+ width:var(--size-status-indicator-container-xxs, 4px);
8
+ height:var(--size-status-indicator-container-xxs, 4px);
9
9
  }
10
10
  .container[data-size=xxs] .indicator{
11
11
  border-radius:var(--radius-status-indicator-xxs, 2px);
@@ -14,8 +14,8 @@
14
14
  height:var(--size-status-indicator-xxs, 4px);
15
15
  }
16
16
  .container[data-size=xs]{
17
- width:var(--dimension-theme-general-8px, 8px);
18
- height:var(--dimension-theme-general-8px, 8px);
17
+ width:var(--size-status-indicator-container-xs, 8px);
18
+ height:var(--size-status-indicator-container-xs, 8px);
19
19
  }
20
20
  .container[data-size=xs] .indicator{
21
21
  border-radius:var(--radius-status-indicator-xs, 4px);
@@ -24,8 +24,8 @@
24
24
  height:var(--size-status-indicator-xs, 8px);
25
25
  }
26
26
  .container[data-size=s]{
27
- width:var(--dimension-theme-general-16px, 16px);
28
- height:var(--dimension-theme-general-16px, 16px);
27
+ width:var(--size-status-indicator-container-s, 16px);
28
+ height:var(--size-status-indicator-container-s, 16px);
29
29
  }
30
30
  .container[data-size=s] .indicator{
31
31
  border-radius:var(--radius-status-indicator-s, 8px);
@@ -34,8 +34,8 @@
34
34
  height:var(--size-status-indicator-s, 12px);
35
35
  }
36
36
  .container[data-size=m]{
37
- width:var(--dimension-theme-general-16px, 16px);
38
- height:var(--dimension-theme-general-16px, 16px);
37
+ width:var(--size-status-indicator-container-m, 16px);
38
+ height:var(--size-status-indicator-container-m, 16px);
39
39
  }
40
40
  .container[data-size=m] .indicator{
41
41
  border-radius:var(--radius-status-indicator-m, 8px);
@@ -44,8 +44,8 @@
44
44
  height:var(--size-status-indicator-m, 16px);
45
45
  }
46
46
  .container[data-size=l]{
47
- width:var(--dimension-theme-general-24px, 24px);
48
- height:var(--dimension-theme-general-24px, 24px);
47
+ width:var(--size-status-indicator-container-l, 24px);
48
+ height:var(--size-status-indicator-container-l, 24px);
49
49
  }
50
50
  .container[data-size=l] .indicator{
51
51
  border-radius:var(--radius-status-indicator-l, 16px);
@@ -56,32 +56,32 @@
56
56
 
57
57
  .indicator{
58
58
  box-sizing:border-box;
59
- border:0 solid var(--sys-neutral-background1-level, #f9f9f9);
59
+ border:0 solid var(--sys-neutral-background1-level, #fafafc);
60
60
  }
61
61
  .indicator[data-appearance=primary]{
62
62
  background-color:var(--sys-primary-accent-default, #794ed3);
63
63
  }
64
64
  .indicator[data-appearance=neutral]{
65
- background-color:var(--sys-neutral-accent-default, #757575);
65
+ background-color:var(--sys-neutral-accent-default, #6f717c);
66
66
  }
67
67
  .indicator[data-appearance=red]{
68
- background-color:var(--sys-red-accent-default, #d93f2f);
68
+ background-color:var(--sys-red-accent-default, #cd3c3c);
69
69
  }
70
70
  .indicator[data-appearance=orange]{
71
- background-color:var(--sys-orange-accent-default, #fd8f1a);
71
+ background-color:var(--sys-orange-accent-default, #ff8b37);
72
72
  }
73
73
  .indicator[data-appearance=yellow]{
74
- background-color:var(--sys-yellow-accent-default, #feb528);
74
+ background-color:var(--sys-yellow-accent-default, #fdca46);
75
75
  }
76
76
  .indicator[data-appearance=green]{
77
- background-color:var(--sys-green-accent-default, #0bbe8f);
77
+ background-color:var(--sys-green-accent-default, #57b762);
78
78
  }
79
79
  .indicator[data-appearance=blue]{
80
- background-color:var(--sys-blue-accent-default, #3280e8);
80
+ background-color:var(--sys-blue-accent-default, #5388d1);
81
81
  }
82
82
  .indicator[data-appearance=violet]{
83
- background-color:var(--sys-violet-accent-default, #bc52bf);
83
+ background-color:var(--sys-violet-accent-default, #b468b5);
84
84
  }
85
85
  .indicator[data-appearance=pink]{
86
- background-color:var(--sys-pink-accent-default, #e14487);
86
+ background-color:var(--sys-pink-accent-default, #d1668e);
87
87
  }
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Status",
7
- "version": "0.5.0",
7
+ "version": "0.5.1-preview-993a9cfb.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -35,5 +35,5 @@
35
35
  "@snack-uikit/utils": "3.2.0",
36
36
  "classnames": "2.3.2"
37
37
  },
38
- "gitHead": "bd39c5e674f3b91b0e2487782a04b15034cf3d8b"
38
+ "gitHead": "a421965dc78af63a8c292e595b3f0a8ff1be86f9"
39
39
  }
package/src/components/Status/styles.module.scss CHANGED
@@ -1,10 +1,10 @@
1
1
  @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-status';
2
2
 
3
- $sizes: 'xs', 's';
4
3
  $label-typography: (
5
4
  'xs': $sans-label-s,
6
5
  's': $sans-label-m
7
6
  );
7
+ $sizes: 'xs', 's';
8
8
 
9
9
  .container {
10
10
  display: inline-flex;