@koobiq/components 18.5.3 → 18.6.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 (106) hide show
  1. package/accordion/_accordion-theme.scss +3 -3
  2. package/alert/_alert-theme.scss +3 -3
  3. package/badge/_badge-theme.scss +8 -4
  4. package/badge/badge-tokens.scss +8 -0
  5. package/badge/badge.component.d.ts +1 -0
  6. package/button/_button-theme.scss +2 -2
  7. package/button-toggle/_button-toggle-theme.scss +1 -1
  8. package/checkbox/_checkbox-theme.scss +4 -4
  9. package/checkbox/checkbox-tokens.scss +4 -4
  10. package/code-block/_code-block-theme.scss +4 -4
  11. package/core/forms/_forms-theme.scss +1 -1
  12. package/core/option/_optgroup-theme.scss +2 -2
  13. package/core/option/_option-action-theme.scss +1 -1
  14. package/core/option/_option-theme.scss +2 -2
  15. package/core/selection/pseudo-checkbox/pseudo-checkbox-tokens.scss +4 -4
  16. package/core/styles/theming/_theming.scss +2 -42
  17. package/core/styles/typography/_typography.scss +120 -159
  18. package/core/styles/visual/_layout.scss +1 -1
  19. package/datepicker/_datepicker-theme.scss +2 -2
  20. package/dl/_dl-theme.scss +2 -2
  21. package/dl/dl-tokens.scss +2 -2
  22. package/dropdown/_dropdown-theme.scss +8 -4
  23. package/empty-state/_empty-state-theme.scss +4 -4
  24. package/esm2022/badge/badge.component.mjs +4 -3
  25. package/esm2022/button/button.component.mjs +2 -2
  26. package/esm2022/checkbox/checkbox.mjs +2 -2
  27. package/esm2022/code-block/code-block.component.mjs +2 -2
  28. package/esm2022/core/option/action.mjs +2 -2
  29. package/esm2022/core/option/optgroup.mjs +2 -2
  30. package/esm2022/core/selection/pseudo-checkbox/pseudo-checkbox.mjs +2 -2
  31. package/esm2022/core/version.mjs +2 -2
  32. package/esm2022/dl/dl.component.mjs +2 -2
  33. package/esm2022/dropdown/dropdown.component.mjs +3 -3
  34. package/esm2022/icon/icon-button.component.mjs +2 -2
  35. package/esm2022/markdown/markdown.component.mjs +2 -2
  36. package/esm2022/select/select.component.mjs +3 -3
  37. package/esm2022/splitter/splitter.component.mjs +3 -3
  38. package/esm2022/timezone/timezone-select.component.mjs +2 -2
  39. package/esm2022/toggle/toggle.component.mjs +3 -3
  40. package/esm2022/tree-select/tree-select.component.mjs +3 -3
  41. package/fesm2022/koobiq-components-badge.mjs +3 -2
  42. package/fesm2022/koobiq-components-badge.mjs.map +1 -1
  43. package/fesm2022/koobiq-components-button.mjs +2 -2
  44. package/fesm2022/koobiq-components-button.mjs.map +1 -1
  45. package/fesm2022/koobiq-components-checkbox.mjs +2 -2
  46. package/fesm2022/koobiq-components-checkbox.mjs.map +1 -1
  47. package/fesm2022/koobiq-components-code-block.mjs +2 -2
  48. package/fesm2022/koobiq-components-code-block.mjs.map +1 -1
  49. package/fesm2022/koobiq-components-core.mjs +7 -7
  50. package/fesm2022/koobiq-components-core.mjs.map +1 -1
  51. package/fesm2022/koobiq-components-dl.mjs +2 -2
  52. package/fesm2022/koobiq-components-dropdown.mjs +2 -2
  53. package/fesm2022/koobiq-components-dropdown.mjs.map +1 -1
  54. package/fesm2022/koobiq-components-icon.mjs +2 -2
  55. package/fesm2022/koobiq-components-icon.mjs.map +1 -1
  56. package/fesm2022/koobiq-components-markdown.mjs +2 -2
  57. package/fesm2022/koobiq-components-markdown.mjs.map +1 -1
  58. package/fesm2022/koobiq-components-select.mjs +2 -2
  59. package/fesm2022/koobiq-components-select.mjs.map +1 -1
  60. package/fesm2022/koobiq-components-splitter.mjs +2 -2
  61. package/fesm2022/koobiq-components-splitter.mjs.map +1 -1
  62. package/fesm2022/koobiq-components-timezone.mjs +2 -2
  63. package/fesm2022/koobiq-components-timezone.mjs.map +1 -1
  64. package/fesm2022/koobiq-components-toggle.mjs +2 -2
  65. package/fesm2022/koobiq-components-toggle.mjs.map +1 -1
  66. package/fesm2022/koobiq-components-tree-select.mjs +2 -2
  67. package/fesm2022/koobiq-components-tree-select.mjs.map +1 -1
  68. package/file-upload/_file-upload-theme.scss +7 -7
  69. package/form-field/_form-field-theme.scss +2 -2
  70. package/form-field/_hint-theme.scss +2 -2
  71. package/icon/_icon-button-theme.scss +2 -2
  72. package/input/_input-theme.scss +2 -2
  73. package/link/_link-theme.scss +3 -3
  74. package/list/_list-theme.scss +2 -2
  75. package/loader-overlay/_loader-overlay-theme.scss +4 -4
  76. package/markdown/_markdown-theme.scss +9 -9
  77. package/markdown/markdown-tokens.scss +23 -23
  78. package/modal/_modal-theme.scss +2 -2
  79. package/navbar/_navbar-theme.scss +2 -2
  80. package/package.json +6 -6
  81. package/popover/_popover-theme.scss +2 -2
  82. package/prebuilt-themes/dark-theme.css +1 -1
  83. package/prebuilt-themes/light-theme.css +1 -1
  84. package/prebuilt-themes/theme.css +1 -1
  85. package/progress-bar/_progress-bar-theme.scss +2 -2
  86. package/progress-spinner/_progress-spinner-theme.scss +2 -2
  87. package/radio/_radio-theme.scss +4 -4
  88. package/risk-level/_risk-level-theme.scss +1 -1
  89. package/schematics/collection.json +5 -0
  90. package/schematics/migrations/css-selectors/data.js +65 -0
  91. package/schematics/migrations/css-selectors/index.js +103 -0
  92. package/schematics/migrations/css-selectors/schema.json +25 -0
  93. package/schematics/ng-add/index.js +4 -4
  94. package/select/_select-theme.scss +5 -5
  95. package/sidepanel/_sidepanel-theme.scss +2 -2
  96. package/splitter/_splitter-theme.scss +1 -1
  97. package/table/_table-theme.scss +2 -2
  98. package/tabs/_tabs-theme.scss +1 -1
  99. package/tags/_tag-theme.scss +2 -2
  100. package/textarea/_textarea-theme.scss +1 -1
  101. package/timezone/_timezone-option-theme.scss +4 -4
  102. package/toast/_toast-theme.scss +2 -2
  103. package/toggle/_toggle-theme.scss +5 -5
  104. package/tooltip/_tooltip-theme.scss +2 -2
  105. package/tree/_tree-theme.scss +2 -2
  106. package/tree-select/_tree-select-theme.scss +3 -3
