@snack-uikit/color-picker 0.1.3-preview-ba12ca94.0 → 0.3.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 (4) hide show
  1. package/CHANGELOG.md +22 -0
  2. package/package.json +7 -7
  3. package/src/components/styles.module.scss +11 -11
  4. package/src/helperComponents/FieldPrivate/styles.module.scss +23 -25
package/CHANGELOG.md CHANGED
@@ -3,6 +3,28 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # 0.3.0 (2024-10-28)
7
+
8
+
9
+ ### Features
10
+
11
+ * **FF-5782:** sass use/forward approach ([3e53869](https://github.com/cloud-ru-tech/snack-uikit/commit/3e53869ace864a7718e434b7f410c15dbd911cd5))
12
+
13
+
14
+
15
+
16
+
17
+ # 0.2.0 (2024-10-28)
18
+
19
+
20
+ ### Features
21
+
22
+ * **FF-5502:** add cjs build ([ffada28](https://github.com/cloud-ru-tech/snack-uikit/commit/ffada28bfdc37ea760eb1c8759342e680bdf8dd6))
23
+
24
+
25
+
26
+
27
+
6
28
  ## 0.1.2 (2024-10-16)
7
29
 
8
30
  ### Only dependencies have been changed
package/package.json CHANGED
@@ -4,7 +4,7 @@
4
4
  "access": "public"
5
5
  },
6
6
  "title": "Color Picker",
7
- "version": "0.1.3-preview-ba12ca94.0",
7
+ "version": "0.3.0",
8
8
  "sideEffects": [
9
9
  "*.css",
10
10
  "*.woff",
@@ -36,11 +36,11 @@
36
36
  "license": "Apache-2.0",
37
37
  "scripts": {},
38
38
  "dependencies": {
39
- "@snack-uikit/button": "0.17.6-preview-ba12ca94.0",
40
- "@snack-uikit/icons": "0.22.2-preview-ba12ca94.0",
41
- "@snack-uikit/input-private": "4.0.1-preview-ba12ca94.0",
42
- "@snack-uikit/segmented-control": "0.2.5-preview-ba12ca94.0",
43
- "@snack-uikit/utils": "3.4.1-preview-ba12ca94.0",
39
+ "@snack-uikit/button": "0.19.0",
40
+ "@snack-uikit/icons": "0.24.0",
41
+ "@snack-uikit/input-private": "4.2.0",
42
+ "@snack-uikit/segmented-control": "0.4.0",
43
+ "@snack-uikit/utils": "3.5.0",
44
44
  "react-colorful": "5.6.1"
45
45
  },
46
46
  "devDependencies": {
@@ -49,5 +49,5 @@
49
49
  "peerDependencies": {
50
50
  "@snack-uikit/locale": "*"
51
51
  },
52
- "gitHead": "9ac0a3e5e530c09fa4dc050f9bc08d1849962129"
52
+ "gitHead": "8499829efa0c118b704de17411ae2328a024adb5"
53
53
  }
package/src/components/styles.module.scss CHANGED
@@ -1,11 +1,11 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-scroll';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-colorPicker';
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-scroll';
2
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-colorPicker';
3
3
 
4
4
  $orientations: 'vertical', 'horizontal';
5
5
  $sizes: 's', 'm';
6
6
 
7
7
  .container {
8
- @include composite-var($color-picker-container);
8
+ @include styles-tokens-scroll.composite-var(styles-tokens-colorPicker.$color-picker-container);
9
9
 
10
10
  display: flex;
11
11
  flex-direction: column;
@@ -18,13 +18,13 @@ $sizes: 's', 'm';
18
18
  justify-content: space-between;
19
19
 
20
20
  box-sizing: border-box;
21
- padding-top: $space-color-picker-footer-gap;
21
+ padding-top: styles-tokens-scroll.$space-color-picker-footer-gap;
22
22
 
23
- border-top: solid 1px $sys-neutral-decor-default;
23
+ border-top: solid 1px styles-tokens-scroll.$sys-neutral-decor-default;
24
24
  }
25
25
 
26
26
  .colorModel {
27
- @include composite-var($color-picker-color-model);
27
+ @include styles-tokens-scroll.composite-var(styles-tokens-colorPicker.$color-picker-color-model);
28
28
 
29
29
  display: flex;
30
30
  flex-direction: column;
@@ -32,7 +32,7 @@ $sizes: 's', 'm';
32
32
  }
33
33
 
34
34
  .colorFields {
35
- @include composite-var($color-picker-color-model);
35
+ @include styles-tokens-scroll.composite-var(styles-tokens-colorPicker.$color-picker-color-model);
36
36
 
37
37
  display: grid;
38
38
  grid-template-columns: repeat(3, 1fr);
@@ -56,7 +56,7 @@ $scrollbar-slider-active-zone: 12px;
56
56
  /* stylelint-disable-next-line selector-pseudo-class-no-unknown */
57
57
  :global {
58
58
  .#{$theme-name} .react-colorful {
59
- @include composite-var($color-picker-color-palette);
59
+ @include styles-tokens-scroll.composite-var(styles-tokens-colorPicker.$color-picker-color-palette);
60
60
 
61
61
  width: 100%;
62
62
  min-height: 200px;
@@ -67,16 +67,16 @@ $scrollbar-slider-active-zone: 12px;
67
67
  }
68
68
 
69
69
  .react-colorful__pointer {
70
- @include composite-var($color-picker-color-slider);
70
+ @include styles-tokens-scroll.composite-var(styles-tokens-colorPicker.$color-picker-color-slider);
71
71
 
72
72
  /* stylelint-disable-next-line color-no-hex */
73
73
  border-color: #fff;
74
- box-shadow: $box-shadow-elevation-level3;
74
+ box-shadow: styles-tokens-scroll.$box-shadow-elevation-level3;
75
75
  }
76
76
 
77
77
  .react-colorful__hue,
78
78
  .react-colorful__alpha {
79
- @include composite-var($color-picker-slider-track);
79
+ @include styles-tokens-scroll.composite-var(styles-tokens-colorPicker.$color-picker-slider-track);
80
80
  }
81
81
  }
82
82
  }
package/src/helperComponents/FieldPrivate/styles.module.scss CHANGED
@@ -1,29 +1,27 @@
1
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
2
- @import '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
3
-
4
- /* stylelint-disable no-descending-specificity */
1
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-fields';
2
+ @use '@snack-uikit/figma-tokens/build/scss/components/styles-tokens-element';
5
3
 
6
4
  $sizes: 's', 'm', 'l';
7
5
  $variants: 'single-line-container', 'multi-line-container';
8
6
 
9
7
  @mixin validationState($rainbowColor, $bgDefault) {
10
- background-color: simple-var($theme-variables, 'sys', $bgDefault, 'background1-level');
11
- border-color: simple-var($theme-variables, 'sys', $bgDefault, 'decor-default');
8
+ background-color: styles-tokens-fields.simple-var(styles-tokens-fields.$theme-variables, 'sys', $bgDefault, 'background1-level');
9
+ border-color: styles-tokens-fields.simple-var(styles-tokens-fields.$theme-variables, 'sys', $bgDefault, 'decor-default');
12
10
 
13
11
  &:hover {
14
- background-color: $sys-neutral-background2-level;
15
- border-color: simple-var($theme-variables, 'sys', $rainbowColor, 'decor-hovered');
12
+ background-color: styles-tokens-fields.$sys-neutral-background2-level;
13
+ border-color: styles-tokens-fields.simple-var(styles-tokens-fields.$theme-variables, 'sys', $rainbowColor, 'decor-hovered');
16
14
  }
17
15
 
18
16
  &:not([data-readonly]) {
19
17
  &:focus-within,
20
18
  &[data-focused] {
21
19
  &:not([data-disabled]) {
22
- @include outline-var($container-focused-m);
20
+ @include styles-tokens-fields.outline-var(styles-tokens-element.$container-focused-m);
23
21
 
24
- background-color: simple-var($sys-neutral-background2-level);
25
- border-color: simple-var($theme-variables, 'sys', $rainbowColor, 'accent-default');
26
- outline-color: simple-var($theme-variables, 'sys', $rainbowColor, 'decor-activated');
22
+ background-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-background2-level);
23
+ border-color: styles-tokens-fields.simple-var(styles-tokens-fields.$theme-variables, 'sys', $rainbowColor, 'accent-default');
24
+ outline-color: styles-tokens-fields.simple-var(styles-tokens-fields.$theme-variables, 'sys', $rainbowColor, 'decor-activated');
27
25
  }
28
26
  }
29
27
  }
@@ -68,16 +66,16 @@ $variants: 'single-line-container', 'multi-line-container';
68
66
 
69
67
  &,
70
68
  &:hover {
71
- background-color: simple-var($sys-neutral-decor-disabled);
72
- border-color: simple-var($sys-neutral-decor-disabled);
69
+ background-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-decor-disabled);
70
+ border-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-decor-disabled);
73
71
  }
74
72
 
75
73
  &:focus-within,
76
74
  &[data-focused] {
77
- @include outline-var($container-focused-m);
75
+ @include styles-tokens-fields.outline-var(styles-tokens-element.$container-focused-m);
78
76
 
79
- background-color: simple-var($sys-neutral-decor-disabled);
80
- border-color: simple-var($sys-neutral-decor-disabled);
77
+ background-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-decor-disabled);
78
+ border-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-decor-disabled);
81
79
  outline: none;
