- {colors.map((color) => (
- <>
-
- Label
-
-
- >
- ))}
+
+```
+
+## Цвета
+
+```jsx live
+
+
+
+ {colors.map((color) => (
+ <>
+
+ Label
+
+
+ >
+ ))}
+
+
+
+ {colors.map((color) => (
+ <>
+
+ Label
+
+
+ >
+ ))}
+
+
+
+ {colors.map((color) => (
+ <>
+
+ Label
+
+
+ >
+ ))}
+
```
diff --git a/packages/status/src/index.module.css b/packages/status/src/index.module.css
index 8005d1387c..d771d9bf66 100644
--- a/packages/status/src/index.module.css
+++ b/packages/status/src/index.module.css
@@ -2,16 +2,14 @@
@import '../../vars/src/colors-decorative.css';
.component {
- @mixin accent_secondary_small;
-
display: inline-flex;
align-items: center;
justify-content: center;
- height: 20px;
- padding: var(--gap-0) var(--gap-8);
- border-radius: var(--border-radius-s);
+ height: initial;
+ padding: 0;
+ border-radius: 0;
text-align: center;
- text-transform: uppercase;
+ text-transform: initial;
letter-spacing: 0.5px;
& .ellipsis {
@@ -22,6 +20,51 @@
&:empty {
padding: var(--gap-0);
}
+
+ &.size-20 {
+ @mixin accent_secondary_medium;
+ height: 20px;
+ padding: 0 var(--gap-8);
+ border-radius: var(--border-radius-6);
+ }
+
+ &.size-24 {
+ @mixin accent_secondary_medium;
+ height: 24px;
+ padding: 0 var(--gap-12);
+ border-radius: var(--border-radius-6);
+ }
+
+ &.size-32 {
+ @mixin accent_primary_small;
+ height: 32px;
+ padding: 0 var(--gap-16);
+ border-radius: var(--border-radius-10);
+ }
+
+ &.size-40 {
+ @mixin accent_primary_small;
+ height: 40px;
+ padding: 0 var(--gap-20);
+ border-radius: var(--border-radius-12);
+ }
+
+ &.rounded {
+ border-radius: var(--border-radius-pill);
+ }
+
+ &.uppercase {
+ &.size-20,
+ &.size-24 {
+ @mixin accent_secondary_small;
+ text-transform: uppercase;
+ }
+
+ &.size-32,
+ &.size-40 {
+ @mixin accent_caps;
+ }
+ }
}
.soft,
diff --git a/packages/status/src/index.ts b/packages/status/src/index.ts
index e51a5d2440..acba8762f2 100644
--- a/packages/status/src/index.ts
+++ b/packages/status/src/index.ts
@@ -1 +1,2 @@
export * from './Component';
+export { colors } from './consts';