procode-vs-theme 1.0.3 → 1.0.5

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.
Files changed (96) hide show
  1. package/dist/index.esm.js +48 -11
  2. package/dist/index.esm.js.map +1 -1
  3. package/dist/index.js +48 -11
  4. package/dist/index.js.map +1 -1
  5. package/dist/src/{_border.scss → base/_border.scss} +11 -8
  6. package/dist/src/base/_color.scss +41 -0
  7. package/dist/src/base/_custom-properties.scss +102 -0
  8. package/dist/src/base/_font.scss +37 -0
  9. package/dist/src/base/_size.scss +7 -0
  10. package/dist/src/base/_space.scss +27 -0
  11. package/dist/src/base/mixins/_breakpoints.scss +27 -0
  12. package/dist/src/baseExports.ts +35 -0
  13. package/dist/src/components/_buttons.scss +393 -0
  14. package/dist/src/components.ts +20 -0
  15. package/dist/src/index.scss +71 -24
  16. package/dist/src/index.ts +52 -0
  17. package/dist/src/layout.ts +23 -0
  18. package/dist/src/utilities/_cursor.scss +7 -0
  19. package/dist/src/utilities/_display.scss +20 -0
  20. package/dist/src/utilities/_flex.scss +82 -0
  21. package/dist/src/utilities/_opacity.scss +7 -0
  22. package/dist/src/utilities/_overflow.scss +7 -0
  23. package/dist/src/utilities/_position.scss +26 -0
  24. package/dist/src/utilities/_sizing.scss +13 -0
  25. package/dist/src/utilities/_text.scss +49 -0
  26. package/dist/src/utilities/_visibility.scss +2 -0
  27. package/dist/src/utilities/background-color/index.scss +37 -0
  28. package/dist/src/{_border-radius.scss → utilities/border/_border-radius.scss} +29 -17
  29. package/dist/src/utilities/box-shadow/index.scss +17 -0
  30. package/dist/src/utilities/size/index.scss +9 -0
  31. package/dist/src/utilities/spaces/_gap.scss +15 -0
  32. package/dist/src/utilities/spaces/_margin.scss +46 -0
  33. package/dist/src/utilities/spaces/_padding.scss +37 -0
  34. package/dist/src/utilities/typography/_color.scss +51 -0
  35. package/dist/src/utilities.ts +112 -0
  36. package/dist/src/variables.ts +36 -0
  37. package/dist/types/baseExports.d.ts +0 -2
  38. package/dist/types/utilities.d.ts +18 -0
  39. package/dist/types/variables.d.ts +0 -2
  40. package/dist/utilities.esm.js +39 -3
  41. package/dist/utilities.esm.js.map +1 -1
  42. package/dist/utilities.js +47 -2
  43. package/dist/utilities.js.map +1 -1
  44. package/dist/variables.esm.js +1 -4
  45. package/dist/variables.esm.js.map +1 -1
  46. package/dist/variables.js +0 -4
  47. package/dist/variables.js.map +1 -1
  48. package/package.json +2 -2
  49. package/src/base/_border.scss +11 -8
  50. package/src/base/_color.scss +3 -1
  51. package/src/base/_custom-properties.scss +102 -0
  52. package/src/base/_font.scss +37 -26
  53. package/src/base/_size.scss +7 -4
  54. package/src/base/_space.scss +27 -4
  55. package/src/base/mixins/_breakpoints.scss +27 -0
  56. package/src/baseExports.ts +0 -4
  57. package/src/components/_buttons.scss +393 -38
  58. package/src/index.scss +71 -24
  59. package/src/utilities/_cursor.scss +7 -0
  60. package/src/utilities/_display.scss +20 -0
  61. package/src/utilities/_flex.scss +82 -0
  62. package/src/utilities/_opacity.scss +7 -0
  63. package/src/utilities/_overflow.scss +7 -0
  64. package/src/utilities/_position.scss +26 -0
  65. package/src/utilities/_sizing.scss +13 -0
  66. package/src/utilities/_text.scss +49 -0
  67. package/src/utilities/_visibility.scss +2 -0
  68. package/src/utilities/border/_border-radius.scss +29 -17
  69. package/src/utilities/box-shadow/index.scss +17 -8
  70. package/src/utilities/spaces/_gap.scss +15 -20
  71. package/src/utilities/spaces/_margin.scss +46 -69
  72. package/src/utilities/spaces/_padding.scss +37 -69
  73. package/src/utilities/typography/_color.scss +51 -35
  74. package/src/utilities.ts +112 -67
  75. package/src/variables.ts +1 -5
  76. package/dist/src/_apply-theme.scss +0 -28
  77. package/dist/src/_buttons.scss +0 -38
  78. package/dist/src/_color.scss +0 -35
  79. package/dist/src/_gap.scss +0 -20
  80. package/dist/src/_margin.scss +0 -69
  81. package/dist/src/_padding.scss +0 -69
  82. package/dist/src/_size.scss +0 -4
  83. package/dist/src/_space.scss +0 -4
  84. package/src/base/mixins/_apply-theme.scss +0 -28
  85. /package/dist/src/{_font_size-mx.scss → base/mixins/_font_size-mx.scss} +0 -0
  86. /package/dist/src/{_media-query-mx.scss → base/mixins/_media-query-mx.scss} +0 -0
  87. /package/dist/src/{_cards.scss → components/_cards.scss} +0 -0
  88. /package/dist/src/{_input.scss → components/_input.scss} +0 -0
  89. /package/dist/src/{_drawer.scss → layout/_drawer.scss} +0 -0
  90. /package/dist/src/{_footer.scss → layout/_footer.scss} +0 -0
  91. /package/dist/src/{_header.scss → layout/_header.scss} +0 -0
  92. /package/dist/src/{_sidebar.scss → layout/_sidebar.scss} +0 -0
  93. /package/dist/src/{_reset.scss → utilities/_reset.scss} +0 -0
  94. /package/dist/src/{_border-color.scss → utilities/border/_border-color.scss} +0 -0
  95. /package/dist/src/{_border-size.scss → utilities/border/_border-size.scss} +0 -0
  96. /package/dist/src/{_font.scss → utilities/typography/_font.scss} +0 -0