82
80
  }
83
81
  }
@@ -89,34 +87,34 @@ $variants: 'single-line-container', 'multi-line-container';
89
87
  textarea,
90
88
  span {
91
89
  cursor: not-allowed;
92
- background-color: simple-var($sys-neutral-background);
90
+ background-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-background);
93
91
  }
94
92
 
95
93
  &,
96
94
  &:focus-within,
97
95
  &[data-focused],
98
96
  &:hover {
99
- background-color: simple-var($sys-neutral-background);
100
- border-color: simple-var($sys-neutral-decor-disabled);
97
+ background-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-background);
98
+ border-color: styles-tokens-fields.simple-var(styles-tokens-fields.$sys-neutral-decor-disabled);
101
99
  outline: none;
102
100
  }
103
101
  }
104
102
 
105
103
  @each $size in $sizes {
106
104
  &[data-size='#{$size}'] {
107
- @include composite-var($fields, 'container', $size);
105
+ @include styles-tokens-fields.composite-var(styles-tokens-fields.$fields, 'container', $size);
108
106
 
109
107
  &,
110
108
  input,
111
109
  select,
112
110
  textarea,
113
111
  span {
114
- @include composite-var($theme-variables, 'sans', 'body', $size);
112
+ @include styles-tokens-fields.composite-var(styles-tokens-fields.$theme-variables, 'sans', 'body', $size);
115
113
  }
116
114
 
117
115
  @each $variant in $variants {
118
116
  &[data-variant='#{$variant}'] {
119
- @include composite-var($fields, $variant, $size);
117
+ @include styles-tokens-fields.composite-var(styles-tokens-fields.$fields, $variant, $size);
120
118
  }
121
119
  }
122
120
  }
@@ -126,11 +124,11 @@ $variants: 'single-line-container', 'multi-line-container';
126
124
  .prefix {
127
125
  display: inline-flex;
128
126
  flex-shrink: 0;
129
- color: $sys-neutral-text-disabled;
127
+ color: styles-tokens-fields.$sys-neutral-text-disabled;
130
128
  }
131
129
 
132
130
  .postfix {
133
131
  display: inline-flex;
134
132
  flex-shrink: 0;
135
- gap: $space-fields-postfix-gap;
133
+ gap: styles-tokens-fields.$space-fields-postfix-gap;
136
134
  }