@omnisass/library 0.2.0 → 2026.1.0-alpha.1
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.
- package/.editorconfig +13 -0
- package/.omnisass/scripts/bump-version.sh +288 -0
- package/.sassdoc.yaml +21 -0
- package/.vscode/settings.json +17 -0
- package/_configs.scss +10 -45
- package/index.scss +5 -91
- package/modules/utilities/converters/_convert-em2px.scss +3 -49
- package/modules/utilities/converters/_convert-hex2rgb.scss +2 -44
- package/modules/utilities/converters/_convert-hex2rgba.scss +2 -57
- package/modules/utilities/converters/_convert-px2em.scss +3 -62
- package/modules/utilities/converters/_convert-px2rem.scss +3 -62
- package/modules/utilities/converters/_convert-rem2px.scss +3 -62
- package/modules/utilities/converters/_index.scss +10 -0
- package/modules/utilities/getters/_index.scss +23 -0
- package/modules/utilities/getters/color/_get-color-brightness.scss +2 -48
- package/modules/utilities/getters/color/_get-color-darkest.scss +13 -68
- package/modules/utilities/getters/list/_get-list-item-end.scss +2 -29
- package/modules/utilities/getters/list/_get-list-item-start.scss +2 -29
- package/modules/utilities/getters/list/_get-list-item.scss +6 -82
- package/modules/utilities/getters/number/_get-number-from-percent.scss +2 -40
- package/modules/utilities/getters/number/_get-number-height-by-ratio.scss +3 -35
- package/modules/utilities/getters/number/_get-number-max-safe.scss +112 -0
- package/modules/utilities/getters/number/_get-number-max.scss +10 -88
- package/modules/utilities/getters/number/_get-number-min-safe.scss +114 -0
- package/modules/utilities/getters/number/_get-number-min.scss +9 -84
- package/modules/utilities/getters/number/_get-number-percentage-of.scss +2 -58
- package/modules/utilities/getters/number/_get-number-unit.scss +5 -46
- package/modules/utilities/getters/number/_get-number-width-by-ratio.scss +3 -56
- package/modules/utilities/helpers/_index.scss +44 -0
- package/modules/utilities/helpers/color/_color-blend-steps.scss +5 -89
- package/modules/utilities/helpers/color/_color-blend.scss +11 -85
- package/modules/utilities/helpers/color/_color-hue-shift.scss +7 -61
- package/modules/utilities/helpers/color/_color-scale.scss +7 -74
- package/modules/utilities/helpers/color/_color-shade.scss +2 -60
- package/modules/utilities/helpers/color/_color-tint.scss +2 -60
- package/modules/utilities/helpers/color/_color-triad.scss +9 -53
- package/modules/utilities/helpers/list/_list-dedupe.scss +9 -50
- package/modules/utilities/helpers/list/_list-insert-at.scss +16 -86
- package/modules/utilities/helpers/list/_list-merge.scss +1 -1
- package/modules/utilities/helpers/list/_list-remove-at.scss +9 -71
- package/modules/utilities/helpers/list/_list-sum-numbers-safe.scss +17 -81
- package/modules/utilities/helpers/list/_list-sum-numbers.scss +9 -57
- package/modules/utilities/helpers/number/_number-ceil-to.scss +1 -1
- package/modules/utilities/helpers/number/_number-clamp-max.scss +1 -1
- package/modules/utilities/helpers/number/_number-clamp-min.scss +1 -1
- package/modules/utilities/helpers/number/_number-clamp.scss +1 -1
- package/modules/utilities/helpers/number/_number-denormalize.scss +1 -1
- package/modules/utilities/helpers/number/_number-fibonacci.scss +2 -2
- package/modules/utilities/helpers/number/_number-floor-to.scss +1 -1
- package/modules/utilities/helpers/number/_number-format-with-separator.scss +4 -4
- package/modules/utilities/helpers/number/_number-normalize.scss +1 -1
- package/modules/utilities/helpers/number/_number-random-between-int.scss +1 -1
- package/modules/utilities/helpers/number/_number-random-between.scss +1 -1
- package/modules/utilities/helpers/number/_number-range.scss +7 -7
- package/modules/utilities/helpers/number/_number-round-to-nearest.scss +1 -1
- package/modules/utilities/helpers/number/_number-round-to.scss +1 -1
- package/modules/utilities/helpers/number/_number-strip-unit.scss +2 -14
- package/modules/utilities/helpers/string/_string-capitalize.scss +1 -1
- package/modules/utilities/helpers/string/_string-replace.scss +1 -1
- package/modules/utilities/helpers/string/_string-trim-end.scss +2 -2
- package/modules/utilities/helpers/string/_string-trim-start.scss +2 -2
- package/modules/utilities/helpers/string/_string-trim.scss +1 -1
- package/modules/utilities/loggers/_index.scss +6 -0
- package/modules/utilities/validators/_index.scss +38 -0
- package/modules/utilities/validators/{misc/_is-time.scss → _is-time.scss} +2 -2
- package/modules/utilities/validators/color/_is-color-light.scss +1 -1
- package/modules/utilities/validators/color/_is-color-list.scss +1 -1
- package/modules/utilities/validators/list/_is-list-contained.scss +1 -1
- package/modules/utilities/validators/number/_is-int-even.scss +1 -1
- package/modules/utilities/validators/number/_is-int-odd.scss +1 -1
- package/modules/utilities/validators/number/_is-int.scss +1 -1
- package/modules/utilities/validators/number/_is-number-has-unit.scss +1 -1
- package/modules/utilities/validators/number/_is-number-negative.scss +1 -1
- package/modules/utilities/validators/number/_is-number-positive.scss +1 -1
- package/modules/utilities/validators/number/_is-number-unitless.scss +1 -1
- package/modules/utilities/validators/number/_is-number-zero.scss +1 -1
- package/modules/utilities/validators/string/_is-string-contained.scss +25 -25
- package/modules/utilities/validators/string/_is-string-empty.scss +1 -1
- package/modules/utilities/validators/string/_is-string-ending-with.scss +1 -1
- package/modules/utilities/validators/string/_is-string-starting-with.scss +1 -1
- package/modules/utilities/validators/type-of/_is-boolean.scss +1 -1
- package/modules/utilities/validators/type-of/_is-color.scss +1 -1
- package/modules/utilities/validators/type-of/_is-list.scss +1 -1
- package/modules/utilities/validators/type-of/_is-map.scss +1 -1
- package/modules/utilities/validators/type-of/_is-number.scss +1 -1
- package/modules/utilities/validators/type-of/_is-string.scss +1 -1
- package/modules/utilities/validators/type-of/_is-type.scss +1 -1
- package/package.json +5 -6
- package/package.scss +3 -3
- package/playground/index.scss +8 -0
- package/modules/utilities/converters/_convert-camel2kebab.scss +0 -186
- package/modules/utilities/converters/_convert-kebab2camel.scss +0 -232
- package/modules/utilities/converters/_convert-kebab2snake.scss +0 -118
- package/modules/utilities/converters/_convert-snake2kebab.scss +0 -173
- package/modules/utilities/helpers/misc/_url-encode.configs.scss +0 -64
- package/modules/utilities/helpers/misc/_url-encode.scss +0 -148
- package/modules/utilities/loggers/_log-invalid-type.scss +0 -151
- package/modules/utilities/loggers/_log-invalid-value.scss +0 -151
- package/test.md +0 -168
- package/test.scss +0 -405
- package/test.sh +0 -149
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
@use 'sass:color';
|
|
2
|
-
@use '../../loggers/log-invalid-type' as *;
|
|
3
|
-
@use '../../validators/type-of/is-color' as *;
|
|
4
|
-
@use '../../validators/type-of/is-number' as *;
|
|
5
2
|
|
|
6
3
|
/// Поворачивает цветовой тон (hue) цвета на заданное
|
|
7
4
|
/// количество градусов.
|
|
@@ -23,7 +20,7 @@
|
|
|
23
20
|
/// ---
|
|
24
21
|
/// @name color-hue-shift
|
|
25
22
|
/// @group utilities-helpers
|
|
26
|
-
/// @since
|
|
23
|
+
/// @since 0.0.1
|
|
27
24
|
/// @access public
|
|
28
25
|
/// @author Murad Rustamov (therteenten)
|
|
29
26
|
/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
|
|
@@ -86,63 +83,12 @@
|
|
|
86
83
|
/// насыщенности и светлоты.
|
|
87
84
|
@function color-hue-shift($color, $degrees) {
|
|
88
85
|
|
|
89
|
-
|
|
90
|
-
// Функция is-color() проверяет, является ли $color валидным цветом CSS.
|
|
91
|
-
@if not is-color($color) {
|
|
86
|
+
$-new-hue: (color.channel($color, "hue", $space: hsl) + $degrees) % 360;
|
|
92
87
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
$color,
|
|
99
|
-
'$color',
|
|
100
|
-
'color'
|
|
101
|
-
);
|
|
102
|
-
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
// Проверка типа второго параметра: ожидается числовое значение
|
|
106
|
-
// угла поворота в градусах. Положительные значения вращают цвет
|
|
107
|
-
// по часовой стрелке на цветовом круге, отрицательные - против.
|
|
108
|
-
@else if not is-number($degrees) {
|
|
109
|
-
|
|
110
|
-
// Если $degrees не является числом, возвращаем ошибку.
|
|
111
|
-
@return log-invalid-type(
|
|
112
|
-
'color-hue-shift',
|
|
113
|
-
$degrees,
|
|
114
|
-
'$degrees',
|
|
115
|
-
'number'
|
|
116
|
-
);
|
|
117
|
-
|
|
118
|
-
}
|
|
119
|
-
|
|
120
|
-
// Все параметры прошли валидацию - выполняем изменение оттенка.
|
|
121
|
-
@else {
|
|
122
|
-
|
|
123
|
-
// Вычисление нового значения оттенка (hue).
|
|
124
|
-
// Формула: (текущий оттенок + угол поворота) по модулю 360.
|
|
125
|
-
// Оператор % 360 гарантирует, что результат всегда будет
|
|
126
|
-
// в диапазоне от 0 до 359 градусов (цветовой круг).
|
|
127
|
-
// color.channel() извлекает компонент оттенка из цвета
|
|
128
|
-
// в пространстве HSL.
|
|
129
|
-
$-new-hue: (color.channel($color, "hue", $space: hsl) + $degrees) % 360;
|
|
130
|
-
|
|
131
|
-
// Создание нового цвета с измененным оттенком.
|
|
132
|
-
// Используем функцию hsl() для создания цвета в формате HSL.
|
|
133
|
-
// Компоненты:
|
|
134
|
-
// - $-new-hue: новый оттенок после поворота
|
|
135
|
-
// - saturation: насыщенность исходного цвета (сохраняется)
|
|
136
|
-
// - lightness: яркость исходного цвета (сохраняется)
|
|
137
|
-
//
|
|
138
|
-
// Таким образом, меняется только положение цвета на
|
|
139
|
-
// цветовом круге, сохраняя его насыщенность и яркость.
|
|
140
|
-
@return hsl(
|
|
141
|
-
$-new-hue,
|
|
142
|
-
color.channel($color, "saturation", $space: hsl),
|
|
143
|
-
color.channel($color, "lightness", $space: hsl)
|
|
144
|
-
);
|
|
145
|
-
|
|
146
|
-
}
|
|
88
|
+
@return hsl(
|
|
89
|
+
$-new-hue,
|
|
90
|
+
color.channel($color, "saturation", $space: hsl),
|
|
91
|
+
color.channel($color, "lightness", $space: hsl)
|
|
92
|
+
);
|
|
147
93
|
|
|
148
94
|
}
|
|
@@ -2,9 +2,6 @@
|
|
|
2
2
|
@use 'sass:list';
|
|
3
3
|
@use 'sass:math';
|
|
4
4
|
@use './color-shade' as *;
|
|
5
|
-
@use '../../loggers/log-invalid-type' as *;
|
|
6
|
-
@use '../../validators/type-of/is-color' as *;
|
|
7
|
-
@use '../../validators/type-of/is-number' as *;
|
|
8
5
|
|
|
9
6
|
/// Генерирует монохромную шкалу оттенков путем затемнения
|
|
10
7
|
/// базового цвета.
|
|
@@ -19,7 +16,7 @@
|
|
|
19
16
|
/// ---
|
|
20
17
|
/// @name color-scale
|
|
21
18
|
/// @group utilities-helpers
|
|
22
|
-
/// @since
|
|
19
|
+
/// @since 0.0.1
|
|
23
20
|
/// @access public
|
|
24
21
|
/// @author Murad Rustamov (therteenten)
|
|
25
22
|
/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
|
|
@@ -131,78 +128,14 @@
|
|
|
131
128
|
/// - Длина списка = `$steps + 1`
|
|
132
129
|
@function color-scale($color, $steps: 5) {
|
|
133
130
|
|
|
134
|
-
|
|
135
|
-
// Функция is-color() проверяет, является ли $color валидным цветом CSS.
|
|
136
|
-
@if not is-color($color) {
|
|
137
|
-
|
|
138
|
-
// Если $color не является цветом, возвращаем ошибку через
|
|
139
|
-
// стандартную функцию логирования. Это предотвращает
|
|
140
|
-
// некорректные вычисления с нецветовыми данными.
|
|
141
|
-
@return log-invalid-type(
|
|
142
|
-
'color-scale',
|
|
143
|
-
$color,
|
|
144
|
-
'$color',
|
|
145
|
-
'color'
|
|
146
|
-
);
|
|
131
|
+
$-palette: ();
|
|
147
132
|
|
|
133
|
+
@for $-i from 0 through $steps {
|
|
134
|
+
$-percentage: math.div($-i * 100, $steps);
|
|
135
|
+
$-shade: color-shade($color, $-percentage);
|
|
136
|
+
$-palette: list.append($-palette, $-shade);
|
|
148
137
|
}
|
|
149
138
|
|
|
150
|
-
|
|
151
|
-
// (уровней) в цветовой шкале. Определяет, сколько оттенков
|
|
152
|
-
// будет сгенерировано на основе базового цвета.
|
|
153
|
-
@else if not is-number($steps) {
|
|
154
|
-
|
|
155
|
-
// Если $steps не является числом, возвращаем ошибку.
|
|
156
|
-
@return log-invalid-type(
|
|
157
|
-
'color-scale',
|
|
158
|
-
$steps,
|
|
159
|
-
'$steps',
|
|
160
|
-
'number'
|
|
161
|
-
);
|
|
162
|
-
|
|
163
|
-
}
|
|
164
|
-
|
|
165
|
-
// Все параметры прошли валидацию - выполняем генерацию шкалы.
|
|
166
|
-
@else {
|
|
167
|
-
|
|
168
|
-
// Инициализация списка для хранения цветовой палитры.
|
|
169
|
-
// Результатом функции будет список (массив) цветов,
|
|
170
|
-
// представляющих шкалу оттенков базового цвета.
|
|
171
|
-
$-palette: ();
|
|
172
|
-
|
|
173
|
-
// Цикл генерации цветов шкалы.
|
|
174
|
-
// Переменная $i принимает значения от 0 до $steps включительно.
|
|
175
|
-
// Это создает $steps + 1 цвет в итоговом списке.
|
|
176
|
-
@for $i from 0 through $steps {
|
|
177
|
-
|
|
178
|
-
// Вычисление процентного значения для текущего шага.
|
|
179
|
-
// Формула: (текущий шаг) × (100 / общее количество шагов)
|
|
180
|
-
// Пример для 5 шагов: значения будут 0%, 20%, 40%, 60%,
|
|
181
|
-
// 80%, 100%.
|
|
182
|
-
$-percentage: math.div($i * 100, $steps);
|
|
183
|
-
|
|
184
|
-
// Генерация оттенка с помощью вспомогательной функции
|
|
185
|
-
// color-shade().
|
|
186
|
-
// Предполагается, что color-shade($color, $percentage)
|
|
187
|
-
// создает оттенок базового цвета с указанной интенсивностью.
|
|
188
|
-
// - При $percentage = 0% → самый светлый оттенок (близкий
|
|
189
|
-
// к белому)
|
|
190
|
-
// - При $percentage = 100% → самый темный оттенок (близкий
|
|
191
|
-
// к черному)
|
|
192
|
-
$-shade: color-shade($color, $-percentage);
|
|
193
|
-
|
|
194
|
-
// Добавление сгенерированного оттенка в палитру.
|
|
195
|
-
// Функция list.append() добавляет новый элемент в
|
|
196
|
-
// конец списка.
|
|
197
|
-
$-palette: list.append($-palette, $-shade);
|
|
198
|
-
|
|
199
|
-
}
|
|
200
|
-
|
|
201
|
-
// Возвращаем список сгенерированных оттенков.
|
|
202
|
-
// Список содержит $steps + 1 элементов, равномерно распределенных
|
|
203
|
-
// по шкале от самого светлого к самому темному оттенку.
|
|
204
|
-
@return $-palette;
|
|
205
|
-
|
|
206
|
-
}
|
|
139
|
+
@return $-palette;
|
|
207
140
|
|
|
208
141
|
}
|
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
@use 'sass:color';
|
|
2
|
-
@use '../../loggers/log-invalid-type' as *;
|
|
3
|
-
@use '../../validators/type-of/is-color' as *;
|
|
4
|
-
@use '../../validators/type-of/is-number' as *;
|
|
5
2
|
|
|
6
3
|
/// Создает затемненную версию цвета, добавляя к нему
|
|
7
4
|
/// черный цвет.
|
|
@@ -16,7 +13,7 @@
|
|
|
16
13
|
/// ---
|
|
17
14
|
/// @name color-shade
|
|
18
15
|
/// @group utilities-helpers
|
|
19
|
-
/// @since
|
|
16
|
+
/// @since 0.0.1
|
|
20
17
|
/// @access public
|
|
21
18
|
/// @author Kitty Giraudel
|
|
22
19
|
/// @author Murad Rustamov (therteenten) [адаптация]
|
|
@@ -54,60 +51,5 @@
|
|
|
54
51
|
/// @return {Color} - Затемненный цвет в том же формате,
|
|
55
52
|
/// что и исходный.
|
|
56
53
|
@function color-shade($color, $percentage) {
|
|
57
|
-
|
|
58
|
-
// Проверка типа первого параметра: ожидается базовый цвет.
|
|
59
|
-
// Функция is-color() проверяет, является ли $color валидным цветом CSS.
|
|
60
|
-
@if not is-color($color) {
|
|
61
|
-
|
|
62
|
-
// Если $color не является цветом, возвращаем ошибку через
|
|
63
|
-
// стандартную функцию логирования. Это предотвращает
|
|
64
|
-
// некорректные вычисления с нецветовыми данными.
|
|
65
|
-
@return log-invalid-type(
|
|
66
|
-
'color-shade',
|
|
67
|
-
$color,
|
|
68
|
-
'$color',
|
|
69
|
-
'color'
|
|
70
|
-
);
|
|
71
|
-
|
|
72
|
-
}
|
|
73
|
-
|
|
74
|
-
// Проверка типа второго параметра: ожидается процентное значение
|
|
75
|
-
// интенсивности затемнения. Определяет, насколько темным будет
|
|
76
|
-
// итоговый цвет относительно базового.
|
|
77
|
-
@else if not is-number($percentage) {
|
|
78
|
-
|
|
79
|
-
// Если $percentage не является числом, возвращаем ошибку.
|
|
80
|
-
@return log-invalid-type(
|
|
81
|
-
'color-shade',
|
|
82
|
-
$percentage,
|
|
83
|
-
'$percentage',
|
|
84
|
-
'number'
|
|
85
|
-
);
|
|
86
|
-
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
// Все параметры прошли валидацию - выполняем затемнение цвета.
|
|
90
|
-
@else {
|
|
91
|
-
|
|
92
|
-
// Формула затемнения: смешивание базового цвета с черным
|
|
93
|
-
// в указанной пропорции.
|
|
94
|
-
//
|
|
95
|
-
// Используем встроенную функцию color.mix():
|
|
96
|
-
// Параметры:
|
|
97
|
-
// - black: первый цвет для смешивания (черный)
|
|
98
|
-
// - $color: второй цвет для смешивания (базовый цвет)
|
|
99
|
-
// - $percentage * 1%: процентное соотношение
|
|
100
|
-
// (сколько процентов черного цвета в смеси)
|
|
101
|
-
//
|
|
102
|
-
// Математика смешивания:
|
|
103
|
-
// - При $percentage = 0% → 100% $color, 0% black (исходный цвет)
|
|
104
|
-
// - При $percentage = 50% → 50% $color, 50% black (среднее затемнение)
|
|
105
|
-
// - При $percentage = 100% → 0% $color, 100% black (полностью черный)
|
|
106
|
-
//
|
|
107
|
-
// Результат: цвет, который является затемненной версией
|
|
108
|
-
// исходного цвета, где процент определяет степень затемнения.
|
|
109
|
-
@return color.mix(black, $color, $percentage * 1%);
|
|
110
|
-
|
|
111
|
-
}
|
|
112
|
-
|
|
54
|
+
@return color.mix(black, $color, $percentage * 1%);
|
|
113
55
|
}
|
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
@use 'sass:color';
|
|
2
|
-
@use '../../loggers/log-invalid-type' as *;
|
|
3
|
-
@use '../../validators/type-of/is-color' as *;
|
|
4
|
-
@use '../../validators/type-of/is-number' as *;
|
|
5
2
|
|
|
6
3
|
/// Осветляет исходный цвет, смешивая его с белым.
|
|
7
4
|
///
|
|
@@ -12,7 +9,7 @@
|
|
|
12
9
|
/// ---
|
|
13
10
|
/// @name color-tint
|
|
14
11
|
/// @group utilities-helpers
|
|
15
|
-
/// @since
|
|
12
|
+
/// @since 0.0.1
|
|
16
13
|
/// @access public
|
|
17
14
|
/// @author Kitty Giraudel
|
|
18
15
|
/// @author Murad Rustamov (therteenten) [адаптация]
|
|
@@ -59,60 +56,5 @@
|
|
|
59
56
|
/// @return {Color} - Осветленный цвет в том же формате,
|
|
60
57
|
/// что и входной.
|
|
61
58
|
@function color-tint($color, $percentage) {
|
|
62
|
-
|
|
63
|
-
// Проверка типа первого параметра: ожидается базовый цвет.
|
|
64
|
-
// Функция is-color() проверяет, является ли $color валидным цветом CSS.
|
|
65
|
-
@if not is-color($color) {
|
|
66
|
-
|
|
67
|
-
// Если $color не является цветом, возвращаем ошибку через
|
|
68
|
-
// стандартную функцию логирования. Это предотвращает
|
|
69
|
-
// некорректные вычисления с нецветовыми данными.
|
|
70
|
-
@return log-invalid-type(
|
|
71
|
-
'color-tint',
|
|
72
|
-
$color,
|
|
73
|
-
'$color',
|
|
74
|
-
'color'
|
|
75
|
-
);
|
|
76
|
-
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
// Проверка типа второго параметра: ожидается процентное значение
|
|
80
|
-
// интенсивности осветления. Определяет, насколько светлым будет
|
|
81
|
-
// итоговый цвет относительно базового.
|
|
82
|
-
@else if not is-number($percentage) {
|
|
83
|
-
|
|
84
|
-
// Если $percentage не является числом, возвращаем ошибку.
|
|
85
|
-
@return log-invalid-type(
|
|
86
|
-
'color-tint',
|
|
87
|
-
$percentage,
|
|
88
|
-
'$percentage',
|
|
89
|
-
'number'
|
|
90
|
-
);
|
|
91
|
-
|
|
92
|
-
}
|
|
93
|
-
|
|
94
|
-
// Все параметры прошли валидацию - выполняем осветление цвета.
|
|
95
|
-
@else {
|
|
96
|
-
|
|
97
|
-
// Формула осветления: смешивание базового цвета с белым
|
|
98
|
-
// в указанной пропорции.
|
|
99
|
-
//
|
|
100
|
-
// Используем встроенную функцию color.mix():
|
|
101
|
-
// Параметры:
|
|
102
|
-
// - white: первый цвет для смешивания (белый)
|
|
103
|
-
// - $color: второй цвет для смешивания (базовый цвет)
|
|
104
|
-
// - $percentage * 1%: процентное соотношение
|
|
105
|
-
// (сколько процентов белого цвета в смеси)
|
|
106
|
-
//
|
|
107
|
-
// Математика смешивания:
|
|
108
|
-
// - При $percentage = 0% → 100% $color, 0% white (исходный цвет)
|
|
109
|
-
// - При $percentage = 50% → 50% $color, 50% white (среднее осветление)
|
|
110
|
-
// - При $percentage = 100% → 0% $color, 100% white (полностью белый)
|
|
111
|
-
//
|
|
112
|
-
// Результат: цвет, который является осветленной версией
|
|
113
|
-
// исходного цвета, где процент определяет степень осветления.
|
|
114
|
-
@return color.mix(white, $color, $percentage * 1%);
|
|
115
|
-
|
|
116
|
-
}
|
|
117
|
-
|
|
59
|
+
@return color.mix(white, $color, $percentage * 1%);
|
|
118
60
|
}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
@use 'sass:color';
|
|
2
2
|
@use 'sass:meta';
|
|
3
|
-
@use '../../loggers/log-invalid-type' as *;
|
|
4
|
-
@use '../../validators/type-of/is-color' as *;
|
|
5
3
|
|
|
6
4
|
/// Генерирует триадную цветовую схему из трех
|
|
7
5
|
/// равноудаленных цветов.
|
|
@@ -27,7 +25,7 @@
|
|
|
27
25
|
/// ---
|
|
28
26
|
/// @name color-triad
|
|
29
27
|
/// @group utilities-helpers
|
|
30
|
-
/// @since
|
|
28
|
+
/// @since 0.0.1
|
|
31
29
|
/// @access public
|
|
32
30
|
/// @author Murad Rustamov (therteenten)
|
|
33
31
|
/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
|
|
@@ -86,56 +84,14 @@
|
|
|
86
84
|
/// - Третий элемент: цвет со смещением +240° по цветовому кругу
|
|
87
85
|
@function color-triad($color) {
|
|
88
86
|
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
87
|
+
$-hue: color.channel($color, "hue", $space: hsl);
|
|
88
|
+
$-saturation: color.channel($color, "saturation", $space: hsl);
|
|
89
|
+
$-lightness: color.channel($color, "lightness", $space: hsl);
|
|
92
90
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
$color,
|
|
99
|
-
'$color',
|
|
100
|
-
'color'
|
|
101
|
-
);
|
|
102
|
-
|
|
103
|
-
}
|
|
104
|
-
|
|
105
|
-
// Основная логика выполняется только если $color является
|
|
106
|
-
// корректным цветом.
|
|
107
|
-
@else {
|
|
108
|
-
|
|
109
|
-
// Извлечение компонентов цвета из входного параметра
|
|
110
|
-
// в пространстве HSL (Hue, Saturation, Lightness).
|
|
111
|
-
// Функция color.channel() возвращает конкретный канал цвета:
|
|
112
|
-
$-hue: color.channel($color, "hue", $space: hsl); // Оттенок: 0-360 градусов
|
|
113
|
-
$-saturation: color.channel($color, "saturation", $space: hsl); // Насыщенность: 0-100%
|
|
114
|
-
$-lightness: color.channel($color, "lightness", $space: hsl); // Яркость: 0-100%
|
|
115
|
-
|
|
116
|
-
// Создание триадной цветовой схемы.
|
|
117
|
-
// Триада - это три цвета, равномерно распределенных
|
|
118
|
-
// по цветовому кругу (разделенных 120 градусами).
|
|
119
|
-
//
|
|
120
|
-
// Формула триады:
|
|
121
|
-
// 1. Исходный цвет: $color (оттенок = $-hue)
|
|
122
|
-
// 2. Второй цвет: оттенок = ($-hue + 120) % 360
|
|
123
|
-
// (120 градусов по часовой стрелке от исходного)
|
|
124
|
-
// 3. Третий цвет: оттенок = ($-hue + 240) % 360
|
|
125
|
-
// (240 градусов по часовой стрелке от исходного)
|
|
126
|
-
//
|
|
127
|
-
// Оператор % 360 гарантирует, что значение оттенка всегда
|
|
128
|
-
// остается в диапазоне 0-359 градусов (полный круг).
|
|
129
|
-
//
|
|
130
|
-
// Функция meta.inspect() преобразует цветовые значения
|
|
131
|
-
// в строки, чтобы они могли быть корректно представлены
|
|
132
|
-
// в возвращаемом списке.
|
|
133
|
-
@return (
|
|
134
|
-
meta.inspect($color), // Исходный цвет
|
|
135
|
-
meta.inspect(hsl(($-hue + 120) % 360, $-saturation, $-lightness)), // Второй цвет триады
|
|
136
|
-
meta.inspect(hsl(($-hue + 240) % 360, $-saturation, $-lightness)) // Третий цвет триады
|
|
137
|
-
);
|
|
138
|
-
|
|
139
|
-
}
|
|
91
|
+
@return (
|
|
92
|
+
meta.inspect($color),
|
|
93
|
+
meta.inspect(hsl(($-hue + 120) % 360, $-saturation, $-lightness)),
|
|
94
|
+
meta.inspect(hsl(($-hue + 240) % 360, $-saturation, $-lightness))
|
|
95
|
+
);
|
|
140
96
|
|
|
141
97
|
}
|
|
@@ -1,7 +1,5 @@
|
|
|
1
1
|
@use 'sass:list';
|
|
2
|
-
@use '../../
|
|
3
|
-
@use '../../validators/list/is-list-contained' as *;
|
|
4
|
-
@use '../../validators/type-of/is-list' as *;
|
|
2
|
+
@use '../../validators' as validators; // need validators/is-list-contained
|
|
5
3
|
|
|
6
4
|
/// Удаляет дублирующиеся значения из списка.
|
|
7
5
|
///
|
|
@@ -25,7 +23,7 @@
|
|
|
25
23
|
/// ---
|
|
26
24
|
/// @name list-dedupe
|
|
27
25
|
/// @group utilities-helpers
|
|
28
|
-
/// @since
|
|
26
|
+
/// @since 0.0.1
|
|
29
27
|
/// @access public
|
|
30
28
|
/// @author Murad Rustamov (therteenten)
|
|
31
29
|
/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
|
|
@@ -91,56 +89,17 @@
|
|
|
91
89
|
/// вхождение каждого значения. Если исходный список
|
|
92
90
|
/// пустой, возвращает пустой список.
|
|
93
91
|
@function list-dedupe($list) {
|
|
92
|
+
$-result: ();
|
|
94
93
|
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
// Если $list не является списком, возвращаем ошибку через
|
|
101
|
-
// стандартную функцию логирования. Это предотвращает
|
|
102
|
-
// некорректные вычисления с некорректными данными.
|
|
103
|
-
@return log-invalid-type(
|
|
104
|
-
'list-dedupe',
|
|
105
|
-
$list,
|
|
106
|
-
'$list',
|
|
107
|
-
('list', 'arglist')
|
|
108
|
-
);
|
|
109
|
-
|
|
94
|
+
@each $-item in $list {
|
|
95
|
+
@if not validators.is-list-contained($-result, $-item) {
|
|
96
|
+
$-result: list.append($-result, $-item);
|
|
97
|
+
}
|
|
110
98
|
}
|
|
111
99
|
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
@else {
|
|
115
|
-
|
|
116
|
-
// Инициализация переменной для хранения результата.
|
|
117
|
-
// $-result будет содержать список без дубликатов.
|
|
118
|
-
$-result: ();
|
|
119
|
-
|
|
120
|
-
// Итерация по всем элементам исходного списка.
|
|
121
|
-
// Переменная $-item содержит текущий обрабатываемый элемент.
|
|
122
|
-
@each $-item in $list {
|
|
123
|
-
|
|
124
|
-
// Проверка: содержится ли текущий элемент уже в результате.
|
|
125
|
-
// Используется вспомогательная функция is-list-contained(),
|
|
126
|
-
// которая должна возвращать true, если элемент уже присутствует
|
|
127
|
-
// в списке $-result.
|
|
128
|
-
@if not is-list-contained($-result, $-item) {
|
|
129
|
-
|
|
130
|
-
// Если элемент еще не содержится в результате,
|
|
131
|
-
// добавляем его в конец списка $-result.
|
|
132
|
-
// Функция list.append() добавляет новый элемент в список.
|
|
133
|
-
$-result: list.append($-result, $-item);
|
|
134
|
-
|
|
135
|
-
}
|
|
100
|
+
@return $-result;
|
|
101
|
+
}
|
|
136
102
|
|
|
137
|
-
}
|
|
138
103
|
|
|
139
|
-
// Возвращаем список без дубликатов.
|
|
140
|
-
// Порядок элементов сохраняется (первое вхождение каждого элемента
|
|
141
|
-
// сохраняет свою позицию, последующие дубликаты игнорируются).
|
|
142
|
-
@return $-result;
|
|
143
104
|
|
|
144
|
-
}
|
|
145
105
|
|
|
146
|
-
}
|
|
@@ -1,7 +1,4 @@
|
|
|
1
1
|
@use 'sass:list';
|
|
2
|
-
@use '../../loggers/log-invalid-type' as *;
|
|
3
|
-
@use '../../validators/type-of/is-list' as *;
|
|
4
|
-
@use '../../validators/type-of/is-number' as *;
|
|
5
2
|
|
|
6
3
|
/// Вставляет значение в список по указанному индексу.
|
|
7
4
|
///
|
|
@@ -24,7 +21,7 @@
|
|
|
24
21
|
/// ---
|
|
25
22
|
/// @name list-insert-at
|
|
26
23
|
/// @group utilities-helpers
|
|
27
|
-
/// @since
|
|
24
|
+
/// @since 0.0.1
|
|
28
25
|
/// @access public
|
|
29
26
|
/// @author Murad Rustamov (therteenten)
|
|
30
27
|
/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
|
|
@@ -63,7 +60,7 @@
|
|
|
63
60
|
/// любых типов и может быть пустым.
|
|
64
61
|
/// @param {*} $value - Значение для вставки в список.
|
|
65
62
|
/// Может быть любого типа (строка, число, цвет, список и т.д.).
|
|
66
|
-
/// @param {Number}
|
|
63
|
+
/// @param {Number} $-index - Позиция для вставки значения.
|
|
67
64
|
/// Используется 1-based индексация. Если индекс находится
|
|
68
65
|
/// в пределах списка (1 ≤ индекс ≤ длина), значение
|
|
69
66
|
/// вставляется перед элементом с этим индексом. Если
|
|
@@ -73,94 +70,27 @@
|
|
|
73
70
|
/// позиции. Если список был пустым, возвращается список
|
|
74
71
|
/// из одного элемента (вставленного значения).
|
|
75
72
|
/// @throws {Error | Warning} - Может выбросить ошибку если
|
|
76
|
-
///
|
|
73
|
+
/// `$-index` не является числом или если индекс меньше 1,
|
|
77
74
|
/// а также предупреждение, если индекс превышает длину
|
|
78
75
|
/// списка.
|
|
79
|
-
@function list-insert-at($list, $value,
|
|
76
|
+
@function list-insert-at($list, $value, $-index) {
|
|
80
77
|
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
// или arglist (специальный тип для переменного числа аргументов).
|
|
84
|
-
@if not is-list($list) {
|
|
78
|
+
$-result: ();
|
|
79
|
+
$-length: list.length($list);
|
|
85
80
|
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
// некорректные вычисления с некорректными данными.
|
|
89
|
-
@return log-invalid-type(
|
|
90
|
-
'list-insert-at',
|
|
91
|
-
$list,
|
|
92
|
-
'$list',
|
|
93
|
-
('list', 'arglist')
|
|
94
|
-
);
|
|
95
|
-
|
|
96
|
-
}
|
|
97
|
-
|
|
98
|
-
// Проверка типа третьего параметра: ожидается числовое значение индекса.
|
|
99
|
-
// $index определяет позицию, на которую нужно вставить значение в список.
|
|
100
|
-
// Индексация в Sass начинается с 1, а не с 0.
|
|
101
|
-
@else if not is-number($index) {
|
|
102
|
-
|
|
103
|
-
// Если $index не является числом, возвращаем ошибку.
|
|
104
|
-
// Проверка выполняется только если $list прошел валидацию.
|
|
105
|
-
@return log-invalid-type(
|
|
106
|
-
'list-insert-at',
|
|
107
|
-
$index,
|
|
108
|
-
'$index',
|
|
109
|
-
'number'
|
|
110
|
-
);
|
|
111
|
-
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
// Все параметры прошли валидацию - выполняем вставку значения.
|
|
115
|
-
@else {
|
|
116
|
-
|
|
117
|
-
// Инициализация переменной для хранения результата.
|
|
118
|
-
// $-result будет содержать новый список с вставленным значением.
|
|
119
|
-
$-result: ();
|
|
120
|
-
|
|
121
|
-
// Определение длины исходного списка.
|
|
122
|
-
// Функция list.length() возвращает количество элементов в списке.
|
|
123
|
-
$-length: list.length($list);
|
|
124
|
-
|
|
125
|
-
// Цикл по всем элементам исходного списка.
|
|
126
|
-
// Переменная $i принимает значения от 1 до $-length включительно.
|
|
127
|
-
@for $i from 1 through $-length {
|
|
128
|
-
|
|
129
|
-
// Проверка: достигли ли мы позиции для вставки.
|
|
130
|
-
@if $i == $index {
|
|
131
|
-
|
|
132
|
-
// Если текущий индекс равен целевому индексу вставки,
|
|
133
|
-
// добавляем новое значение в результат перед текущим элементом.
|
|
134
|
-
$-result: list.append($-result, $value);
|
|
135
|
-
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
// Добавляем текущий элемент исходного списка в результат.
|
|
139
|
-
// Функция list.nth() извлекает элемент списка по указанному индексу.
|
|
140
|
-
$-result: list.append($-result, list.nth($list, $i));
|
|
141
|
-
|
|
142
|
-
}
|
|
143
|
-
|
|
144
|
-
// Обработка случая, когда индекс вставки больше длины списка.
|
|
145
|
-
// В этом случае значение добавляется в конец списка.
|
|
146
|
-
@if $index > $-length {
|
|
147
|
-
|
|
148
|
-
// Выводим предупреждение о том, что индекс превышает длину списка.
|
|
149
|
-
// Это помогает обнаружить потенциальные ошибки в логике программы.
|
|
150
|
-
@warn '$index (#{$index}) > $-length (#{$-length}): Индекс больше длины списка. Значение будет добавлено в конец!';
|
|
151
|
-
|
|
152
|
-
// Добавляем значение в конец списка результата.
|
|
81
|
+
@for $-i from 1 through $-length {
|
|
82
|
+
@if $-i == $-index {
|
|
153
83
|
$-result: list.append($-result, $value);
|
|
154
|
-
|
|
155
84
|
}
|
|
85
|
+
$-result: list.append($-result, list.nth($list, $-i));
|
|
86
|
+
}
|
|
156
87
|
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
// (в текущей реализации значение не будет добавлено).
|
|
162
|
-
@return $-result;
|
|
163
|
-
|
|
88
|
+
// Если индекс больше длины, добавляем в конец
|
|
89
|
+
@if $-index > $-length {
|
|
90
|
+
@warn '⚠️ Индекс больше длины списка. Значение будет добавлено в конец!';
|
|
91
|
+
$-result: list.append($-result, $value);
|
|
164
92
|
}
|
|
165
93
|
|
|
94
|
+
@return $-result;
|
|
95
|
+
|
|
166
96
|
}
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
/// ---
|
|
21
21
|
/// @name list-merge
|
|
22
22
|
/// @group utilities-helpers
|
|
23
|
-
/// @since
|
|
23
|
+
/// @since 0.0.1
|
|
24
24
|
/// @access public
|
|
25
25
|
/// @author Murad Rustamov (therteenten)
|
|
26
26
|
/// @link https://sourcecraft.dev/users/therteenten/overview SourceCraft - therteenten
|