package/markdown/markdown-tokens.scss CHANGED
@@ -1,22 +1,22 @@
1
1
  .kbq-markdown {
2
2
  --kbq-markdown-h1-size-max-width: var(--kbq-markdown-size-max-width);
3
3
  --kbq-markdown-h1-size-margin-top: 0;
4
- --kbq-markdown-h1-size-margin-bottom: var(--kbq-size-m);
4
+ --kbq-markdown-h1-size-margin-bottom: var(--kbq-size-l);
5
5
  --kbq-markdown-h2-size-max-width: var(--kbq-markdown-size-max-width);
6
- --kbq-markdown-h2-size-margin-top: var(--kbq-size-3xl);
6
+ --kbq-markdown-h2-size-margin-top: var(--kbq-size-xxl);
7
7
  --kbq-markdown-h2-size-margin-bottom: var(--kbq-size-m);
8
8
  --kbq-markdown-h3-size-max-width: var(--kbq-markdown-size-max-width);
9
- --kbq-markdown-h3-size-margin-top: 28px;
9
+ --kbq-markdown-h3-size-margin-top: var(--kbq-size-xxl);
10
10
  --kbq-markdown-h3-size-margin-bottom: var(--kbq-size-m);
11
11
  --kbq-markdown-h4-size-max-width: var(--kbq-markdown-size-max-width);
12
12
  --kbq-markdown-h4-size-margin-top: var(--kbq-size-xxl);
13
13
  --kbq-markdown-h4-size-margin-bottom: var(--kbq-size-m);
14
14
  --kbq-markdown-h5-size-max-width: var(--kbq-markdown-size-max-width);
15
15
  --kbq-markdown-h5-size-margin-top: var(--kbq-size-xxl);
16
- --kbq-markdown-h5-size-margin-bottom: var(--kbq-size-m);
16
+ --kbq-markdown-h5-size-margin-bottom: var(--kbq-size-s);
17
17
  --kbq-markdown-h6-size-max-width: var(--kbq-markdown-size-max-width);
18
18
  --kbq-markdown-h6-size-margin-top: var(--kbq-size-xxl);
19
- --kbq-markdown-h6-size-margin-bottom: var(--kbq-size-m);
19
+ --kbq-markdown-h6-size-margin-bottom: var(--kbq-size-s);
20
20
  --kbq-markdown-p-size-max-width: var(--kbq-markdown-size-max-width);
21
21
  --kbq-markdown-p-size-margin-top: var(--kbq-size-m);
22
22
  --kbq-markdown-p-size-margin-bottom: var(--kbq-size-m);
@@ -26,34 +26,34 @@
26
26
  --kbq-markdown-list-size-margin-top-after-paragraph: calc(-1 * var(--kbq-size-s));
27
27
  --kbq-markdown-list-size-ol-number-padding-right: var(--kbq-size-xxs);
28
28
  --kbq-markdown-list-size-ul-padding: 0 0 0 var(--kbq-size-xxl);
29
- --kbq-markdown-list-size-item-margin-bottom: var(--kbq-size-s);
29
+ --kbq-markdown-list-size-item-margin-bottom: var(--kbq-size-xxs);
30
30
  --kbq-markdown-blockquote-size-max-width: var(--kbq-markdown-size-max-width);
31
- --kbq-markdown-blockquote-size-margin-top: var(--kbq-size-xl);
32
- --kbq-markdown-blockquote-size-margin-bottom: var(--kbq-size-xxl);
33
- --kbq-markdown-blockquote-size-padding: var(--kbq-size-m) var(--kbq-size-l);
31
+ --kbq-markdown-blockquote-size-margin-top: var(--kbq-size-m);
32
+ --kbq-markdown-blockquote-size-margin-bottom: var(--kbq-size-m);
33
+ --kbq-markdown-blockquote-size-padding: var(--kbq-size-3xs) var(--kbq-size-m);
34
34
  --kbq-markdown-blockquote-size-line-width: var(--kbq-size-xxs);
35
35
  --kbq-markdown-blockquote-size-border-radius: 0;
36
36
  --kbq-markdown-blockquote-size-border-width: 0;
37
37
  --kbq-markdown-code-size-max-width: var(--kbq-markdown-size-max-width);
38
- --kbq-markdown-code-size-multiline-margin-top: var(--kbq-size-s);
38
+ --kbq-markdown-code-size-multiline-margin-top: var(--kbq-size-m);
39
39
  --kbq-markdown-code-size-multiline-margin-bottom: var(--kbq-size-xxl);
40
40
  --kbq-markdown-code-size-inline-padding: 0 var(--kbq-size-xxs);
41
- --kbq-markdown-code-size-multiline-padding: 14px var(--kbq-size-xl);
41
+ --kbq-markdown-code-size-multiline-padding: var(--kbq-size-m) var(--kbq-size-l);
42
42
  --kbq-markdown-code-size-border-radius: var(--kbq-size-border-radius);
43
43
  --kbq-markdown-code-size-border-width: var(--kbq-size-border-width);
44
44
  --kbq-markdown-link-size-icon-margin: var(--kbq-link-size-normal-content-padding, var(--kbq-size-xxs));
45
45
  --kbq-markdown-link-size-state-focused-outline-offset: var(--kbq-link-size-state-focused-outline-offset);
46
46
  --kbq-markdown-link-size-state-focused-outline-width: var(--kbq-link-size-state-focused-outline-width);
47
47
  --kbq-markdown-image-size-max-width: var(--kbq-markdown-size-max-width);
48
- --kbq-markdown-image-size-margin-top: var(--kbq-size-s);
49
- --kbq-markdown-image-size-margin-bottom: var(--kbq-size-s);
48
+ --kbq-markdown-image-size-margin-top: var(--kbq-size-m);
49
+ --kbq-markdown-image-size-margin-bottom: var(--kbq-size-m);
50
50
  --kbq-markdown-image-size-caption-margin-top: calc(-1 * var(--kbq-size-s));
51
51
  --kbq-markdown-image-size-caption-margin-bottom: var(--kbq-size-xxl);
52
52
  --kbq-markdown-hr-size-width: 1px;
53
- --kbq-markdown-hr-size-margin-vertical: var(--kbq-size-l);
53
+ --kbq-markdown-hr-size-margin-vertical: var(--kbq-size-xxl);
54
54
  --kbq-markdown-table-size-border-width: var(--kbq-size-border-width);
55
55
  --kbq-markdown-table-size-padding: var(--kbq-size-s);
56
- --kbq-markdown-table-size-margin-bottom: var(--kbq-size-l);
56
+ --kbq-markdown-table-size-margin-bottom: var(--kbq-size-m);
57
57
  --kbq-markdown-size-max-width: 650px;
58
58
  }
