Skip to content

Commit dce66b3

Browse files
author
eugene yevhen andruszczenko
committed
feature: scss mixins and efficiencies
1 parent 301163b commit dce66b3

File tree

2 files changed

+139
-49
lines changed

2 files changed

+139
-49
lines changed

‎src/styles/_mixins.scss

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,3 +11,55 @@
1111
mask-image: $listFader;
1212
mask-size: 100% 100%;
1313
}
14+
15+
/**
16+
* @param {string} $size - The size of the font.
17+
* @param {string} $weight - The weight of the font.
18+
* @param {string} $family - The family of the font.
19+
*/
20+
@mixin mynah-font($size, $weight: normal, $family: var(--mynah-font-family)) {
21+
font-size: $size;
22+
font-weight: $weight;
23+
font-family: $family;
24+
}
25+
26+
/**
27+
* @param {string} $text-color - The color of the text.
28+
* @param {string} $bg-color - The background color.
29+
*/
30+
@mixin mynah-color($text-color, $bg-color) {
31+
color: $text-color;
32+
background-color: $bg-color;
33+
}
34+
35+
/**
36+
* @param {string} $margin - The margin of the element.
37+
* @param {string} $padding - The padding of the element.
38+
*/
39+
@mixin mynah-spacing($margin: 0, $padding: 0) {
40+
margin: $margin;
41+
padding: $padding;
42+
}
43+
44+
/**
45+
* @param {string} $radius - The radius of the border.
46+
*/
47+
@mixin mynah-border-radius($radius) {
48+
border-radius: $radius;
49+
}
50+
51+
/**
52+
* @param {string} $shadow - The shadow of the element.
53+
*/
54+
@mixin mynah-box-shadow($shadow) {
55+
box-shadow: $shadow;
56+
}
57+
58+
/**
59+
* @param {string} $name - The name of the transition.
60+
* @param {number} $duration - The duration of the transition in milliseconds.
61+
* @param {string} $timing-function - The timing function of the transition.
62+
*/
63+
@mixin mynah-transition($name, $duration, $timing-function) {
64+
--mynah-#{$name}-transition: all #{$duration}ms #{$timing-function};
65+
}

‎src/styles/_variables.scss

Lines changed: 87 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -6,34 +6,33 @@
66
--mynah-max-width: 2560px;
77
--mynah-sizing-base: 0.25rem;
88
--mynah-sizing-half: calc(var(--mynah-sizing-base) / 2);
9-
--mynah-sizing-1: var(--mynah-sizing-base);
10-
--mynah-sizing-2: calc(var(--mynah-sizing-base) * 2);
11-
--mynah-sizing-3: calc(var(--mynah-sizing-base) * 3);
12-
--mynah-sizing-4: calc(var(--mynah-sizing-base) * 4);
13-
--mynah-sizing-5: calc(var(--mynah-sizing-base) * 5);
14-
--mynah-sizing-6: calc(var(--mynah-sizing-base) * 6);
15-
--mynah-sizing-7: calc(var(--mynah-sizing-base) * 7);
16-
--mynah-sizing-8: calc(var(--mynah-sizing-base) * 8);
17-
--mynah-sizing-9: calc(var(--mynah-sizing-base) * 9);
18-
--mynah-sizing-10: calc(var(--mynah-sizing-base) * 10);
19-
--mynah-sizing-11: calc(var(--mynah-sizing-base) * 11);
20-
--mynah-sizing-12: calc(var(--mynah-sizing-base) * 12);
21-
--mynah-sizing-13: calc(var(--mynah-sizing-base) * 13);
22-
--mynah-sizing-14: calc(var(--mynah-sizing-base) * 14);
23-
--mynah-sizing-15: calc(var(--mynah-sizing-base) * 15);
24-
--mynah-sizing-16: calc(var(--mynah-sizing-base) * 16);
25-
--mynah-sizing-17: calc(var(--mynah-sizing-base) * 17);
26-
--mynah-sizing-18: calc(var(--mynah-sizing-base) * 18);
9+
10+
/**
11+
* Sizing variables
12+
*/
13+
@for $i from 1 through 18 {
14+
--mynah-sizing-#{$i}: calc(var(--mynah-sizing-base) * #{$i});
15+
}
16+
2717
--mynah-chat-wrapper-spacing: var(--mynah-sizing-4);
2818
--mynah-button-border-width: 1px;
2919
--mynah-border-width: 1px;
3020

