@rotcetihra/c2c 1.0.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.
- package/LICENSE +21 -0
- package/README.md +1309 -0
- package/package.json +28 -0
- package/src/_error.scss +18 -0
- package/src/_generate.scss +659 -0
- package/src/_index.scss +1 -0
- package/src/_render.scss +70 -0
- package/src/_utility.scss +171 -0
- package/src/_validate.scss +46 -0
- package/src/_var.scss +386 -0
package/src/_index.scss
ADDED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
@forward "generate";
|
package/src/_render.scss
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
/// Специализированная обертка для генерации стилей класса.
|
|
2
|
+
/// Автоматически подставляет точку перед переданным именем и вызывает базовый миксин селектора.
|
|
3
|
+
///
|
|
4
|
+
/// @group Render
|
|
5
|
+
/// @access public
|
|
6
|
+
///
|
|
7
|
+
/// @param {String} $class - Имя CSS-класса без ведущей точки (напр., 'flex', 'w-full').
|
|
8
|
+
///
|
|
9
|
+
/// @requires {mixin} selector
|
|
10
|
+
@mixin class($class) {
|
|
11
|
+
.#{$class} {
|
|
12
|
+
@content;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
/// Атомарный генератор CSS-свойств.
|
|
17
|
+
/// Выводит прямое объявление свойства и его значения в текущий контекст.
|
|
18
|
+
///
|
|
19
|
+
/// @group Render
|
|
20
|
+
/// @access public
|
|
21
|
+
///
|
|
22
|
+
/// @param {String} $property - Имя CSS-свойства (напр., 'margin-top', 'display').
|
|
23
|
+
/// @param {*} $value - Значение CSS-свойства (напр., '1rem', 'block').
|
|
24
|
+
@mixin property($property, $value) {
|
|
25
|
+
#{$property}: #{$value};
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
/// Высокоуровневый атомарный рендерер стандартных утилит.
|
|
29
|
+
/// Комбинирует генерацию класса и CSS-свойства внутри него, создавая готовую служебную утилиту.
|
|
30
|
+
///
|
|
31
|
+
/// @group Render
|
|
32
|
+
/// @access public
|
|
33
|
+
///
|
|
34
|
+
/// @param {String} $class - Имя генерируемого CSS-класса (напр., 'd-block').
|
|
35
|
+
/// @param {String} $property - Имя CSS-свойства, инкапсулированного в утилиту (напр., 'display').
|
|
36
|
+
/// @param {*} $value - Применяемое значение свойства (напр., 'block').
|
|
37
|
+
///
|
|
38
|
+
/// @requires {mixin} class
|
|
39
|
+
/// @requires {mixin} property
|
|
40
|
+
@mixin utility($class, $property, $value) {
|
|
41
|
+
.#{$class} {
|
|
42
|
+
#{$property}: #{$value};
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
/// Генерирует изолированный CSS-блок с произвольным селектором.
|
|
47
|
+
/// Используется в качестве обертки для динамического создания правил или
|
|
48
|
+
/// интерполяции сложных селекторов, переданных в виде строк.
|
|
49
|
+
///
|
|
50
|
+
/// @param {String | Selector} $selector - Целевой CSS-селектор (класс, ID, тег или комбинированный селектор).
|
|
51
|
+
///
|
|
52
|
+
/// @content Внутри миксина передаются CSS-свойства, которые должны быть применены к указанному селектору.
|
|
53
|
+
///
|
|
54
|
+
/// @example scss - Использование миксина
|
|
55
|
+
/// @include selector(".my-custom-class") {
|
|
56
|
+
/// display: flex;
|
|
57
|
+
/// opacity: 1;
|
|
58
|
+
/// }
|
|
59
|
+
///
|
|
60
|
+
/// @example css - Результат компиляции
|
|
61
|
+
/// .my-custom-class {
|
|
62
|
+
/// display: flex;
|
|
63
|
+
/// opacity: 1;
|
|
64
|
+
/// }
|
|
65
|
+
///
|
|
66
|
+
@mixin selector($selector) {
|
|
67
|
+
#{$selector} {
|
|
68
|
+
@content;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
@@ -0,0 +1,171 @@
|
|
|
1
|
+
@use "sass:math";
|
|
2
|
+
@use "sass:color";
|
|
3
|
+
@use "sass:string";
|
|
4
|
+
@use "sass:meta";
|
|
5
|
+
@use "sass:list";
|
|
6
|
+
@use "var";
|
|
7
|
+
@use "render";
|
|
8
|
+
|
|
9
|
+
/// Экранирует точку в десятичных числах для корректного использования в именах CSS-классов.
|
|
10
|
+
/// Превращает значения типа '0.5' в '0\.5', что позволяет браузеру
|
|
11
|
+
/// воспринимать всю строку как единый селектор.
|
|
12
|
+
///
|
|
13
|
+
/// @group Utility
|
|
14
|
+
/// @access public
|
|
15
|
+
///
|
|
16
|
+
/// @param {Number | String} $double - Число или строка, содержащая десятичную точку.
|
|
17
|
+
///
|
|
18
|
+
/// @return {String} Экранированная строка, готовая для использования в селекторе.
|
|
19
|
+
@function escape-double($double) {
|
|
20
|
+
$string: #{$double};
|
|
21
|
+
|
|
22
|
+
@if string.index($string, ".") {
|
|
23
|
+
$index: string.index($string, ".");
|
|
24
|
+
$string: string.insert($string, "\\", $index);
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@return $string;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
/// Функция-шаблонизатор для динамической подстановки значений в строки.
|
|
31
|
+
/// Находит первое вхождение маркерного символа (из `var.$template`) и заменяет его
|
|
32
|
+
/// на переданное значение, разделяя и склеивая строки. Если маркер не найден,
|
|
33
|
+
/// возвращает исходную строку без изменений.
|
|
34
|
+
///
|
|
35
|
+
/// @group Utility
|
|
36
|
+
/// @access public
|
|
37
|
+
///
|
|
38
|
+
/// @param {String} $string - Строка-шаблон, содержащая маркер подстановки (напр., 'cols-{}').
|
|
39
|
+
/// @param {String | Number} $value - Значение, которое необходимо встроить вместо маркера (напр., 12 или 'auto').
|
|
40
|
+
///
|
|
41
|
+
/// @return {String} Результирующая строка с подставленным значением.
|
|
42
|
+
///
|
|
43
|
+
/// @requires {variable} var.$template
|
|
44
|
+
/// @requires {function} string.index
|
|
45
|
+
/// @requires {function} string.slice
|
|
46
|
+
@function template($string, $value) {
|
|
47
|
+
$result: $string;
|
|
48
|
+
|
|
49
|
+
@while (string.index($result, var.$template)) {
|
|
50
|
+
$index: string.index($result, var.$template);
|
|
51
|
+
$result: string.slice($result, 1, $index - 1) +
|
|
52
|
+
$value +
|
|
53
|
+
string.slice($string, $index + 1, -1);
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
@return $result;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
/// Предикат для проверки строки на наличие шаблона (интерполяционного маркера).
|
|
60
|
+
/// Возвращает позицию первого вхождения маркерного символа или null, если он отсутствует.
|
|
61
|
+
///
|
|
62
|
+
/// @group Utility
|
|
63
|
+
/// @access public
|
|
64
|
+
///
|
|
65
|
+
/// @param {String} $string - Проверяемая строка (напр., 'cols-count-{}').
|
|
66
|
+
///
|
|
67
|
+
/// @return {Number | Null} Индекс начала шаблона (начиная с 1) или null.
|
|
68
|
+
///
|
|
69
|
+
/// @requires {variable} var.$template
|
|
70
|
+
/// @requires {function} string.index
|
|
71
|
+
@function is-template($string) {
|
|
72
|
+
@return string.index($string, var.$template);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
/// Предикат для проверки, является ли переданное значение списком (List).
|
|
76
|
+
/// Возвращает true, если тип данных соответствует списку, иначе — false.
|
|
77
|
+
///
|
|
78
|
+
/// @group Utility
|
|
79
|
+
/// @access public
|
|
80
|
+
///
|
|
81
|
+
/// @param {*} $value - Любое проверяемое значение.
|
|
82
|
+
///
|
|
83
|
+
/// @return {Boolean} Результат проверки типа данных.
|
|
84
|
+
///
|
|
85
|
+
/// @requires {function} meta.type-of
|
|
86
|
+
@function is-list($value) {
|
|
87
|
+
@return meta.type-of($value) == "list";
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/// Предикат для проверки, является ли переданное значение картой (Map).
|
|
91
|
+
/// Возвращает true, если тип данных соответствует структуре "ключ-значение", иначе — false.
|
|
92
|
+
///
|
|
93
|
+
/// @group Utility
|
|
94
|
+
/// @access public
|
|
95
|
+
///
|
|
96
|
+
/// @param {*} $value - Любое проверяемое значение.
|
|
97
|
+
///
|
|
98
|
+
/// @return {Boolean} Результат проверки типа данных.
|
|
99
|
+
///
|
|
100
|
+
/// @requires {function} meta.type-of
|
|
101
|
+
@function is-map($value) {
|
|
102
|
+
@return meta.type-of($value) == "map";
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
/// Предикат для проверки значения на пустоту.
|
|
106
|
+
/// Возвращает true, если значение равно null, либо представляет собой
|
|
107
|
+
/// пустые скобки () (которые в Sass являются одновременно пустым списком и пустой картой).
|
|
108
|
+
///
|
|
109
|
+
/// @group Utility
|
|
110
|
+
/// @access public
|
|
111
|
+
///
|
|
112
|
+
/// @param {*} $value - Любое проверяемое значение.
|
|
113
|
+
///
|
|
114
|
+
/// @return {Boolean} Результат проверки на пустоту.
|
|
115
|
+
@function is-empty($value) {
|
|
116
|
+
@return $value == null or $value == ();
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
/// Обертка для генерации адаптивных утилит (Media Queries).
|
|
120
|
+
/// Проходит по карте брейкпоинтов и создает медиа-условия min-width.
|
|
121
|
+
///
|
|
122
|
+
/// @group Utility
|
|
123
|
+
/// @param {String} $bp-name - Имя брейкпоинта (напр., 'sm', 'md', 'lg').
|
|
124
|
+
///
|
|
125
|
+
/// @requires {variable} var.$breakpoints - Карта вида ('sm': 640px, 'md': 768px).
|
|
126
|
+
///
|
|
127
|
+
/// @example scss - Использование миксина
|
|
128
|
+
/// @include breakpoints using ($name) {
|
|
129
|
+
/// .#{$name}\:flex-row { flex-direction: row; }
|
|
130
|
+
/// }
|
|
131
|
+
@mixin breakpoints {
|
|
132
|
+
@each $bp-name, $bp-width in var.$breakpoints {
|
|
133
|
+
@media (min-width: $bp-width) {
|
|
134
|
+
@content ($bp-name);
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
|
|
139
|
+
/// Управляющий middleware-миксин для генерации интерактивных состояний (псевдоклассов).
|
|
140
|
+
///
|
|
141
|
+
/// Обходит глобальную карту зарегистрированных состояний, бережно изолирует ховер-эффекты
|
|
142
|
+
/// внутри медиа-запроса `@media (hover: hover)` для предотвращения «залипания» на сенсорных экранах,
|
|
143
|
+
/// а также поддерживает строгую фильтрацию генерации через белый список (`$only`).
|
|
144
|
+
/// На лету пробрасывает ключи и селекторы состояний в дочерний `@content`.
|
|
145
|
+
///
|
|
146
|
+
/// @group Core
|
|
147
|
+
/// @access public
|
|
148
|
+
///
|
|
149
|
+
/// @param {List | Null} $only [null] - Белый список разрешенных ключей состояний (например, `("h", "f", "a")`). Если `null`, генерируются все доступные состояния.
|
|
150
|
+
///
|
|
151
|
+
/// @output Возвращает динамический контекст стилей, обоернутый в правила псевдоклассов, передавая наверх:
|
|
152
|
+
/// - `$state-key` {String} - Экранированный префикс для имени класса (напр., `h`)
|
|
153
|
+
/// - `$state` {String} - Чистый CSS-селектор псевдокласса (напр., `hover`)
|
|
154
|
+
///
|
|
155
|
+
/// @requires {variable} var.$states
|
|
156
|
+
/// @requires {function} is-list
|
|
157
|
+
/// @requires {function} list.index
|
|
158
|
+
@mixin states($only: null) {
|
|
159
|
+
@each $state-key, $state in var.$states {
|
|
160
|
+
@if (not is-list($only)) or (list.index($only, $state-key)) {
|
|
161
|
+
// Защита мобильного UX: hover-стили не должны срабатывать и «залипать» на смартфонах
|
|
162
|
+
@if $state == "hover" {
|
|
163
|
+
@media (hover: hover) {
|
|
164
|
+
@content ($state-key, $state);
|
|
165
|
+
}
|
|
166
|
+
} @else {
|
|
167
|
+
@content ($state-key, $state);
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
@use "error";
|
|
3
|
+
|
|
4
|
+
/// Валидирует конфигурационный Sass-map на наличие обязательных полей первого и второго уровней вложенности.
|
|
5
|
+
/// В случае отсутствия поля вызывает кастомную функцию логирования ошибок.
|
|
6
|
+
///
|
|
7
|
+
/// @param {Map} $config - Проверяемая карта конфигурации (например, отдельный блок свойств, шагов или палитр).
|
|
8
|
+
/// Ожидает наличие служебных полей для формирования понятного трейса ошибки:
|
|
9
|
+
/// - "name" (String) - Имя конфигурации.
|
|
10
|
+
/// - "group" (String) - Группа (properties, steps, palettes и т.д.).
|
|
11
|
+
/// - "index" (Number) - Индекс текущего блока в массиве.
|
|
12
|
+
///
|
|
13
|
+
/// @param {Map} $required-fields - Карта обязательных полей, где:
|
|
14
|
+
/// - Ключ (String) - Имя обязательного верхнеуровневого поля (например, "meta", "use", "values").
|
|
15
|
+
/// - Значение (List) - Список обязательных подполей (например, ("step", "from", "to")).
|
|
16
|
+
///
|
|
17
|
+
/// @example scss
|
|
18
|
+
/// $required: ("meta": ("step", "from", "to"), "values": ());
|
|
19
|
+
/// @include config($current-step-map, $required);
|
|
20
|
+
///
|
|
21
|
+
@mixin config($config, $required-fields) {
|
|
22
|
+
// Перебираем верхнеуровневые обязательные поля (например: 'meta', 'use')
|
|
23
|
+
@each $field, $sub-fields in $required-fields {
|
|
24
|
+
// Проверяем наличие основного поля на первом уровне $config
|
|
25
|
+
@if not map.get($config, $field) {
|
|
26
|
+
@include error.required-field-is-missing(
|
|
27
|
+
map.get($config, "name"),
|
|
28
|
+
map.get($config, "group"),
|
|
29
|
+
map.get($config, "index"),
|
|
30
|
+
$field
|
|
31
|
+
);
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
// Перебираем и проверяем вложенные обязательные подполя
|
|
35
|
+
@each $sub-field in $sub-fields {
|
|
36
|
+
@if not map.get($config, $field, $sub-field) {
|
|
37
|
+
@include error.required-field-is-missing(
|
|
38
|
+
map.get($config, "name"),
|
|
39
|
+
map.get($config, "group"),
|
|
40
|
+
map.get($config, "index"),
|
|
41
|
+
"#{$field}::#{$sub-field}" // Форматируем путь ошибки, например: "meta::step"
|
|
42
|
+
);
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
}
|
package/src/_var.scss
ADDED
|
@@ -0,0 +1,386 @@
|
|
|
1
|
+
@use "sass:map";
|
|
2
|
+
|
|
3
|
+
$palette: (
|
|
4
|
+
"red": (
|
|
5
|
+
"50": oklch(97.1% 0.013 17.38),
|
|
6
|
+
"100": oklch(93.6% 0.032 17.717),
|
|
7
|
+
"200": oklch(88.5% 0.062 18.334),
|
|
8
|
+
"300": oklch(80.8% 0.114 19.571),
|
|
9
|
+
"400": oklch(70.4% 0.191 22.216),
|
|
10
|
+
"500": oklch(63.7% 0.237 25.331),
|
|
11
|
+
"600": oklch(57.7% 0.245 27.325),
|
|
12
|
+
"700": oklch(50.5% 0.213 27.518),
|
|
13
|
+
"800": oklch(44.4% 0.177 26.899),
|
|
14
|
+
"900": oklch(39.6% 0.141 25.723),
|
|
15
|
+
"950": oklch(25.8% 0.092 26.042),
|
|
16
|
+
),
|
|
17
|
+
"orange": (
|
|
18
|
+
"50": oklch(98% 0.016 73.684),
|
|
19
|
+
"100": oklch(95.4% 0.038 75.164),
|
|
20
|
+
"200": oklch(90.1% 0.076 70.697),
|
|
21
|
+
"300": oklch(83.7% 0.128 66.29),
|
|
22
|
+
"400": oklch(75% 0.183 55.934),
|
|
23
|
+
"500": oklch(70.5% 0.213 47.604),
|
|
24
|
+
"600": oklch(64.6% 0.222 41.116),
|
|
25
|
+
"700": oklch(55.3% 0.195 38.402),
|
|
26
|
+
"800": oklch(47% 0.157 37.304),
|
|
27
|
+
"900": oklch(40.8% 0.123 38.172),
|
|
28
|
+
"950": oklch(26.6% 0.079 36.259),
|
|
29
|
+
),
|
|
30
|
+
"amber": (
|
|
31
|
+
"50": oklch(98.7% 0.022 95.277),
|
|
32
|
+
"100": oklch(96.2% 0.059 95.617),
|
|
33
|
+
"200": oklch(92.4% 0.12 95.746),
|
|
34
|
+
"300": oklch(87.9% 0.169 91.605),
|
|
35
|
+
"400": oklch(82.8% 0.189 84.429),
|
|
36
|
+
"500": oklch(76.9% 0.188 70.08),
|
|
37
|
+
"600": oklch(66.6% 0.179 58.318),
|
|
38
|
+
"700": oklch(55.5% 0.163 48.998),
|
|
39
|
+
"800": oklch(47.3% 0.137 46.201),
|
|
40
|
+
"900": oklch(41.4% 0.112 45.904),
|
|
41
|
+
"950": oklch(27.9% 0.077 45.635),
|
|
42
|
+
),
|
|
43
|
+
"yellow": (
|
|
44
|
+
"50": oklch(98.7% 0.026 102.212),
|
|
45
|
+
"100": oklch(97.3% 0.071 103.193),
|
|
46
|
+
"200": oklch(94.5% 0.129 101.54),
|
|
47
|
+
"300": oklch(90.5% 0.182 98.111),
|
|
48
|
+
"400": oklch(85.2% 0.199 91.936),
|
|
49
|
+
"500": oklch(79.5% 0.184 86.047),
|
|
50
|
+
"600": oklch(68.1% 0.162 75.834),
|
|
51
|
+
"700": oklch(55.4% 0.135 66.442),
|
|
52
|
+
"800": oklch(47.6% 0.114 61.907),
|
|
53
|
+
"900": oklch(42.1% 0.095 57.708),
|
|
54
|
+
"950": oklch(28.6% 0.066 53.813),
|
|
55
|
+
),
|
|
56
|
+
"lime": (
|
|
57
|
+
"50": oklch(98.6% 0.031 120.757),
|
|
58
|
+
"100": oklch(96.7% 0.067 122.328),
|
|
59
|
+
"200": oklch(93.8% 0.127 124.321),
|
|
60
|
+
"300": oklch(89.7% 0.196 126.665),
|
|
61
|
+
"400": oklch(84.1% 0.238 128.85),
|
|
62
|
+
"500": oklch(76.8% 0.233 130.85),
|
|
63
|
+
"600": oklch(64.8% 0.2 131.684),
|
|
64
|
+
"700": oklch(53.2% 0.157 131.589),
|
|
65
|
+
"800": oklch(45.3% 0.124 130.933),
|
|
66
|
+
"900": oklch(40.5% 0.101 131.063),
|
|
67
|
+
"950": oklch(27.4% 0.072 132.109),
|
|
68
|
+
),
|
|
69
|
+
"green": (
|
|
70
|
+
"50": oklch(98.2% 0.018 155.826),
|
|
71
|
+
"100": oklch(96.2% 0.044 156.743),
|
|
72
|
+
"200": oklch(92.5% 0.084 155.995),
|
|
73
|
+
"300": oklch(87.1% 0.15 154.449),
|
|
74
|
+
"400": oklch(79.2% 0.209 151.711),
|
|
75
|
+
"500": oklch(72.3% 0.219 149.579),
|
|
76
|
+
"600": oklch(62.7% 0.194 149.214),
|
|
77
|
+
"700": oklch(52.7% 0.154 150.069),
|
|
78
|
+
"800": oklch(44.8% 0.119 151.328),
|
|
79
|
+
"900": oklch(39.3% 0.095 152.535),
|
|
80
|
+
"950": oklch(26.6% 0.065 152.934),
|
|
81
|
+
),
|
|
82
|
+
"emerald": (
|
|
83
|
+
"50": oklch(97.9% 0.021 166.113),
|
|
84
|
+
"100": oklch(95% 0.052 163.051),
|
|
85
|
+
"200": oklch(90.5% 0.093 164.15),
|
|
86
|
+
"300": oklch(84.5% 0.143 164.978),
|
|
87
|
+
"400": oklch(76.5% 0.177 163.223),
|
|
88
|
+
"500": oklch(69.6% 0.17 162.48),
|
|
89
|
+
"600": oklch(59.6% 0.145 163.225),
|
|
90
|
+
"700": oklch(50.8% 0.118 165.612),
|
|
91
|
+
"800": oklch(43.2% 0.095 166.913),
|
|
92
|
+
"900": oklch(37.8% 0.077 168.94),
|
|
93
|
+
"950": oklch(26.2% 0.051 172.552),
|
|
94
|
+
),
|
|
95
|
+
"teal": (
|
|
96
|
+
"50": oklch(98.4% 0.014 180.72),
|
|
97
|
+
"100": oklch(95.3% 0.051 180.801),
|
|
98
|
+
"200": oklch(91% 0.096 180.426),
|
|
99
|
+
"300": oklch(85.5% 0.138 181.071),
|
|
100
|
+
"400": oklch(77.7% 0.152 181.912),
|
|
101
|
+
"500": oklch(70.4% 0.14 182.503),
|
|
102
|
+
"600": oklch(60% 0.118 184.704),
|
|
103
|
+
"700": oklch(51.1% 0.096 186.391),
|
|
104
|
+
"800": oklch(43.7% 0.078 188.216),
|
|
105
|
+
"900": oklch(38.6% 0.063 188.416),
|
|
106
|
+
"950": oklch(27.7% 0.046 192.524),
|
|
107
|
+
),
|
|
108
|
+
"cyan": (
|
|
109
|
+
"50": oklch(98.4% 0.019 200.873),
|
|
110
|
+
"100": oklch(95.6% 0.045 203.388),
|
|
111
|
+
"200": oklch(91.7% 0.08 205.041),
|
|
112
|
+
"300": oklch(86.5% 0.127 207.078),
|
|
113
|
+
"400": oklch(78.9% 0.154 211.53),
|
|
114
|
+
"500": oklch(71.5% 0.143 215.221),
|
|
115
|
+
"600": oklch(60.9% 0.126 221.723),
|
|
116
|
+
"700": oklch(52% 0.105 223.128),
|
|
117
|
+
"800": oklch(45% 0.085 224.283),
|
|
118
|
+
"900": oklch(39.8% 0.07 227.392),
|
|
119
|
+
"950": oklch(30.2% 0.056 229.695),
|
|
120
|
+
),
|
|
121
|
+
"sky": (
|
|
122
|
+
"50": oklch(97.7% 0.013 236.62),
|
|
123
|
+
"100": oklch(95.1% 0.026 236.824),
|
|
124
|
+
"200": oklch(90.1% 0.058 230.902),
|
|
125
|
+
"300": oklch(82.8% 0.111 230.318),
|
|
126
|
+
"400": oklch(74.6% 0.16 232.661),
|
|
127
|
+
"500": oklch(68.5% 0.169 237.323),
|
|
128
|
+
"600": oklch(58.8% 0.158 241.966),
|
|
129
|
+
"700": oklch(50% 0.134 242.749),
|
|
130
|
+
"800": oklch(44.3% 0.11 240.79),
|
|
131
|
+
"900": oklch(39.1% 0.09 240.876),
|
|
132
|
+
"950": oklch(29.3% 0.066 243.157),
|
|
133
|
+
),
|
|
134
|
+
"blue": (
|
|
135
|
+
"50": oklch(97% 0.014 254.604),
|
|
136
|
+
"100": oklch(93.2% 0.032 255.585),
|
|
137
|
+
"200": oklch(88.2% 0.059 254.128),
|
|
138
|
+
"300": oklch(80.9% 0.105 251.813),
|
|
139
|
+
"400": oklch(70.7% 0.165 254.624),
|
|
140
|
+
"500": oklch(62.3% 0.214 259.815),
|
|
141
|
+
"600": oklch(54.6% 0.245 262.881),
|
|
142
|
+
"700": oklch(48.8% 0.243 264.376),
|
|
143
|
+
"800": oklch(42.4% 0.199 265.638),
|
|
144
|
+
"900": oklch(37.9% 0.146 265.522),
|
|
145
|
+
"950": oklch(28.2% 0.091 267.935),
|
|
146
|
+
),
|
|
147
|
+
"indigo": (
|
|
148
|
+
"50": oklch(96.2% 0.018 272.314),
|
|
149
|
+
"100": oklch(93% 0.034 272.788),
|
|
150
|
+
"200": oklch(87% 0.065 274.039),
|
|
151
|
+
"300": oklch(78.5% 0.115 274.713),
|
|
152
|
+
"400": oklch(67.3% 0.182 276.935),
|
|
153
|
+
"500": oklch(58.5% 0.233 277.117),
|
|
154
|
+
"600": oklch(51.1% 0.262 276.966),
|
|
155
|
+
"700": oklch(45.7% 0.24 277.023),
|
|
156
|
+
"800": oklch(39.8% 0.195 277.366),
|
|
157
|
+
"900": oklch(35.9% 0.144 278.697),
|
|
158
|
+
"950": oklch(25.7% 0.09 281.288),
|
|
159
|
+
),
|
|
160
|
+
"violet": (
|
|
161
|
+
"50": oklch(96.9% 0.016 293.756),
|
|
162
|
+
"100": oklch(94.3% 0.029 294.588),
|
|
163
|
+
"200": oklch(89.4% 0.057 293.283),
|
|
164
|
+
"300": oklch(81.1% 0.111 293.571),
|
|
165
|
+
"400": oklch(70.2% 0.183 293.541),
|
|
166
|
+
"500": oklch(60.6% 0.25 292.717),
|
|
167
|
+
"600": oklch(54.1% 0.281 293.009),
|
|
168
|
+
"700": oklch(49.1% 0.27 292.581),
|
|
169
|
+
"800": oklch(43.2% 0.232 292.759),
|
|
170
|
+
"900": oklch(38% 0.189 293.745),
|
|
171
|
+
"950": oklch(28.3% 0.141 291.089),
|
|
172
|
+
),
|
|
173
|
+
"purple": (
|
|
174
|
+
"50": oklch(97.7% 0.014 308.299),
|
|
175
|
+
"100": oklch(94.6% 0.033 307.174),
|
|
176
|
+
"200": oklch(90.2% 0.063 306.703),
|
|
177
|
+
"300": oklch(82.7% 0.119 306.383),
|
|
178
|
+
"400": oklch(71.4% 0.203 305.504),
|
|
179
|
+
"500": oklch(62.7% 0.265 303.9),
|
|
180
|
+
"600": oklch(55.8% 0.288 302.321),
|
|
181
|
+
"700": oklch(49.6% 0.265 301.924),
|
|
182
|
+
"800": oklch(43.8% 0.218 303.724),
|
|
183
|
+
"900": oklch(38.1% 0.176 304.987),
|
|
184
|
+
"950": oklch(29.1% 0.149 302.717),
|
|
185
|
+
),
|
|
186
|
+
"fuchsia": (
|
|
187
|
+
"50": oklch(97.7% 0.017 320.058),
|
|
188
|
+
"100": oklch(95.2% 0.037 318.852),
|
|
189
|
+
"200": oklch(90.3% 0.076 319.62),
|
|
190
|
+
"300": oklch(83.3% 0.145 321.434),
|
|
191
|
+
"400": oklch(74% 0.238 322.16),
|
|
192
|
+
"500": oklch(66.7% 0.295 322.15),
|
|
193
|
+
"600": oklch(59.1% 0.293 322.896),
|
|
194
|
+
"700": oklch(51.8% 0.253 323.949),
|
|
195
|
+
"800": oklch(45.2% 0.211 324.591),
|
|
196
|
+
"900": oklch(40.1% 0.17 325.612),
|
|
197
|
+
"950": oklch(29.3% 0.136 325.661),
|
|
198
|
+
),
|
|
199
|
+
"pink": (
|
|
200
|
+
"50": oklch(97.1% 0.014 343.198),
|
|
201
|
+
"100": oklch(94.8% 0.028 342.258),
|
|
202
|
+
"200": oklch(89.9% 0.061 343.231),
|
|
203
|
+
"300": oklch(82.3% 0.12 346.018),
|
|
204
|
+
"400": oklch(71.8% 0.202 349.761),
|
|
205
|
+
"500": oklch(65.6% 0.241 354.308),
|
|
206
|
+
"600": oklch(59.2% 0.249 0.584),
|
|
207
|
+
"700": oklch(52.5% 0.223 3.958),
|
|
208
|
+
"800": oklch(45.9% 0.187 3.815),
|
|
209
|
+
"900": oklch(40.8% 0.153 2.432),
|
|
210
|
+
"950": oklch(28.4% 0.109 3.907),
|
|
211
|
+
),
|
|
212
|
+
"rose": (
|
|
213
|
+
"50": oklch(96.9% 0.015 12.422),
|
|
214
|
+
"100": oklch(94.1% 0.03 12.58),
|
|
215
|
+
"200": oklch(89.2% 0.058 10.001),
|
|
216
|
+
"300": oklch(81% 0.117 11.638),
|
|
217
|
+
"400": oklch(71.2% 0.194 13.428),
|
|
218
|
+
"500": oklch(64.5% 0.246 16.439),
|
|
219
|
+
"600": oklch(58.6% 0.253 17.585),
|
|
220
|
+
"700": oklch(51.4% 0.222 16.935),
|
|
221
|
+
"800": oklch(45.5% 0.188 13.697),
|
|
222
|
+
"900": oklch(41% 0.159 10.272),
|
|
223
|
+
"950": oklch(27.1% 0.105 12.094),
|
|
224
|
+
),
|
|
225
|
+
"slate": (
|
|
226
|
+
"50": oklch(98.4% 0.003 247.858),
|
|
227
|
+
"100": oklch(96.8% 0.007 247.896),
|
|
228
|
+
"200": oklch(92.9% 0.013 255.508),
|
|
229
|
+
"300": oklch(86.9% 0.022 252.894),
|
|
230
|
+
"400": oklch(70.4% 0.04 256.788),
|
|
231
|
+
"500": oklch(55.4% 0.046 257.417),
|
|
232
|
+
"600": oklch(44.6% 0.043 257.281),
|
|
233
|
+
"700": oklch(37.2% 0.044 257.287),
|
|
234
|
+
"800": oklch(27.9% 0.041 260.031),
|
|
235
|
+
"900": oklch(20.8% 0.042 265.755),
|
|
236
|
+
"950": oklch(12.9% 0.042 264.695),
|
|
237
|
+
),
|
|
238
|
+
"gray": (
|
|
239
|
+
"50": oklch(98.5% 0.002 247.839),
|
|
240
|
+
"100": oklch(96.7% 0.003 264.542),
|
|
241
|
+
"200": oklch(92.8% 0.006 264.531),
|
|
242
|
+
"300": oklch(87.2% 0.01 258.338),
|
|
243
|
+
"400": oklch(70.7% 0.022 261.325),
|
|
244
|
+
"500": oklch(55.1% 0.027 264.364),
|
|
245
|
+
"600": oklch(44.6% 0.03 256.802),
|
|
246
|
+
"700": oklch(37.3% 0.034 259.733),
|
|
247
|
+
"800": oklch(27.8% 0.033 256.848),
|
|
248
|
+
"900": oklch(21% 0.034 264.665),
|
|
249
|
+
"950": oklch(13% 0.028 261.692),
|
|
250
|
+
),
|
|
251
|
+
"zinc": (
|
|
252
|
+
"50": oklch(98.5% 0 0),
|
|
253
|
+
"100": oklch(96.7% 0.001 286.375),
|
|
254
|
+
"200": oklch(92% 0.004 286.32),
|
|
255
|
+
"300": oklch(87.1% 0.006 286.286),
|
|
256
|
+
"400": oklch(70.5% 0.015 286.067),
|
|
257
|
+
"500": oklch(55.2% 0.016 285.938),
|
|
258
|
+
"600": oklch(44.2% 0.017 285.786),
|
|
259
|
+
"700": oklch(37% 0.013 285.805),
|
|
260
|
+
"800": oklch(27.4% 0.006 286.033),
|
|
261
|
+
"900": oklch(21% 0.006 285.885),
|
|
262
|
+
"950": oklch(14.1% 0.005 285.823),
|
|
263
|
+
),
|
|
264
|
+
"neutral": (
|
|
265
|
+
"50": oklch(98.5% 0 0),
|
|
266
|
+
"100": oklch(97% 0 0),
|
|
267
|
+
"200": oklch(92.2% 0 0),
|
|
268
|
+
"300": oklch(87% 0 0),
|
|
269
|
+
"400": oklch(70.8% 0 0),
|
|
270
|
+
"500": oklch(55.6% 0 0),
|
|
271
|
+
"600": oklch(43.9% 0 0),
|
|
272
|
+
"700": oklch(37.1% 0 0),
|
|
273
|
+
"800": oklch(26.9% 0 0),
|
|
274
|
+
"900": oklch(20.5% 0 0),
|
|
275
|
+
"950": oklch(14.5% 0 0),
|
|
276
|
+
),
|
|
277
|
+
"stone": (
|
|
278
|
+
"50": oklch(98.5% 0.001 106.423),
|
|
279
|
+
"100": oklch(97% 0.001 106.424),
|
|
280
|
+
"200": oklch(92.3% 0.003 48.717),
|
|
281
|
+
"300": oklch(86.9% 0.005 56.366),
|
|
282
|
+
"400": oklch(70.9% 0.01 56.259),
|
|
283
|
+
"500": oklch(55.3% 0.013 58.071),
|
|
284
|
+
"600": oklch(44.4% 0.011 73.639),
|
|
285
|
+
"700": oklch(37.4% 0.01 67.558),
|
|
286
|
+
"800": oklch(26.8% 0.007 34.298),
|
|
287
|
+
"900": oklch(21.6% 0.006 56.043),
|
|
288
|
+
"950": oklch(14.7% 0.004 49.25),
|
|
289
|
+
),
|
|
290
|
+
"mauve": (
|
|
291
|
+
"50": oklch(98.5% 0 0),
|
|
292
|
+
"100": oklch(96% 0.003 325.6),
|
|
293
|
+
"200": oklch(92.2% 0.005 325.62),
|
|
294
|
+
"300": oklch(86.5% 0.012 325.68),
|
|
295
|
+
"400": oklch(71.1% 0.019 323.02),
|
|
296
|
+
"500": oklch(54.2% 0.034 322.5),
|
|
297
|
+
"600": oklch(43.5% 0.029 321.78),
|
|
298
|
+
"700": oklch(36.4% 0.029 323.89),
|
|
299
|
+
"800": oklch(26.3% 0.024 320.12),
|
|
300
|
+
"900": oklch(21.2% 0.019 322.12),
|
|
301
|
+
"950": oklch(14.5% 0.008 326),
|
|
302
|
+
),
|
|
303
|
+
"olive": (
|
|
304
|
+
"50": oklch(98.8% 0.003 106.5),
|
|
305
|
+
"100": oklch(96.6% 0.005 106.5),
|
|
306
|
+
"200": oklch(93% 0.007 106.5),
|
|
307
|
+
"300": oklch(88% 0.011 106.6),
|
|
308
|
+
"400": oklch(73.7% 0.021 106.9),
|
|
309
|
+
"500": oklch(58% 0.031 107.3),
|
|
310
|
+
"600": oklch(46.6% 0.025 107.3),
|
|
311
|
+
"700": oklch(39.4% 0.023 107.4),
|
|
312
|
+
"800": oklch(28.6% 0.016 107.4),
|
|
313
|
+
"900": oklch(22.8% 0.013 107.4),
|
|
314
|
+
"950": oklch(15.3% 0.006 107.1),
|
|
315
|
+
),
|
|
316
|
+
"mist": (
|
|
317
|
+
"50": oklch(98.7% 0.002 197.1),
|
|
318
|
+
"100": oklch(96.3% 0.002 197.1),
|
|
319
|
+
"200": oklch(92.5% 0.005 214.3),
|
|
320
|
+
"300": oklch(87.2% 0.007 219.6),
|
|
321
|
+
"400": oklch(72.3% 0.014 214.4),
|
|
322
|
+
"500": oklch(56% 0.021 213.5),
|
|
323
|
+
"600": oklch(45% 0.017 213.2),
|
|
324
|
+
"700": oklch(37.8% 0.015 216),
|
|
325
|
+
"800": oklch(27.5% 0.011 216.9),
|
|
326
|
+
"900": oklch(21.8% 0.008 223.9),
|
|
327
|
+
"950": oklch(14.8% 0.004 228.8),
|
|
328
|
+
),
|
|
329
|
+
"taupe": (
|
|
330
|
+
"50": oklch(98.6% 0.002 67.8),
|
|
331
|
+
"100": oklch(96% 0.002 17.2),
|
|
332
|
+
"200": oklch(92.2% 0.005 34.3),
|
|
333
|
+
"300": oklch(86.8% 0.007 39.5),
|
|
334
|
+
"400": oklch(71.4% 0.014 41.2),
|
|
335
|
+
"500": oklch(54.7% 0.021 43.1),
|
|
336
|
+
"600": oklch(43.8% 0.017 39.3),
|
|
337
|
+
"700": oklch(36.7% 0.016 35.7),
|
|
338
|
+
"800": oklch(26.8% 0.011 36.5),
|
|
339
|
+
"900": oklch(21.4% 0.009 43.1),
|
|
340
|
+
"950": oklch(14.7% 0.004 49.3),
|
|
341
|
+
),
|
|
342
|
+
"black": #000,
|
|
343
|
+
"white": #fff,
|
|
344
|
+
"inherit": "inherit",
|
|
345
|
+
"current": "currentColor",
|
|
346
|
+
"transparent": "transparent",
|
|
347
|
+
);
|
|
348
|
+
|
|
349
|
+
// prettier-ignore
|
|
350
|
+
$breakpoints: (
|
|
351
|
+
"xs": "30rem", // ~480px | Крупные телефоны (горизонтально)
|
|
352
|
+
"sm": "40rem", // ~640px | Мини-планшеты
|
|
353
|
+
"md": "48rem", // ~768px | Планшеты
|
|
354
|
+
"lg": "64rem", // ~1024px | Ноутбуки
|
|
355
|
+
"xl": "80rem", // ~1280px | Десктопы
|
|
356
|
+
"xxl": "96rem", // ~1536px | Большие мониторы
|
|
357
|
+
"ultra": "120rem", // ~1920px | Ultra-wide / Full HD
|
|
358
|
+
);
|
|
359
|
+
|
|
360
|
+
// prettier-ignore
|
|
361
|
+
$states: (
|
|
362
|
+
// --- Интерактивность (User Action) ---
|
|
363
|
+
"a": "active", // Состояние при нажатии (клик)
|
|
364
|
+
"f": "focus", // Состояние при получении фокуса (любым способом)
|
|
365
|
+
"h": "hover", // Наведение курсора (защищено @media hover в миксине)
|
|
366
|
+
|
|
367
|
+
// --- Доступность и навигация (Accessibility) ---
|
|
368
|
+
"fw": "focus-within", // Фокус на самом элементе или любом его потомке
|
|
369
|
+
"fv": "focus-visible", // Фокус только от клавиатуры (скрывает контур при клике мышью)
|
|
370
|
+
"t": "target", // Элемент, на который ссылается текущий URL (якорь)
|
|
371
|
+
"v": "visited", // Ссылка, по которой пользователь уже переходил
|
|
372
|
+
|
|
373
|
+
// --- Формы и валидация (Form States) ---
|
|
374
|
+
"val": "valid", // Поле ввода с корректно заполненными данными
|
|
375
|
+
"inval": "invalid", // Поле ввода с ошибкой валидации
|
|
376
|
+
"req": "required", // Обязательное для заполнения поле
|
|
377
|
+
"dis": "disabled", // Заблокированный элемент (кнопка или инпут)
|
|
378
|
+
|
|
379
|
+
// --- Положение в структуре (Structural Pseudo-classes) ---
|
|
380
|
+
"first": "first-child", // Первый дочерний элемент в контейнере
|
|
381
|
+
"last": "last-child", // Последний дочерний элемент в контейнере
|
|
382
|
+
"odd": "nth-child(odd)", // Нечетные элементы (для создания "зебры" в списках/таблицах)
|
|
383
|
+
"even": "nth-child(even)", // Четные элементы
|
|
384
|
+
);
|
|
385
|
+
|
|
386
|
+
$template: "*";
|