@tk-kit/design-system 0.1.16

package/dist/styles/_utilities.css

@@ -0,0 +1,402 @@
+/* Backgrounds */
+@utility bg-neutral-primary {
+  background-color: var(--color-background-neutral-primary);
+}
+@utility bg-neutral-secondary {
+  background-color: var(--color-background-neutral-secondary);
+}
+@utility bg-neutral-tertiary {
+  background-color: var(--color-background-neutral-tertiary);
+}
+@utility bg-neutral-white {
+  background-color: var(--color-background-neutral-white);
+}
+
+@utility bg-brand-primary {
+  background-color: var(--color-background-brand-primary);
+}
+@utility bg-brand-secondary {
+  background-color: var(--color-background-brand-secondary);
+}
+@utility bg-brand-tertiary {
+  background-color: var(--color-background-brand-tertiary);
+}
+
+@utility bg-danger-primary {
+  background-color: var(--color-background-danger-primary);
+}
+@utility bg-danger-secondary {
+  background-color: var(--color-background-danger-secondary);
+}
+@utility bg-danger-tertiary {
+  background-color: var(--color-background-danger-tertiary);
+}
+
+@utility bg-success-primary {
+  background-color: var(--color-background-success-primary);
+}
+@utility bg-success-secondary {
+  background-color: var(--color-background-success-secondary);
+}
+@utility bg-success-tertiary {
+  background-color: var(--color-background-success-tertiary);
+}
+
+@utility bg-warning-primary {
+  background-color: var(--color-background-warning-primary);
+}
+@utility bg-warning-secondary {
+  background-color: var(--color-background-warning-secondary);
+}
+@utility bg-warning-tertiary {
+  background-color: var(--color-background-warning-tertiary);
+}
+
+@utility bg-disable-primary {
+  background-color: var(--color-background-disable-primary);
+}
+@utility bg-disable-secondary {
+  background-color: var(--color-background-disable-secondary);
+}
+@utility bg-disable-tertiary {
+  background-color: var(--color-background-disable-tertiary);
+}
+
+/* Text */
+@utility text-neutral-primary {
+  color: var(--color-text-neutral-primary);
+}
+@utility text-neutral-secondary {
+  color: var(--color-text-neutral-secondary);
+}
+
+@utility text-neutral-tertiary {
+  color: var(--color-text-neutral-tertiary);
+}
+@utility text-neutral-white {
+  color: var(--color-text-neutral-white);
+}
+
+@utility text-brand-primary {
+  color: var(--color-text-brand-primary);
+}
+@utility text-brand-secondary {
+  color: var(--color-text-brand-secondary);
+}
+@utility text-brand-tertiary {
+  color: var(--color-text-brand-tertiary);
+}
+
+@utility text-danger-primary {
+  color: var(--color-text-danger-primary);
+}
+@utility text-danger-secondary {
+  color: var(--color-text-danger-secondary);
+}
+@utility text-danger-tertiary {
+  color: var(--color-text-danger-tertiary);
+}
+
+@utility text-success-primary {
+  color: var(--color-text-success-primary);
+}
+@utility text-success-secondary {
+  color: var(--color-text-success-secondary);
+}
+@utility text-success-tertiary {
+  color: var(--color-text-success-tertiary);
+}
+
+@utility text-warning-primary {
+  color: var(--color-text-warning-primary);
+}
+@utility text-warning-secondary {
+  color: var(--color-text-warning-secondary);
+}
+@layer utilities {
+  .text-warning-secondary {
+    color: var(--color-text-warning-secondary);
+  }
+}
+@utility text-warning-tertiary {
+  color: var(--color-text-warning-tertiary);
+}
+
+@utility text-disable-primary {
+  color: var(--color-text-disable-primary);
+}
+@utility text-disable-secondary {
+  color: var(--color-text-disable-secondary);
+}
+@utility text-disable-tertiary {
+  color: var(--color-text-disable-tertiary);
+}
+
+/* Borders */
+@utility border-neutral-primary {
+  border-color: var(--color-border-neutral-primary);
+}
+@utility border-neutral-secondary {
+  border-color: var(--color-border-neutral-secondary);
+}
+@utility border-neutral-tertiary {
+  border-color: var(--color-border-neutral-tertiary);
+}
+@utility border-neutral-white {
+  border-color: var(--color-border-neutral-white);
+}
+
+@utility border-brand-primary {
+  border-color: var(--color-border-brand-primary);
+}
+@utility border-brand-secondary {
+  border-color: var(--color-border-brand-secondary);
+}
+@utility border-brand-tertiary {
+  border-color: var(--color-border-brand-tertiary);
+}
+
+@utility border-danger-primary {
+  border-color: var(--color-border-danger-primary);
+}
+@utility border-danger-secondary {
+  border-color: var(--color-border-danger-secondary);
+}
+@utility border-danger-tertiary {
+  border-color: var(--color-border-danger-tertiary);
+}
+
+@utility border-success-primary {
+  border-color: var(--color-border-success-primary);
+}
+@utility border-success-secondary {
+  border-color: var(--color-border-success-secondary);
+}
+@utility border-success-tertiary {
+  border-color: var(--color-border-success-tertiary);
+}
+
+@utility border-warning-primary {
+  border-color: var(--color-border-warning-primary);
+}
+@utility border-warning-secondary {
+  border-color: var(--color-border-warning-secondary);
+}
+@utility border-warning-tertiary {
+  border-color: var(--color-border-warning-tertiary);
+}
+
+@utility border-disable-primary {
+  border-color: var(--color-border-disable-primary);
+}
+@utility border-disable-secondary {
+  border-color: var(--color-border-disable-secondary);
+}
+@utility border-disable-tertiary {
+  border-color: var(--color-border-disable-tertiary);
+}
+
+/* Icons */
+@utility icon-neutral-primary {
+  color: var(--color-icon-neutral-primary);
+}
+@utility icon-neutral-secondary {
+  color: var(--color-icon-neutral-secondary);
+}
+@utility icon-neutral-tertiary {
+  color: var(--color-icon-neutral-tertiary);
+}
+@utility icon-neutral-white {
+  color: var(--color-icon-neutral-white);
+}
+
+@utility icon-brand-primary {
+  color: var(--color-icon-brand-primary);
+}
+@utility icon-brand-secondary {
+  color: var(--color-icon-brand-secondary);
+}
+@utility icon-brand-tertiary {
+  color: var(--color-icon-brand-tertiary);
+}
+
+@utility icon-danger-primary {
+  color: var(--color-icon-danger-primary);
+}
+@utility icon-danger-secondary {
+  color: var(--color-icon-danger-secondary);
+}
+@utility icon-danger-tertiary {
+  color: var(--color-icon-danger-tertiary);
+}
+
+@utility icon-success-primary {
+  color: var(--color-icon-success-primary);
+}
+@utility icon-success-secondary {
+  color: var(--color-icon-success-secondary);
+}
+@utility icon-success-tertiary {
+  color: var(--color-icon-success-tertiary);
+}
+
+@utility icon-warning-primary {
+  color: var(--color-icon-warning-primary);
+}
+@utility icon-warning-secondary {
+  color: var(--color-icon-warning-secondary);
+}
+@utility icon-warning-tertiary {
+  color: var(--color-icon-warning-tertiary);
+}
+
+@utility icon-disable-primary {
+  color: var(--color-icon-disable-primary);
+}
+@utility icon-disable-secondary {
+  color: var(--color-icon-disable-secondary);
+}
+@utility icon-disable-tertiary {
+  color: var(--color-icon-disable-tertiary);
+}
+/* Hover-состояния */
+
+@utility bg-neutral-hover-white {
+  background-color: var(--color-background-neutral-hover-white);
+}
+@utility bg-neutral-hover-primary {
+  background-color: var(--color-background-neutral-hover-primary);
+}
+@utility bg-neutral-hover-secondary {
+  background-color: var(--color-background-neutral-hover-secondary);
+}
+@utility bg-neutral-hover-tertiary {
+  background-color: var(--color-background-neutral-hover-tertiary);
+}
+@utility bg-danger-hover-primary {
+  background-color: var(--color-background-danger-hover-primary);
+}
+@utility bg-danger-hover-secondary {
+  background-color: var(--color-background-danger-hover-secondary);
+}
+@utility bg-danger-hover-tertiary {
+  background-color: var(--color-background-danger-hover-tertiary);
+}
+@utility bg-brand-hover-primary {
+  background-color: var(--color-background-brand-hover-primary);
+}
+@utility bg-brand-hover-secondary {
+  background-color: var(--color-background-brand-hover-secondary);
+}
+@utility bg-brand-hover-tertiary {
+  background-color: var(--color-background-brand-hover-tertiary);
+}
+@utility bg-success-hover-primary {
+  background-color: var(--color-background-success-hover-primary);
+}
+@utility bg-success-hover-secondary {
+  background-color: var(--color-background-success-hover-secondary);
+}
+@utility bg-success-hover-tertiary {
+  background-color: var(--color-background-success-hover-tertiary);
+}
+@utility bg-warning-hover-primary {
+  background-color: var(--color-background-warning-hover-primary);
+}
+@utility bg-warning-hover-secondary {
+  background-color: var(--color-background-warning-hover-secondary);
+}
+@utility bg-warning-hover-tertiary {
+  background-color: var(--color-background-warning-hover-tertiary);
+}
+@utility bg-disable-hover-primary {
+  background-color: var(--color-background-disable-hover-primary);
+}
+@utility bg-disable-hover-secondary {
+  background-color: var(--color-background-disable-hover-secondary);
+}
+@utility bg-disable-hover-tertiary {
+  background-color: var(--color-background-disable-hover-tertiary);
+}
+
+@utility text-neutral-hover-white {
+  color: var(--color-text-neutral-hover-white);
+}
+@utility text-neutral-hover-primary {
+  color: var(--color-text-neutral-hover-primary);
+}
+@utility text-neutral-hover-secondary {
+  color: var(--color-text-neutral-hover-secondary);
+}
+@utility text-neutral-hover-tertiary {
+  color: var(--color-text-neutral-hover-tertiary);
+}
+@utility text-brand-hover-primary {
+  color: var(--color-text-brand-hover-primary);
+}
+@utility text-brand-hover-secondary {
+  color: var(--color-text-brand-hover-secondary);
+}
+@utility text-brand-hover-tertiary {
+  color: var(--color-text-brand-hover-tertiary);
+}
+@utility text-success-hover-primary {
+  color: var(--color-text-success-hover-primary);
+}
+@utility text-success-hover-secondary {
+  color: var(--color-text-success-hover-secondary);
+}
+@utility text-success-hover-tertiary {
+  color: var(--color-text-success-hover-tertiary);
+}
+@utility text-warning-hover-primary {
+  color: var(--color-text-warning-hover-primary);
+}
+@utility text-warning-hover-secondary {
+  color: var(--color-text-warning-hover-secondary);
+}
+@utility text-warning-hover-tertiary {
+  color: var(--color-text-warning-hover-tertiary);
+}
+@utility text-danger-hover-primary {
+  color: var(--color-text-danger-hover-primary);
+}
+@utility text-danger-hover-secondary {
+  color: var(--color-text-danger-hover-secondary);
+}
+@utility text-danger-hover-tertiary {
+  color: var(--color-text-danger-hover-tertiary);
+}
+@utility text-disable-hover-primary {
+  color: var(--color-text-disable-hover-primary);
+}
+@utility text-disable-hover-secondary {
+  color: var(--color-text-disable-hover-secondary);
+}
+@utility text-disable-hover-tertiary {
+  color: var(--color-text-disable-hover-tertiary);
+}
+@utility border-neutral-hover-white {
+  border-color: var(--color-border-neutral-hover-white);
+}
+@utility border-neutral-hover-primary {
+  border-color: var(--color-border-neutral-hover-primary);
+}
+@utility border-neutral-hover-secondary {
+  border-color: var(--color-border-neutral-hover-secondary);
+}
+@utility border-neutral-hover-tertiary {
+  border-color: var(--color-border-neutral-hover-tertiary);
+}
+@utility border-brand-hover-primary {
+  border-color: var(--color-border-brand-hover-primary);
+}
+@utility border-brand-hover-secondary {
+  border-color: var(--color-border-brand-hover-secondary);
+}
+@utility border-brand-hover-tertiary {
+  border-color: var(--color-border-brand-hover-tertiary);
+}
+
+@variant data-horizontal (&[data-orientation="horizontal"]);
+@variant data-vertical (&[data-orientation="vertical"]);