alsaze/Kotyata
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

initial

Browse Source
This commit is contained in:
Nadar
2026-03-17 13:24:22 +03:00
commit 82e5ac9d81
554 changed files with 29637 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
layers/ui/styles/mixins/border.scss Normal file
View File

@@ -0,0 +1,7 @@
@mixin border($namespace) {
--border-color: var(--input-border-color);
--border-width: 1px;
outline: var(--border-width) solid var(--border-color);
outline-offset: calc(var(--border-width) * -1);
}

48
layers/ui/styles/mixins/element-variant.scss Normal file
View File

@@ -0,0 +1,48 @@
@use "sass:meta";
@use "sass:list";
@use "sass:string";
@mixin element-variant(
$namespace,
$variant: '',
$map: ()
) {
@if meta.type-of($map) == 'map' {
$withDarkVariant: false;
$variantPrefix: if(string.length($variant) > 0, '-' + $variant, '');
@at-root {
:root, .light-theme {
@each $property, $value in $map {
@if meta.type-of($value) == 'list' {
@if $withDarkVariant == false and list.length($value) > 1 {
$withDarkVariant: true;
}
$value: list.nth($value, 1);
}
--#{$namespace}#{$variantPrefix}-#{$property}: #{$value};
}
}
@if $withDarkVariant {
.dark-theme {
@each $property, $value in $map {
@if meta.type-of($value) == 'list' and list.length($value) > 1 {
--#{$namespace}#{$variantPrefix}-#{$property}: #{list.nth($value, 2)};
}
}
}
}
}
@if (string.length($variant) > 0) {
&-#{$variantPrefix} {
@each $property, $value in $map {
--#{$namespace}-#{$property}: var(--#{$namespace}#{$variantPrefix}-#{$property});
}
}
}
}
}

3
layers/ui/styles/mixins/index.scss Normal file
View File

@@ -0,0 +1,3 @@
@forward "typography";
@forward "input";
@forward "element-variant";

200
layers/ui/styles/mixins/input.scss Normal file
View File

