procode-vs-theme 2.1.0 → 2.4.0

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 (68) hide show
  1. package/CHANGELOG.md +214 -45
  2. package/dist/components.esm.js +28 -4
  3. package/dist/components.esm.js.map +1 -1
  4. package/dist/components.js +35 -3
  5. package/dist/components.js.map +1 -1
  6. package/dist/index.esm.js +41 -5
  7. package/dist/index.esm.js.map +1 -1
  8. package/dist/index.js +41 -5
  9. package/dist/index.js.map +1 -1
  10. package/dist/src/base/_border.scss +21 -12
  11. package/dist/src/base/_color.scss +106 -47
  12. package/dist/src/base/_custom-properties.scss +166 -111
  13. package/dist/src/base/_font.scss +61 -37
  14. package/dist/src/base/_size.scss +30 -17
  15. package/dist/src/base/_space.scss +53 -33
  16. package/dist/src/base/_variants.scss +128 -0
  17. package/dist/src/components/_alert.scss +83 -0
  18. package/dist/src/components/_badge.scss +100 -0
  19. package/dist/src/components/_buttons.scss +189 -420
  20. package/dist/src/components/_cards.scss +130 -0
  21. package/dist/src/components/_input.scss +186 -32
  22. package/dist/src/components/_link.scss +34 -0
  23. package/dist/src/components/_page.scss +87 -0
  24. package/dist/src/components/_pagination.scss +71 -0
  25. package/dist/src/components/_table.scss +171 -0
  26. package/dist/src/components/_tabs.scss +77 -0
  27. package/dist/src/components.ts +47 -23
  28. package/dist/src/index.scss +82 -71
  29. package/dist/src/utilities/_interaction.scss +72 -0
  30. package/dist/src/utilities/background-color/index.scss +13 -0
  31. package/dist/src/utilities/border/_border-color.scss +2 -0
  32. package/dist/src/utilities/box-shadow/index.scss +8 -8
  33. package/dist/src/utilities/spaces/_gap.scss +21 -2
  34. package/dist/src/utilities/typography/_color.scss +38 -34
  35. package/dist/src/variables.ts +38 -35
  36. package/dist/types/components.d.ts +18 -2
  37. package/dist/types/variables.d.ts +2 -0
  38. package/dist/variables.esm.js +4 -1
  39. package/dist/variables.esm.js.map +1 -1
  40. package/dist/variables.js +4 -0
  41. package/dist/variables.js.map +1 -1
  42. package/package.json +84 -84
  43. package/src/base/_border.scss +21 -12
  44. package/src/base/_color.scss +106 -47
  45. package/src/base/_custom-properties.scss +166 -111
  46. package/src/base/_font.scss +61 -37
  47. package/src/base/_size.scss +30 -17
  48. package/src/base/_space.scss +53 -33
  49. package/src/base/_variants.scss +128 -0
  50. package/src/components/_alert.scss +83 -0
  51. package/src/components/_badge.scss +100 -0
  52. package/src/components/_buttons.scss +189 -420
  53. package/src/components/_cards.scss +130 -0
  54. package/src/components/_input.scss +186 -32
  55. package/src/components/_link.scss +34 -0
  56. package/src/components/_page.scss +87 -0
  57. package/src/components/_pagination.scss +71 -0
  58. package/src/components/_table.scss +171 -0
  59. package/src/components/_tabs.scss +77 -0
  60. package/src/components.ts +47 -23
  61. package/src/index.scss +82 -71
  62. package/src/utilities/_interaction.scss +72 -0
  63. package/src/utilities/background-color/index.scss +13 -0
  64. package/src/utilities/border/_border-color.scss +2 -0
  65. package/src/utilities/box-shadow/index.scss +8 -8
  66. package/src/utilities/spaces/_gap.scss +21 -2
  67. package/src/utilities/typography/_color.scss +38 -34
  68. package/src/variables.ts +38 -35