59
59
 
@@ -67,11 +67,11 @@
67
67
  --kbq-markdown-p-color: var(--kbq-foreground-contrast);
68
68
  --kbq-markdown-list-color: var(--kbq-foreground-contrast);
69
69
  --kbq-markdown-blockquote-text: var(--kbq-foreground-contrast);
70
- --kbq-markdown-blockquote-line: var(--kbq-foreground-border);
70
+ --kbq-markdown-blockquote-line: var(--kbq-line-contrast-less);
71
71
  --kbq-markdown-blockquote-background: var(--kbq-background-contrast-fade);
72
72
  --kbq-markdown-blockquote-border: transparent;
73
73
  --kbq-markdown-code-text: var(--kbq-foreground-contrast);
74
- --kbq-markdown-code-background: var(--kbq-background-background-less-contrast);
74
+ --kbq-markdown-code-background: var(--kbq-background-contrast-fade);
75
75
  --kbq-markdown-code-border: var(--kbq-line-contrast-less);
76
76
  --kbq-markdown-link-text: var(--kbq-link-text);
77
77
  --kbq-markdown-link-border-bottom: var(--kbq-link-border-bottom);
@@ -81,9 +81,9 @@
81
81
  --kbq-markdown-link-state-hover-border-bottom: var(--kbq-link-state-hover-border-bottom);