@@ -0,0 +1,200 @@
//@use '../variables' as *;
//@use 'typography' as *;
//@use 'element-variant' as *;
//
////noinspection ALL
//@mixin input(
// $namespace,
// $flexWrapper: true,
// $placeholderSelector: '__control::placeholder',
// $withValidationIcons: true,
// $clearAppearance: true,
// $focusedSelector: '&:focus-within, &.is-filled'
//) {
// $self: &;
//
// position: relative;
// width: var(--#{$namespace}-width, 100%);
// text-align: left;
//
// &__label {
// @include txt-s-m(#{$namespace}-label);
//
// display: block;
// background: var(--#{$namespace}-label-background);
// color: var(--#{$namespace}-label-color);
// margin: var(--#{$namespace}-label-margin, 0 0 8px);
// transition: 0.2s ease-out;
// transition-property: opacity, color;
// }
//
// &__wrapper {
// @if $flexWrapper {
// display: flex;
// align-items: center;
// width: var(--#{$namespace}-control-width, 100%);
// height: var(--#{$namespace}-control-height, 40px);
// }
//
// position: relative;
// background: var(--#{$namespace}-background);
// border-radius: var(--#{$namespace}-border-radius, 16px);
// border: var(--#{$namespace}-border, 1px solid var(--#{$namespace}-border-color));
// padding: var(--#{$namespace}-wrapper-padding, 0 15px 0 19px);
// color: var(--#{$namespace}-color);
// transition: 0.2s ease-out;
// transition-property: border-color, border-radius, background-color, color;
//
// > *:not(:first-child) {
// margin-left: var(--#{$namespace}-icons-gap, 8px);
// }
// }
//
// &__control {
// @if $flexWrapper {
// flex: 1;
// height: 100%;
// }
//
// @include txt-i-m(#{$namespace}-control);
//
// width: 100%;
// color: var(--#{$namespace}-control-color);
// border: none;
// background: transparent;
// padding: var(--#{$namespace}-control-padding, 9px 0);
// caret-color: var(--#{$namespace}-caret-color);
//
// @if $clearAppearance {
// appearance: none;
// }
//
// &:focus {
// outline: none;
// }
// }
//
// &#{$placeholderSelector} {
// @include txt-i-m(#{$namespace}-placeholder);
//
// color: var(--#{$namespace}-placeholder-color, var(--#{$namespace}-control-color));
// }
//
// &__loader {
// --spinner-color: var(--#{$namespace}-color);
// }
//
// @if $withValidationIcons {
// &__valid-icon,
// &__invalid-icon {
// pointer-events: none;
// }
// }
//
// &__bottom {
// display: flex;
// justify-content: flex-end;
// margin: var(--#{$namespace}-bottom-margin, 8px 0 0);
// }
//
// &__validation-message {
// //color: var(--#{$namespace}-validation-message-color, $clr-red-500);
// flex: 1;
// }
//
// &__extra {
// margin-left: 8px;
// }
//
// &.is-loading {
// #{$self}__wrapper,
// #{$self}__control {
// cursor: wait;
// }
// }
//
// &.is-filled {
// --#{$namespace}-label-color: var(--#{$namespace}-filled-label-color);
// }
//
// &.is-invalid {
// --#{$namespace}-border-color: var(--#{$namespace}-invalid-border-color);
// }
//
// &:focus-within:not(.is-readonly):not(.is-disabled):not(.is-loading) {
// --#{$namespace}-border-color: var(--#{$namespace}-focus-border-color);
// --#{$namespace}-label-color: var(--#{$namespace}-focus-label-color);
// }
//
// &.is-disabled {
// opacity: var(--#{$namespace}--disabled-opacity, 0.56);
//
// #{$self}__wrapper,
// #{$self}__label,
// #{$self}__control {
// cursor: not-allowed;
// }
// }
//
// &.is-readonly {
// #{$self}__wrapper,
// #{$self}__control {
// cursor: default;
// }
// }
//
// @content;
//
// &--secondary,
// &--tertiary {
//
// #{$self}__label {
// opacity: 0;
// position: absolute;
// z-index: 1;
// }
//
// #{$focusedSelector} {
// #{$self}__label {
// opacity: 1;
// }
// }
//
// #{$self}__wrapper:hover:not(.is-readonly):not(.is-disabled):not(.is-loading) {
// --#{$namespace}-border-color: var(--#{$namespace}-hover-border-color);
// }
// }
//
// &--tertiary {
// --#{$namespace}-wrapper-padding: 0 15px;
// --#{$namespace}-control-height: 48px;
//
// #{$focusedSelector} {
// --#{$namespace}-control-padding: 19px 0 7px;
// }
//
// #{$self}__label {
// left: 16px;
// top: 8px;
// }
// }
//
// &--large {
// --#{$namespace}-control-height: 48px;
// --#{$namespace}-control-padding: 13px 0;
// }
//
// @include element-variant($namespace, '', (
// 'background': ($clr-white-100, $clr-black-300),
// 'border-color': ($clr-white-700, $clr-black-200),
// 'label-color': ($clr-black-150, $clr-black-100),
// 'color': ($clr-black-500, $clr-white-100),
// 'placeholder-color': ($clr-black-100, $clr-black-150),
// 'hover-border-color': ($clr-purple-500, $clr-purple-400),
// 'focus-border-color': ($clr-purple-500, $clr-purple-400),
// 'focus-label-color': ($clr-black-150, $clr-black-100),
// 'filled-label-color': ($clr-black-150, $clr-black-100),
// 'invalid-border-color': $clr-red-500,
// 'caret-color': $clr-purple-500,
// ));
//}

141
layers/ui/styles/mixins/typography.scss Normal file
View File