package/dist/index.esm.js CHANGED
@@ -9,7 +9,6 @@ const sizes$1 = './base/_size.scss';
9
9
  // Mixins
10
10
  const mediaQueryMixins$1 = './base/mixins/_media-query-mx.scss';
11
11
  const fontSizeMixins$1 = './base/mixins/_font_size-mx.scss';
12
- const applyThemeMixins$1 = './base/mixins/_apply-theme.scss';
13
12
  // All base variables combined
14
13
  const allVariables = [
15
14
  colors$1,
@@ -19,7 +18,6 @@ const allVariables = [
19
18
  sizes$1,
20
19
  mediaQueryMixins$1,
21
20
  fontSizeMixins$1,
22
- applyThemeMixins$1
23
21
  ];
24
22
  var variables = {
25
23
  colors: colors$1,
@@ -30,7 +28,6 @@ var variables = {
30
28
  mixins: {
31
29
  mediaQuery: mediaQueryMixins$1,
32
30
  fontSize: fontSizeMixins$1,
33
- applyTheme: applyThemeMixins$1
34
31
  },
35
32
  all: allVariables
36
33
  };
@@ -38,7 +35,6 @@ var variables = {
38
35
  var variables$1 = /*#__PURE__*/Object.freeze({
39
36
  __proto__: null,
40
37
  allVariables: allVariables,
41
- applyThemeMixins: applyThemeMixins$1,
42
38
  borders: borders$2,
43
39
  colors: colors$1,
44
40
  default: variables,
@@ -59,7 +55,6 @@ const sizes = './base/_size.scss';
59
55
  // Mixins
60
56
  const mediaQueryMixins = './base/mixins/_media-query-mx.scss';
61
57
  const fontSizeMixins = './base/mixins/_font_size-mx.scss';
62
- const applyThemeMixins = './base/mixins/_apply-theme.scss';
63
58
  // All base styles combined
64
59
  const allBase = [
65
60
  colors,
@@ -69,7 +64,6 @@ const allBase = [
69
64
  sizes,
70
65
  mediaQueryMixins,
71
66
  fontSizeMixins,
72
- applyThemeMixins
73
67
  ];
74
68
  var baseExports = {
75
69
  colors,
@@ -80,7 +74,6 @@ var baseExports = {
80
74
  mixins: {
81
75
  mediaQuery: mediaQueryMixins,
82
76
  fontSize: fontSizeMixins,
83
- applyTheme: applyThemeMixins
84
77
  },
85
78
  all: allBase
86
79
  };
@@ -88,7 +81,6 @@ var baseExports = {
88
81
  var baseExports$1 = /*#__PURE__*/Object.freeze({
89
82
  __proto__: null,
90
83
  allBase: allBase,
91
- applyThemeMixins: applyThemeMixins,
92
84
  borders: borders$1,
93
85
  colors: colors,
94
86
  default: baseExports,
@@ -167,7 +159,7 @@ const typographyColor = './utilities/typography/_color.scss';
167
159
  const typography = [typographyFont, typographyColor];
168
160
  // Background utilities
169
161
  const backgroundColor = './utilities/background-color/index.scss';
170
- // Border utilities
162
+ // Border utilities
171
163
  const borderColor = './utilities/border/_border-color.scss';
172
164
  const borderRadius = './utilities/border/_border-radius.scss';
173
165
  const borderSize = './utilities/border/_border-size.scss';
@@ -181,6 +173,24 @@ const spacing = [gap, margin, padding];
181
173
  const boxShadow = './utilities/box-shadow/index.scss';
182
174
  // Size utilities
183
175
  const size = './utilities/size/index.scss';
176
+ // Display utilities
177
+ const display = './utilities/_display.scss';
178
+ // Flex utilities
179
+ const flex = './utilities/_flex.scss';
180
+ // Text utilities
181
+ const text = './utilities/_text.scss';
182
+ // Position utilities
183
+ const position = './utilities/_position.scss';
184
+ // Overflow utilities
185
+ const overflow = './utilities/_overflow.scss';
186
+ // Opacity utilities
187
+ const opacity = './utilities/_opacity.scss';
188
+ // Cursor utilities
189
+ const cursor = './utilities/_cursor.scss';
190
+ // Sizing utilities (width/height)
191
+ const sizing = './utilities/_sizing.scss';
192
+ // Visibility utilities
193
+ const visibility = './utilities/_visibility.scss';
184
194
  // All utilities combined
185
195
  const allUtilities = [
186
196
  reset,
@@ -189,7 +199,16 @@ const allUtilities = [
189
199
  ...borders,
190
200
  ...spacing,
191
201
  boxShadow,
192
- size
202
+ size,
203
+ display,
204
+ flex,
205
+ text,
206
+ position,
207
+ overflow,
208
+ opacity,
209
+ cursor,
210
+ sizing,
211
+ visibility,
193
212
  ];
194
213
  var utilities = {
195
214
  reset,
@@ -213,6 +232,15 @@ var utilities = {
213
232
  },
214
233
  boxShadow,
215
234
  size,
235
+ display,
236
+ flex,
237
+ text,
238
+ position,
239
+ overflow,
240
+ opacity,
241
+ cursor,
242
+ sizing,
243
+ visibility,
216
244
  all: allUtilities
217
245
  };
218
246
 
@@ -225,16 +253,25 @@ var utilities$1 = /*#__PURE__*/Object.freeze({
225
253
  borderSize: borderSize,
226
254
  borders: borders,
227
255
  boxShadow: boxShadow,
256
+ cursor: cursor,
228
257
  default: utilities,
258
+ display: display,
259
+ flex: flex,
229
260
  gap: gap,
230
261
  margin: margin,
262
+ opacity: opacity,
263
+ overflow: overflow,
231
264
  padding: padding,
265
+ position: position,
232
266
  reset: reset,
233
267
  size: size,
268
+ sizing: sizing,
234
269
  spacing: spacing,
270
+ text: text,
235
271
  typography: typography,
236
272
  typographyColor: typographyColor,
237
- typographyFont: typographyFont
273
+ typographyFont: typographyFont,
274
+ visibility: visibility
238
275
  });
239
276
 
240
277
  // VS Theme - Main Entry Point
@@ -1 +1 @@
1
- {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
package/dist/index.js CHANGED
@@ -13,7 +13,6 @@ const sizes$1 = './base/_size.scss';
13
13
  // Mixins
14
14
  const mediaQueryMixins$1 = './base/mixins/_media-query-mx.scss';
15
15
  const fontSizeMixins$1 = './base/mixins/_font_size-mx.scss';
16
- const applyThemeMixins$1 = './base/mixins/_apply-theme.scss';
17
16
  // All base variables combined
18
17
  const allVariables = [
19
18
  colors$1,
@@ -23,7 +22,6 @@ const allVariables = [
23
22
  sizes$1,
24
23
  mediaQueryMixins$1,
25
24
  fontSizeMixins$1,
26
- applyThemeMixins$1
27
25
  ];
28
26
  var variables = {
29
27
  colors: colors$1,
@@ -34,7 +32,6 @@ var variables = {
34
32
  mixins: {
35
33
  mediaQuery: mediaQueryMixins$1,
36
34
  fontSize: fontSizeMixins$1,
37
- applyTheme: applyThemeMixins$1
38
35
  },
39
36
  all: allVariables
40
37
  };
@@ -42,7 +39,6 @@ var variables = {
42
39
  var variables$1 = /*#__PURE__*/Object.freeze({
43
40
  __proto__: null,
44
41
  allVariables: allVariables,
45
- applyThemeMixins: applyThemeMixins$1,
46
42
  borders: borders$2,
47
43
  colors: colors$1,
48
44
  default: variables,
@@ -63,7 +59,6 @@ const sizes = './base/_size.scss';
63
59
  // Mixins
64
60
  const mediaQueryMixins = './base/mixins/_media-query-mx.scss';
65
61
  const fontSizeMixins = './base/mixins/_font_size-mx.scss';
66
- const applyThemeMixins = './base/mixins/_apply-theme.scss';
67
62
  // All base styles combined
68
63
  const allBase = [
69
64
  colors,
@@ -73,7 +68,6 @@ const allBase = [
73
68
  sizes,
74
69
  mediaQueryMixins,
75
70
  fontSizeMixins,
76
- applyThemeMixins
77
71
  ];
78
72
  var baseExports = {
79
73
  colors,
@@ -84,7 +78,6 @@ var baseExports = {
84
78
  mixins: {
85
79
  mediaQuery: mediaQueryMixins,
86
80
  fontSize: fontSizeMixins,
87
- applyTheme: applyThemeMixins
88
81
  },
89
82
  all: allBase
90
83
  };
@@ -92,7 +85,6 @@ var baseExports = {
92
85
  var baseExports$1 = /*#__PURE__*/Object.freeze({
93
86
  __proto__: null,
94
87
  allBase: allBase,
95
- applyThemeMixins: applyThemeMixins,
96
88
  borders: borders$1,
97
89
  colors: colors,
98
90
  default: baseExports,
@@ -171,7 +163,7 @@ const typographyColor = './utilities/typography/_color.scss';
171
163
  const typography = [typographyFont, typographyColor];
172
164
  // Background utilities
173
165
  const backgroundColor = './utilities/background-color/index.scss';
174
- // Border utilities
166
+ // Border utilities
175
167
  const borderColor = './utilities/border/_border-color.scss';
176
168
  const borderRadius = './utilities/border/_border-radius.scss';
177
169
  const borderSize = './utilities/border/_border-size.scss';
@@ -185,6 +177,24 @@ const spacing = [gap, margin, padding];
185
177
  const boxShadow = './utilities/box-shadow/index.scss';
186
178
  // Size utilities
187
179
  const size = './utilities/size/index.scss';
180
+ // Display utilities
181
+ const display = './utilities/_display.scss';
182
+ // Flex utilities
183
+ const flex = './utilities/_flex.scss';
184
+ // Text utilities
185
+ const text = './utilities/_text.scss';
186
+ // Position utilities
187
+ const position = './utilities/_position.scss';
188
+ // Overflow utilities
189
+ const overflow = './utilities/_overflow.scss';
190
+ // Opacity utilities
191
+ const opacity = './utilities/_opacity.scss';
192
+ // Cursor utilities
193
+ const cursor = './utilities/_cursor.scss';
194
+ // Sizing utilities (width/height)
195
+ const sizing = './utilities/_sizing.scss';
196
+ // Visibility utilities
197
+ const visibility = './utilities/_visibility.scss';
188
198
  // All utilities combined
189
199
  const allUtilities = [
190
200
  reset,
@@ -193,7 +203,16 @@ const allUtilities = [
193
203
  ...borders,
194
204
  ...spacing,
195
205
  boxShadow,
196
- size
206
+ size,
207
+ display,
208
+ flex,
209
+ text,
210
+ position,
211
+ overflow,
212
+ opacity,
213
+ cursor,
214
+ sizing,
215
+ visibility,
197
216
  ];
198
217
  var utilities = {
199
218
  reset,
@@ -217,6 +236,15 @@ var utilities = {
217
236
  },
218
237
  boxShadow,
219
238
  size,
239
+ display,
240
+ flex,
241
+ text,
242
+ position,
243
+ overflow,
244
+ opacity,
245
+ cursor,
246
+ sizing,
247
+ visibility,
220
248
  all: allUtilities
221
249
  };
222
250
 
@@ -229,16 +257,25 @@ var utilities$1 = /*#__PURE__*/Object.freeze({
229
257
  borderSize: borderSize,
230
258
  borders: borders,
231
259
  boxShadow: boxShadow,
260
+ cursor: cursor,
232
261
  default: utilities,
262
+ display: display,
263
+ flex: flex,
233
264
  gap: gap,
234
265
  margin: margin,
266
+ opacity: opacity,
267
+ overflow: overflow,
235
268
  padding: padding,
269
+ position: position,
236
270
  reset: reset,
237
271
  size: size,
272
+ sizing: sizing,
238
273
  spacing: spacing,
274
+ text: text,
239
275
  typography: typography,
240
276
  typographyColor: typographyColor,
241
- typographyFont: typographyFont
277
+ typographyFont: typographyFont,
278
+ visibility: visibility
242
279
  });
243
280
 
244
281
  // VS Theme - Main Entry Point
package/dist/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
1
+ {"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
@@ -1,8 +1,11 @@
1
- $border-radius-sm: 2px !default;
2
- $border-radius-md: 4px !default;
3
- $border-radius-lg: 16px !default;
4
- $border-radius-full: 50% !default;
5
-
6
- $border-width-sm: 1px !default;
7
- $border-width-md: 2px !default;
8
- $border-width-lg: 4px !default;
1
+ $border-radius-0: 0 !default;
2
+ $border-radius-sm: 2px !default;
3
+ $border-radius-md: 4px !default;
4
+ $border-radius-lg: 16px !default;
5
+ $border-radius-xl: 1rem !default;
6
+ $border-radius-pill: 50rem !default;
7
+ $border-radius-full: 50% !default;
8
+
9
+ $border-width-sm: 1px !default;
10
+ $border-width-md: 2px !default;
11
+ $border-width-lg: 4px !default;
@@ -0,0 +1,41 @@
1
+ @use "sass:color";
2
+
3
+ $text-primary: #2666e3 !default;
4
+ $text-secondary: #595959 !default;
5
+ $text-success: #5ca224 !default;
6
+ $text-warning: #f39c12 !default;
7
+ $text-danger: #f90b0b !default;
8
+ $text-info: #17baff !default;
9
+ $text-default: #808080 !default;
10
+ $text-dark: #464646 !default;
11
+ $text-light: #ffffff !default;
12
+ $text-tertiary: #ed5085 !default;
13
+
14
+ $text-primary-hover: #1c428d !default;
15
+ $text-danger-hover: #af251c !default;
16
+
17
+ $background-primary: #2666e3 !default;
18
+ $background-secondary: #f4f4f4 !default;
19
+ $background-success: #67b926 !default;
20
+ $background-warning: #f97d0b !default;
21
+ $background-danger: #e74c3c !default;
22
+ $background-info: #17baff !default;
23
+ $background-default: #ffffff !default;
24
+ $background-dark: #29466e !default;
25
+ $background-dark-a: #0f233d33 !default;
26
+ $background-light: #F7F7F7 !default;
27
+ $background-tertiary: #ed5085 !default;
28
+ $background-lime: #f3de1d !default;
29
+ $background-transparent: color.change(#000000, $alpha: 0.1) !default;
30
+
31
+ $border-primary: #2666e3 !default;
32
+ $border-secondary: #c6c6c6 !default;
33
+ $border-success: #67b926 !default;
34
+ $border-warning: #f97d0b !default;
35
+ $border-danger: #e74c3c !default;
36
+ $border-info: #17baff !default;
37
+ $border-light: #e3e3e3 !default;
38
+ $border-dark: #0f233d !default;
39
+ $border-default: #d9d9d9 !default;
40
+
41
+ $boxshadow-primary: #ababab40 !default;
@@ -0,0 +1,102 @@
1
+ @use "color" as cl;
2
+ @use "font" as ft;
3
+ @use "space" as sp;
4
+ @use "border" as bo;
5
+ @use "size" as sz;
6
+
7
+ :root {
8
+ // Text colors
9
+ --qo-text-primary: #{cl.$text-primary};
10
+ --qo-text-secondary: #{cl.$text-secondary};
11
+ --qo-text-success: #{cl.$text-success};
12
+ --qo-text-warning: #{cl.$text-warning};
13
+ --qo-text-danger: #{cl.$text-danger};
14
+ --qo-text-info: #{cl.$text-info};
15
+ --qo-text-default: #{cl.$text-default};
16
+ --qo-text-dark: #{cl.$text-dark};
17
+ --qo-text-light: #{cl.$text-light};
18
+ --qo-text-tertiary: #{cl.$text-tertiary};
19
+
20
+ // Background colors
21
+ --qo-bg-primary: #{cl.$background-primary};
22
+ --qo-bg-secondary: #{cl.$background-secondary};
23
+ --qo-bg-success: #{cl.$background-success};
24
+ --qo-bg-warning: #{cl.$background-warning};
25
+ --qo-bg-danger: #{cl.$background-danger};
26
+ --qo-bg-info: #{cl.$background-info};
27
+ --qo-bg-default: #{cl.$background-default};
28
+ --qo-bg-dark: #{cl.$background-dark};
29
+ --qo-bg-light: #{cl.$background-light};
30
+ --qo-bg-tertiary: #{cl.$background-tertiary};
31
+
32
+ // Border colors
33
+ --qo-border-primary: #{cl.$border-primary};
34
+ --qo-border-secondary: #{cl.$border-secondary};
35
+ --qo-border-success: #{cl.$border-success};
36
+ --qo-border-warning: #{cl.$border-warning};
37
+ --qo-border-danger: #{cl.$border-danger};
38
+ --qo-border-info: #{cl.$border-info};
39
+ --qo-border-light: #{cl.$border-light};
40
+ --qo-border-dark: #{cl.$border-dark};
41
+ --qo-border-default: #{cl.$border-default};
42
+
43
+ // Font families
44
+ --qo-font-family-primary: #{ft.$font-family-primary};
45
+ --qo-font-family-secondary: #{ft.$font-family-secondary};
46
+
47
+ // Font sizes
48
+ --qo-font-size-xxs: #{ft.$font-size-xxs};
49
+ --qo-font-size-xs: #{ft.$font-size-xs};
50
+ --qo-font-size-sm: #{ft.$font-size-sm};
51
+ --qo-font-size-md: #{ft.$font-size-md};
52
+ --qo-font-size-lg: #{ft.$font-size-lg};
53
+ --qo-font-size-xl: #{ft.$font-size-xl};
54
+ --qo-font-size-xxl: #{ft.$font-size-xxl};
55
+ --qo-font-size-h1: #{ft.$font-size-h1};
56
+ --qo-font-size-h2: #{ft.$font-size-h2};
57
+ --qo-font-size-h3: #{ft.$font-size-h3};
58
+ --qo-font-size-h4: #{ft.$font-size-h4};
59
+ --qo-font-size-h5: #{ft.$font-size-h5};
60
+ --qo-font-size-h6: #{ft.$font-size-h6};
61
+
62
+ // Font weights
63
+ --qo-font-weight-light: #{ft.$font-weight-light};
64
+ --qo-font-weight-regular: #{ft.$font-weight-regular};
65
+ --qo-font-weight-medium: #{ft.$font-weight-medium};
66
+ --qo-font-weight-semibold: #{ft.$font-weight-semibold};
67
+ --qo-font-weight-bold: #{ft.$font-weight-bold};
68
+ --qo-font-weight-extrabold: #{ft.$font-weight-extrabold};
69
+
70
+ // Spacing
71
+ --qo-space-0: #{sp.$space-0};
72
+ --qo-space-1: #{sp.$space-1};
73
+ --qo-space-2: #{sp.$space-2};
74
+ --qo-space-3: #{sp.$space-3};
75
+ --qo-space-4: #{sp.$space-4};
76
+ --qo-space-5: #{sp.$space-5};
77
+ --qo-space-sm: #{sp.$space-sm};
78
+ --qo-space-md: #{sp.$space-md};
79
+ --qo-space-lg: #{sp.$space-lg};
80
+ --qo-space-xl: #{sp.$space-xl};
81
+
82
+ // Border radius
83
+ --qo-border-radius-0: #{bo.$border-radius-0};
84
+ --qo-border-radius-sm: #{bo.$border-radius-sm};
85
+ --qo-border-radius-md: #{bo.$border-radius-md};
86
+ --qo-border-radius-lg: #{bo.$border-radius-lg};
87
+ --qo-border-radius-xl: #{bo.$border-radius-xl};
88
+ --qo-border-radius-pill: #{bo.$border-radius-pill};
89
+ --qo-border-radius-full: #{bo.$border-radius-full};
90
+
91
+ // Border widths
92
+ --qo-border-width-sm: #{bo.$border-width-sm};
93
+ --qo-border-width-md: #{bo.$border-width-md};
94
+ --qo-border-width-lg: #{bo.$border-width-lg};
95
+
96
+ // Sizes
97
+ --qo-size-xs: #{sz.$size-xs};
98
+ --qo-size-sm: #{sz.$size-sm};
99
+ --qo-size-md: #{sz.$size-md};
100
+ --qo-size-lg: #{sz.$size-lg};
101
+ --qo-size-xl: #{sz.$size-xl};
102
+ }
@@ -0,0 +1,37 @@
1
+ $font-family-primary: "IBM Plex Sans", sans-serif !default;
2
+ $font-family-secondary: SFMono-Regular, Menlo, Monaco, Consolas, "Roboto Mono",
3
+ "Ubuntu Mono", "Lucida Console", "Courier New", monospace !default;
4
+
5
+ // Base font sizes
6
+ $font-size-xxs: 8px !default;
7
+ $font-size-xs: 10px !default;
8
+ $font-size-sm: 11px !default;
9
+ $font-size-md: 12px !default;
10
+ $font-size-lg: 14px !default;
11
+ $font-size-xl: 16px !default;
12
+ $font-size-xxl: 18px !default;
13
+
14
+ // Heading font sizes
15
+ $font-size-h6: 1rem !default;
16
+ $font-size-h5: 1.25rem !default;
17
+ $font-size-h4: 1.5rem !default;
18
+ $font-size-h3: 1.75rem !default;
19
+ $font-size-h2: 2rem !default;
20
+ $font-size-h1: 2.5rem !default;
21
+
22
+ // Line heights
23
+ $line-height-xxs: 1.25 !default;
24
+ $line-height-xs: 1.3 !default;
25
+ $line-height-sm: 1.27 !default;
26
+ $line-height-md: 1.33 !default;
27
+ $line-height-lg: 1.29 !default;
28
+ $line-height-xl: 1.31 !default;
29
+ $line-height-xxl: 1.28 !default;
30
+
31
+ // Font weights
32
+ $font-weight-light: 300 !default;
33
+ $font-weight-regular: 400 !default;
34
+ $font-weight-medium: 500 !default;
35
+ $font-weight-semibold: 600 !default;
36
+ $font-weight-bold: 700 !default;
37
+ $font-weight-extrabold: 800 !default;
@@ -0,0 +1,7 @@
1
+ $menu-size: 32px !default;
2
+
3
+ $size-xs: 8px !default;
4
+ $size-sm: 16px !default;
5
+ $size-md: 32px !default;
6
+ $size-lg: 48px !default;
7
+ $size-xl: 64px !default;
@@ -0,0 +1,27 @@
1
+ // Bootstrap-compatible spacing scale (rem-based)
2
+ $space-0: 0 !default;
3
+ $space-1: 0.25rem !default;
4
+ $space-2: 0.5rem !default;
5
+ $space-3: 1rem !default;
6
+ $space-4: 1.5rem !default;
7
+ $space-5: 3rem !default;
8
+
9
+ // Legacy spacing aliases
10
+ $space-sm: 5px !default;
11
+ $space-md: 12.5px !default;
12
+ $space-lg: 16.5px !default;
13
+ $space-xl: 21px !default;
14
+
15
+ // Spacers map for loop-based utility generation
16
+ $spacers: (
17
+ 0: $space-0,
18
+ 1: $space-1,
19
+ 2: $space-2,
20
+ 3: $space-3,
21
+ 4: $space-4,
22
+ 5: $space-5,
23
+ sm: $space-sm,
24
+ md: $space-md,
25
+ lg: $space-lg,
26
+ xl: $space-xl,
27
+ ) !default;
@@ -0,0 +1,27 @@
1
+ @use "sass:map";
2
+ @use "sass:math";
3
+
4
+ $breakpoints: (
5
+ sm: 576px,
6
+ md: 768px,
7
+ lg: 992px,
8
+ xl: 1200px,
9
+ xxl: 1366px,
10
+ ) !default;
11
+
12
+ @mixin respond-above($bp) {
13
+ @if map.has-key($breakpoints, $bp) {
14
+ @media (min-width: map.get($breakpoints, $bp)) {
15
+ @content;
16
+ }
17
+ }
18
+ }
19
+
20
+ @mixin respond-below($bp) {
21
+ @if map.has-key($breakpoints, $bp) {
22
+ $max: map.get($breakpoints, $bp);
23
+ @media (max-width: calc(#{$max} - 0.02px)) {
24
+ @content;
25
+ }
26
+ }
27
+ }
@@ -0,0 +1,35 @@
1
+ // VS Theme Base Export
2
+ // Provides access to all base variables and mixins
3
+
4
+ export const colors = './base/_color.scss';
5
+ export const fonts = './base/_font.scss';
6
+ export const spacing = './base/_space.scss';
7
+ export const borders = './base/_border.scss';
8
+ export const sizes = './base/_size.scss';
9
+
10
+ // Mixins
11
+ export const mediaQueryMixins = './base/mixins/_media-query-mx.scss';
12
+ export const fontSizeMixins = './base/mixins/_font_size-mx.scss';
13
+ // All base styles combined
14
+ export const allBase = [
15
+ colors,
16
+ fonts,
17
+ spacing,
18
+ borders,
19
+ sizes,
20
+ mediaQueryMixins,
21
+ fontSizeMixins,
22
+ ];
23
+
24
+ export default {
25
+ colors,
26
+ fonts,
27
+ spacing,
28
+ borders,
29
+ sizes,
30
+ mixins: {
31
+ mediaQuery: mediaQueryMixins,
32
+ fontSize: fontSizeMixins,
33
+ },
34
+ all: allBase
35
+ };