82
82
  --kbq-markdown-link-state-active: var(--kbq-link-state-active-text);
83
83
  --kbq-markdown-link-state-focused-outline: var(--kbq-link-state-focused-outline);
84
- --kbq-markdown-image-caption-text: var(--kbq-foreground-text-less-contrast);
84
+ --kbq-markdown-image-caption-text: var(--kbq-foreground-contrast-secondary);
85
85
  --kbq-markdown-hr-color: var(--kbq-line-contrast-less);
86
- --kbq-markdown-table-header: var(--kbq-foreground-text-less-contrast);
86
+ --kbq-markdown-table-header: var(--kbq-foreground-contrast-secondary);
87
87
  --kbq-markdown-table-body: var(--kbq-foreground-contrast);
88
88
  --kbq-markdown-table-border: var(--kbq-line-contrast-less);
89
89
  }
@@ -98,11 +98,11 @@
98
98
  --kbq-markdown-p-color: var(--kbq-foreground-contrast);
99
99
  --kbq-markdown-list-color: var(--kbq-foreground-contrast);
100
100
  --kbq-markdown-blockquote-text: var(--kbq-foreground-contrast);
101
- --kbq-markdown-blockquote-line: var(--kbq-foreground-border);
101
+ --kbq-markdown-blockquote-line: var(--kbq-line-contrast-less);
102
102
  --kbq-markdown-blockquote-background: var(--kbq-background-contrast-fade);
103
103
  --kbq-markdown-blockquote-border: transparent;
104
104
  --kbq-markdown-code-text: var(--kbq-foreground-contrast);
105
- --kbq-markdown-code-background: var(--kbq-background-background-less-contrast);
105
+ --kbq-markdown-code-background: var(--kbq-background-contrast-fade);
106
106
  --kbq-markdown-code-border: var(--kbq-line-contrast-less);
107
107
  --kbq-markdown-link-text: var(--kbq-link-text);