31-
--mynah-color-text-default: var(--vscode-foreground);
32-
--mynah-color-text-alternate: var(--mynah-color-button-reverse);
33-
--mynah-color-text-strong: var(--vscode-input-foreground);
34-
--mynah-color-text-weak: var(--vscode-disabledForeground);
35-
--mynah-color-text-link: var(--vscode-textLink-foreground);
36-
--mynah-color-text-input: var(--vscode-input-foreground);
21+
/**
22+
* Color variables
23+
*/
24+
$mynah-color-text: (
25+
'default': var(--vscode-foreground),
26+
'alternate': var(--mynah-color-button-reverse),
27+
'strong': var(--vscode-input-foreground),
28+
'weak': var(--vscode-disabledForeground),
29+
'link': var(--vscode-textLink-foreground),
30+
'input': var(--vscode-input-foreground)
31+
);
32+
33+
@each $name, $value in $mynah-color-text {
34+
--mynah-color-text-#{$name}: #{$value};
35+
}
3736

3837
--mynah-color-bg: var(--vscode-sideBar-background);
3938
--mynah-color-tab-active: var(--vscode-tab-activeBackground, var(--vscode-editor-background, var(--mynah-card-bg)));
@@ -47,22 +46,42 @@
4746
--mynah-color-toggle: var(--vscode-sideBar-background);
4847
--mynah-color-toggle-reverse: rgba(0, 0, 0, 0.5);
4948

50-
--mynah-color-syntax-bg: var(--vscode-terminal-dropBackground);
51-
--mynah-color-syntax-variable: var(--vscode-debugTokenExpression-name);
52-
--mynah-color-syntax-function: var(--vscode-gitDecoration-modifiedResourceForeground);
53-
--mynah-color-syntax-operator: var(--vscode-debugTokenExpression-name);
54-
--mynah-color-syntax-attr-value: var(--vscode-debugIcon-stepBackForeground);
55-
--mynah-color-syntax-attr: var(--vscode-debugTokenExpression-string);
56-
--mynah-color-syntax-property: var(--vscode-terminal-ansiCyan);
57-
--mynah-color-syntax-comment: var(--vscode-debugConsole-sourceForeground);
58-
--mynah-color-syntax-code: var(--vscode-editor-foreground, var(--mynah-color-text-default, inherit));
49+
50+
/**
51+
* Syntax highlighting variables
52+
*/
53+
$mynah-syntax-colors: (
54+
'bg': var(--vscode-terminal-dropBackground),
55+
'variable': var(--vscode-debugTokenExpression-name),
56+
'function': var(--vscode-gitDecoration-modifiedResourceForeground),
57+
'operator': var(--vscode-debugTokenExpression-name),
58+
'attr-value': var(--vscode-debugIcon-stepBackForeground),
59+
'attr': var(--vscode-debugTokenExpression-string),
60+
'property': var(--vscode-terminal-ansiCyan),
61+
'comment': var(--vscode-debugConsole-sourceForeground),
62+
'code': var(--vscode-editor-foreground, var(--mynah-color-text-default, inherit))
63+
);
64+
65+
@each $name, $value in $mynah-syntax-colors {
66+
--mynah-color-syntax-#{$name}: #{$value};
67+
}
68+
5969
--mynah-syntax-code-font-family: var(--vscode-editor-font-family);
6070
--mynah-syntax-code-font-size: var(--vscode-editor-font-size, var(--mynah-font-size-medium));
6171