@@ -0,0 +1,141 @@
@mixin font($size, $weight, $lineHeight, $namespace: null, $onlyVars: false) {
@if ($namespace) {
@if ($onlyVars) {
--#{$namespace}-font-size: #{$size};
--#{$namespace}-font-weight: #{$weight};
--#{$namespace}-line-height: #{$lineHeight};
} @else {
font-size: var(--#{$namespace}-font-size, $size);
font-weight: var(--#{$namespace}-font-weight, $weight);
line-height: var(--#{$namespace}-line-height, $lineHeight);
}
} @else {
font-size: $size;
font-weight: $weight;
line-height: $lineHeight;
}
}
/* Headline */
@mixin h1($namespace: null, $onlyVars: false) {
@include font(32px, 700, 41px, $namespace, $onlyVars);
}
@mixin h2($namespace: null, $onlyVars: false) {
@include font(24px, 700, 31px, $namespace, $onlyVars);
}
@mixin h3($namespace: null, $onlyVars: false) {
@include font(18px, 600, 23px, $namespace, $onlyVars);
}
@mixin h4($namespace: null, $onlyVars: false) {
@include font(14px, 500, 18px, $namespace, $onlyVars);
}
@mixin h5($namespace: null, $onlyVars: false) {
@include font(12px, 500, 15px, $namespace, $onlyVars);
}
/**
Text
Format:
txt-{size}-{weight}
Sizes:
l - Large
m - Medium
i - Interim
r - Regular
s - Small
t - Tiny
Weights:
r - Regular (or leaved empty)
m - Medium
sb - Semibold
b - Bold
*/
@mixin txt-l($namespace: null, $onlyVars: false) {
@include font(18px, 400, 23px, $namespace, $onlyVars);
}
@mixin txt-l-m($namespace: null, $onlyVars: false) {
@include font(18px, 500, 23px, $namespace, $onlyVars);
}
@mixin txt-l-sb($namespace: null, $onlyVars: false) {
@include font(18px, 600, 23px, $namespace, $onlyVars);
}
@mixin txt-l-b($namespace: null, $onlyVars: false) {
@include font(18px, 700, 23px, $namespace, $onlyVars);
}
@mixin txt-m($namespace: null, $onlyVars: false) {
@include font(16px, 400, 20px, $namespace, $onlyVars);
}
@mixin txt-m-m($namespace: null, $onlyVars: false) {
@include font(16px, 500, 20px, $namespace, $onlyVars);
}
@mixin txt-m-sb($namespace: null, $onlyVars: false) {
@include font(16px, 600, 20px, $namespace, $onlyVars);
}
@mixin txt-m-b($namespace: null, $onlyVars: false) {
@include font(16px, 700, 20px, $namespace, $onlyVars);
}
@mixin txt-i($namespace: null, $onlyVars: false) {
@include font(14px, 400, 18px, $namespace, $onlyVars);
}
@mixin txt-i-m($namespace: null, $onlyVars: false) {
@include font(14px, 500, 18px, $namespace, $onlyVars);
}
@mixin txt-i-sb($namespace: null, $onlyVars: false) {
@include font(14px, 600, 18px, $namespace, $onlyVars);
}
@mixin txt-i-b($namespace: null, $onlyVars: false) {
@include font(14px, 700, 18px, $namespace, $onlyVars);
}
@mixin txt-r($namespace: null, $onlyVars: false) {
@include font(12px, 400, 15px, $namespace, $onlyVars);
}
@mixin txt-r-m($namespace: null, $onlyVars: false) {
@include font(12px, 500, 15px, $namespace, $onlyVars);
}
@mixin txt-r-sb($namespace: null, $onlyVars: false) {
@include font(12px, 600, 15px, $namespace, $onlyVars);
}
@mixin txt-r-b($namespace: null, $onlyVars: false) {
@include font(12px, 700, 15px, $namespace, $onlyVars);
}
@mixin txt-s($namespace: null, $onlyVars: false) {
@include font(11px, 400, 14px, $namespace, $onlyVars);
}
@mixin txt-s-m($namespace: null, $onlyVars: false) {
@include font(11px, 500, 14px, $namespace, $onlyVars);
}
@mixin txt-s-sb($namespace: null, $onlyVars: false) {
@include font(11px, 600, 14px, $namespace, $onlyVars);
}
@mixin txt-s-b($namespace: null, $onlyVars: false) {
@include font(11px, 700, 14px, $namespace, $onlyVars);
}
@mixin txt-t($namespace: null, $onlyVars: false) {
@include font(10px, 400, 13px, $namespace, $onlyVars);
}
@mixin txt-t-m($namespace: null, $onlyVars: false) {
@include font(10px, 500, 13px, $namespace, $onlyVars);
}
@mixin txt-t-sb($namespace: null, $onlyVars: false) {
@include font(10px, 600, 13px, $namespace, $onlyVars);
}
@mixin txt-t-b($namespace: null, $onlyVars: false) {
@include font(10px, 700, 13px, $namespace, $onlyVars);
}
@mixin text-gradient {
@content;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
text-fill-color: transparent;
}