108
108
  --kbq-markdown-link-border-bottom: var(--kbq-link-border-bottom);
@@ -112,9 +112,9 @@
112
112
  --kbq-markdown-link-state-hover-border-bottom: var(--kbq-link-state-hover-border-bottom);
113
113
  --kbq-markdown-link-state-active: var(--kbq-link-state-active-text);
114
114
  --kbq-markdown-link-state-focused-outline: var(--kbq-link-state-focused-outline);
115
- --kbq-markdown-image-caption-text: var(--kbq-foreground-text-less-contrast);
115
+ --kbq-markdown-image-caption-text: var(--kbq-foreground-contrast-secondary);
116
116
  --kbq-markdown-hr-color: var(--kbq-line-contrast-less);
117
- --kbq-markdown-table-header: var(--kbq-foreground-text-less-contrast);
117
+ --kbq-markdown-table-header: var(--kbq-foreground-contrast-secondary);
118
118
  --kbq-markdown-table-body: var(--kbq-foreground-contrast);
119
119
  --kbq-markdown-table-border: var(--kbq-line-contrast-less);
120
120
  }
package/modal/_modal-theme.scss CHANGED
@@ -35,10 +35,10 @@
35
35
 
36
36
  @mixin kbq-modal-typography() {
37
37
  .kbq-modal-title {
38
- @include kbq-typography-level-to-styles_css-variables(typography, title);
38
+ @include kbq-typography-level-to-styles-css-variables(typography, title);
39
39
  }
40
40
 
41
41
  .kbq-modal-body {
42
- @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
42
+ @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
43
43
  }
44
44
  }
package/navbar/_navbar-theme.scss CHANGED
@@ -96,12 +96,12 @@ button {
96
96
 
97
97
  @mixin kbq-navbar-typography() {
98
98
  .kbq-navbar-title {
99
- @include kbq-typography-level-to-styles_css-variables(typography, text-normal-medium);
99
+ @include kbq-typography-level-to-styles-css-variables(typography, text-normal-medium);
100
100
  }
101
101
 
102
102
  .kbq-navbar-brand {
103
103
  .kbq-navbar-title {
104
- @include kbq-typography-level-to-styles_css-variables(typography, navbar-title);
104
+ @include kbq-typography-level-to-styles-css-variables(typography, navbar-title);
105
105
  }
106
106
  }
107
107
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@koobiq/components",
3
- "version": "18.5.3",
3
+ "version": "18.6.0",
4
4
  "description": "koobiq",
5
5
  "repository": {
6
6
  "type": "git",
@@ -24,13 +24,13 @@
24
24
  "@angular/cdk": "^18.0.0",
25
25
  "@angular/core": "^18.0.0",
26
26
  "@angular/forms": "^18.0.0",
27
- "@koobiq/cdk": "18.5.3",
28
- "@koobiq/angular-moment-adapter": "18.5.3",
29
- "@koobiq/angular-luxon-adapter": "18.5.3",
27
+ "@koobiq/cdk": "18.6.0",
28
+ "@koobiq/angular-moment-adapter": "18.6.0",
29
+ "@koobiq/angular-luxon-adapter": "18.6.0",
30
30
  "@koobiq/date-formatter": "^3.1.3",
31
31
  "@koobiq/icons": "^9.0.0",
32
- "@koobiq/tokens-builder": "3.7.3",
33
- "@koobiq/design-tokens": "3.7.3",
32
+ "@koobiq/tokens-builder": "3.8.1",
33
+ "@koobiq/design-tokens": "3.8.1",
34
34
  "@radix-ng/primitives": "^0.14.0",
35
35
  "overlayscrollbars": "2.7.3",
36
36
  "ngx-highlightjs": "^10.0.0"
package/popover/_popover-theme.scss CHANGED
@@ -29,10 +29,10 @@
29
29
 
30
30
  @mixin kbq-popover-typography() {
31
31
  .kbq-popover__header {
32
- @include kbq-typography-level-to-styles_css-variables(typography, subheading);
32
+ @include kbq-typography-level-to-styles-css-variables(typography, subheading);
33
33
  }
34
34
 
35
35
  .kbq-popover__content {
36
- @include kbq-typography-level-to-styles_css-variables(typography, text-normal);
36
+ @include kbq-typography-level-to-styles-css-variables(typography, text-normal);
37
37
  }
38
38
  }