package/src/utilities/typography/_color.scss CHANGED
@@ -1,34 +1,38 @@
1
- @use "sass:color";
2
- @use "../../base/color" as cl;
3
- @use "../../base/mixins/meta-class" as mc;
4
-
5
- @include mc.meta("qo-text-primary", (color: cl.$text-primary));
6
- @include mc.meta("qo-text-secondary", (color: cl.$text-secondary));
7
- @include mc.meta("qo-text-success", (color: cl.$text-success));
8
- @include mc.meta("qo-text-warning", (color: cl.$text-warning));
9
- @include mc.meta("qo-text-danger", (color: cl.$text-danger));
10
- @include mc.meta("qo-text-info", (color: cl.$text-info));
11
- @include mc.meta("qo-text-default", (color: cl.$text-default));
12
- @include mc.meta("qo-text-dark", (color: cl.$text-dark));
13
- @include mc.meta("qo-text-darker", (color: cl.$text-darker));
14
- @include mc.meta("qo-text-light", (color: cl.$text-light));
15
- @include mc.meta("qo-text-tertiary", (color: cl.$text-tertiary));
16
-
17
- // Higher specificity variants when used with .qo-btn (beats Kendo .k-button-* selectors)
18
- // Intentionally NOT wrapped in meta() — button overrides must stay high specificity
19
- .qo-btn {
20
- &.qo-text-primary { color: cl.$text-primary; &:hover, &:focus, &:active { color: cl.$text-primary-hover; } }
21
- &.qo-text-secondary { color: cl.$text-secondary; &:hover, &:focus, &:active { color: cl.$text-dark; } }
22
- &.qo-text-success { color: cl.$text-success; &:hover, &:focus, &:active { color: color.adjust(cl.$text-success, $lightness: -10%); } }
23
- &.qo-text-warning { color: cl.$text-warning; &:hover, &:focus, &:active { color: color.adjust(cl.$text-warning, $lightness: -10%); } }
24
- &.qo-text-danger { color: cl.$text-danger; &:hover, &:focus, &:active { color: cl.$text-danger-hover; } }
25
- &.qo-text-info { color: cl.$text-info; &:hover, &:focus, &:active { color: color.adjust(cl.$text-info, $lightness: -10%); } }
26
- &.qo-text-default { color: cl.$text-default; &:hover, &:focus, &:active { color: cl.$text-dark; } }
27
- &.qo-text-dark { color: cl.$text-dark; &:hover, &:focus, &:active { color: color.adjust(cl.$text-dark, $lightness: -10%); } }
28
- &.qo-text-light { color: cl.$text-light; &:hover, &:focus, &:active { color: cl.$text-light; } }
29
- &.qo-text-tertiary { color: cl.$text-tertiary; &:hover, &:focus, &:active { color: color.adjust(cl.$text-tertiary, $lightness: -10%); } }
30
- }
31
-
32
- .qo-validation {
33
- color: cl.$text-danger;
34
- }
1
+ @use "sass:color";
2
+ @use "../../base/color" as cl;
3
+ @use "../../base/mixins/meta-class" as mc;
4
+
5
+ @include mc.meta("qo-text-primary", (color: cl.$text-primary));
6
+ @include mc.meta("qo-text-secondary", (color: cl.$text-secondary));
7
+ @include mc.meta("qo-text-success", (color: cl.$text-success));
8
+ @include mc.meta("qo-text-warning", (color: cl.$text-warning));
9
+ @include mc.meta("qo-text-danger", (color: cl.$text-danger));
10
+ @include mc.meta("qo-text-info", (color: cl.$text-info));
11
+ @include mc.meta("qo-text-default", (color: cl.$text-default));
12
+ @include mc.meta("qo-text-dark", (color: cl.$text-dark));
13
+ @include mc.meta("qo-text-darker", (color: cl.$text-darker));
14
+ @include mc.meta("qo-text-light", (color: cl.$text-light));
15
+ @include mc.meta("qo-text-tertiary", (color: cl.$text-tertiary));
16
+ @include mc.meta("qo-text-placeholder", (color: cl.$text-placeholder));
17
+ @include mc.meta("qo-text-lite", (color: cl.$text-lite));
18
+ @include mc.meta("qo-text-system", (color: cl.$text-system));
19
+ @include mc.meta("qo-text-custom", (color: cl.$text-custom));
20
+
21
+ // Higher specificity variants when used with .qo-btn (beats Kendo .k-button-* selectors)
22
+ // Intentionally NOT wrapped in meta() — button overrides must stay high specificity
23
+ .qo-btn {
24
+ &.qo-text-primary { color: cl.$text-primary; &:hover, &:focus, &:active { color: cl.$text-primary-hover; } }
25
+ &.qo-text-secondary { color: cl.$text-secondary; &:hover, &:focus, &:active { color: cl.$text-dark; } }
26
+ &.qo-text-success { color: cl.$text-success; &:hover, &:focus, &:active { color: color.adjust(cl.$text-success, $lightness: -10%); } }
27
+ &.qo-text-warning { color: cl.$text-warning; &:hover, &:focus, &:active { color: color.adjust(cl.$text-warning, $lightness: -10%); } }
28
+ &.qo-text-danger { color: cl.$text-danger; &:hover, &:focus, &:active { color: cl.$text-danger-hover; } }
29
+ &.qo-text-info { color: cl.$text-info; &:hover, &:focus, &:active { color: color.adjust(cl.$text-info, $lightness: -10%); } }
30
+ &.qo-text-default { color: cl.$text-default; &:hover, &:focus, &:active { color: cl.$text-dark; } }
31
+ &.qo-text-dark { color: cl.$text-dark; &:hover, &:focus, &:active { color: color.adjust(cl.$text-dark, $lightness: -10%); } }
32
+ &.qo-text-light { color: cl.$text-light; &:hover, &:focus, &:active { color: cl.$text-light; } }
33
+ &.qo-text-tertiary { color: cl.$text-tertiary; &:hover, &:focus, &:active { color: color.adjust(cl.$text-tertiary, $lightness: -10%); } }
34
+ }
35
+
36
+ .qo-validation {
37
+ color: cl.$text-danger;
38
+ }
package/src/variables.ts CHANGED
@@ -1,36 +1,39 @@
1
- // VS Theme Variables Export
2
- // Provides access to all theme variables and base styles
3
-
4
- // Base variables and mixins
5
- export const colors = './base/_color.scss';
6
- export const fonts = './base/_font.scss';
7
- export const spacing = './base/_space.scss';
8
- export const borders = './base/_border.scss';
9
- export const sizes = './base/_size.scss';
10
-
11
- // Mixins
12
- export const mediaQueryMixins = './base/mixins/_media-query-mx.scss';
13
- export const fontSizeMixins = './base/mixins/_font_size-mx.scss';
14
- // All base variables combined
15
- export const allVariables = [
16
- colors,
17
- fonts,
18
- spacing,
19
- borders,
20
- sizes,
21
- mediaQueryMixins,
22
- fontSizeMixins,
23
- ];
24
-
25
- export default {
26
- colors,
27
- fonts,
28
- spacing,
29
- borders,
30
- sizes,
31
- mixins: {
32
- mediaQuery: mediaQueryMixins,
33
- fontSize: fontSizeMixins,
34
- },
35
- all: allVariables
1
+ // VS Theme Variables Export
2
+ // Provides access to all theme variables and base styles
3
+
4
+ // Base variables and mixins
5
+ export const colors = './base/_color.scss';
6
+ export const fonts = './base/_font.scss';
7
+ export const spacing = './base/_space.scss';
8
+ export const borders = './base/_border.scss';
9
+ export const sizes = './base/_size.scss';
10
+ export const variants = './base/_variants.scss';
11
+
12
+ // Mixins
13
+ export const mediaQueryMixins = './base/mixins/_media-query-mx.scss';
14
+ export const fontSizeMixins = './base/mixins/_font_size-mx.scss';
15
+ // All base variables combined
16
+ export const allVariables = [
17
+ colors,
18
+ fonts,
19
+ spacing,
20
+ borders,
21
+ sizes,
22
+ variants,
23
+ mediaQueryMixins,
24
+ fontSizeMixins,
25
+ ];
26
+
27
+ export default {
28
+ colors,
29
+ fonts,
30
+ spacing,
31
+ borders,
32
+ sizes,
33
+ variants,
34
+ mixins: {
35
+ mediaQuery: mediaQueryMixins,
36
+ fontSize: fontSizeMixins,
37
+ },
38
+ all: allVariables
36
39
  };