62-
--mynah-color-status-info: #0971d3;
63-
--mynah-color-status-success: #037f03;
64-
--mynah-color-status-warning: #b2911c;
65-
--mynah-color-status-error: #d91515;
72+
/**
73+
* Status variables
74+
*/
75+
$mynah-status-colors: (
76+
'info': #0971d3
77+
'success': #037f03
78+
'warning': #b2911c
79+
'error': #d91515
80+
);
81+
82+
@each $name, $value in $mynah-status-colors {
83+
--mynah-color-status-#{$name}: #{$value};
84+
}
6685

6786
--mynah-color-button: var(--vscode-button-background);
6887
--mynah-color-button-reverse: var(--vscode-button-foreground);
@@ -77,11 +96,21 @@
7796
--mynah-shadow-card: none; //0 10px 20px -15px rgba(0, 0, 0, 0.25);
7897
--mynah-shadow-overlay: 0 0px 15px -5px rgba(0, 0, 0, 0.4);
7998

80-
--mynah-font-size-xxsmall: 0.75rem;
81-
--mynah-font-size-xsmall: 0.85rem;
82-
--mynah-font-size-small: 0.95rem;
83-
--mynah-font-size-medium: 1rem;
84-
--mynah-font-size-large: 1.125rem;
99+
/**
100+
* Font variables
101+
*/
102+
$mynah-font-sizes: (
103+
'xxsmall': 0.75rem,
104+
'xsmall': 0.85rem,
105+
'small': 0.95rem,
106+
'medium': 1rem,
107+
'large': 1.125rem
108+
);
109+
110+
@each $name, $value in $mynah-font-sizes {
111+
--mynah-font-size-#{$name}: #{$value};
112+
}
113+
85114
--mynah-line-height: 1.5rem;
86115
--mynah-syntax-code-line-height: 1.5rem;
87116

@@ -90,12 +119,21 @@
90119
--mynah-card-radius-corner: 0;
91120
--mynah-button-radius: var(--mynah-sizing-1);
92121

93-
--mynah-bottom-panel-transition: all 850ms cubic-bezier(0.25, 1, 0, 1);
94-
--mynah-very-short-transition: all 600ms cubic-bezier(0.25, 1, 0, 1);
95-
--mynah-very-long-transition: all 1650ms cubic-bezier(0.25, 1, 0, 1);
96-
--mynah-short-transition: all 550ms cubic-bezier(0.85, 0.15, 0, 1);
97-
--mynah-short-transition-rev: all 580ms cubic-bezier(0.35, 1, 0, 1);
122+
123+
/**
124+
* Transition variables
125+
*/
126+
$mynah-transitions: (
127+
'bottom-panel': (850, cubic-bezier(0.25, 1, 0, 1)),
128+
'very-short': (600, cubic-bezier(0.25, 1, 0, 1)),
129+
'very-long': (1650, cubic-bezier(0.25, 1, 0, 1)),
130+
'short': (550, cubic-bezier(0.85, 0.15, 0, 1)),
131+
'short-rev': (580, cubic-bezier(0.35, 1, 0, 1))
132+
);
133+
@each $name, $values in $mynah-transitions {
134+
@include mynah-transition($name, nth($values, 1), nth($values, 2));
135+
}
136+
98137
--mynah-short-transition-rev-opacity: opacity 750ms cubic-bezier(0.35, 1, 0, 1);
99-
--mynah-text-flow-transition: all 800ms cubic-bezier(0.35, 1.2, 0, 1),
100-
transform 800ms cubic-bezier(0.2, 1.05, 0, 1);
138+
--mynah-text-flow-transition: all 800ms cubic-bezier(0.35, 1.2, 0, 1), transform 800ms cubic-bezier(0.2, 1.05, 0, 1);
101139
}

0 commit comments

Comments
 (0)