@nordcode/ui 1.0.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 (66) hide show
  1. package/CHANGELOG.md +157 -0
  2. package/LICENSE.md +661 -0
  3. package/README.md +90 -0
  4. package/index.html +1169 -0
  5. package/out/bundle.css +1400 -0
  6. package/out/bundle_configless.css +1135 -0
  7. package/out/colors.css +87 -0
  8. package/out/complete.css +2647 -0
  9. package/out/complete_configless.css +2382 -0
  10. package/package.json +73 -0
  11. package/src/assets/fonts/DMMono-Regular.woff +0 -0
  12. package/src/assets/fonts/DMMono-Regular.woff2 +0 -0
  13. package/src/assets/fonts/fonts.css +7 -0
  14. package/src/assets/icons/ArrowRightSolid.svelte +1 -0
  15. package/src/assets/icons/arrow-right-solid.svg +1 -0
  16. package/src/assets/icons/favicon.png +0 -0
  17. package/src/assets/icons/favicon.svg +8 -0
  18. package/src/assets/logos/nordcode-logo-icon.svg +3 -0
  19. package/src/assets/logos/nordcode-logo.svg +17 -0
  20. package/src/modules/copyButtons/ts/copyButtons.ts +9 -0
  21. package/src/modules/dialogs/svelte/dialog.svelte +27 -0
  22. package/src/modules/dialogs/ts/LICENCE +171 -0
  23. package/src/modules/dialogs/ts/dialogs.ts +111 -0
  24. package/src/modules/notifications/js/notifications.js +294 -0
  25. package/src/modules/notifications/svelte/NotificationCenter.svelte +18 -0
  26. package/src/modules/notifications/svelte/NotificationTemplate.svelte +16 -0
  27. package/src/modules/sectionObserver/ts/sectionOberserver.ts +34 -0
  28. package/src/styles/bundle.css +7 -0
  29. package/src/styles/bundle_configless.css +5 -0
  30. package/src/styles/complete.css +5 -0
  31. package/src/styles/complete_configless.css +5 -0
  32. package/src/styles/components/badges.css +14 -0
  33. package/src/styles/components/breadcrumbs.css +37 -0
  34. package/src/styles/components/bundle.css +12 -0
  35. package/src/styles/components/buttons.css +256 -0
  36. package/src/styles/components/card.css +55 -0
  37. package/src/styles/components/dialogs.css +116 -0
  38. package/src/styles/components/forms.css +47 -0
  39. package/src/styles/components/gallery.css +66 -0
  40. package/src/styles/components/icons.css +60 -0
  41. package/src/styles/components/inputs/base.css +258 -0
  42. package/src/styles/components/inputs/bundle.css +5 -0
  43. package/src/styles/components/inputs/fields.css +79 -0
  44. package/src/styles/components/inputs/segmented.css +123 -0
  45. package/src/styles/components/inputs/switch.css +42 -0
  46. package/src/styles/components/inputs/tag-select.css +44 -0
  47. package/src/styles/components/lists.css +40 -0
  48. package/src/styles/components/notifications.css +137 -0
  49. package/src/styles/components/tables.css +7 -0
  50. package/src/styles/config/bundle.css +2 -0
  51. package/src/styles/config/config.css +828 -0
  52. package/src/styles/config/extras.css +18 -0
  53. package/src/styles/exceptions/bundle.css +3 -0
  54. package/src/styles/exceptions/misc.css +21 -0
  55. package/src/styles/exceptions/spacings.css +15 -0
  56. package/src/styles/exceptions/typography.css +57 -0
  57. package/src/styles/theme/colors.css +178 -0
  58. package/src/styles/theme/colors_processed.css +87 -0
  59. package/src/styles/utils/base.css +406 -0
  60. package/src/styles/utils/bundle.css +6 -0
  61. package/src/styles/utils/easings.css +364 -0
  62. package/src/styles/utils/layouts.css +298 -0
  63. package/src/styles/utils/media.css +55 -0
  64. package/src/styles/utils/reset.css +128 -0
  65. package/src/styles/utils/theme.css +120 -0
  66. package/transform.js +71 -0
package/out/colors.css ADDED
@@ -0,0 +1,87 @@
1
+ @layer theme {
2
+ :where(html) {
3
+ --lightningcss-light: initial;
4
+ --lightningcss-dark: ;
5
+ color-scheme: light dark;
6
+ }
7
+
8
+ @media (prefers-color-scheme: dark) {
9
+ :where(html) {
10
+ --lightningcss-light: ;
11
+ --lightningcss-dark: initial;
12
+ }
13
+ }
14
+
15
+ :where([data-theme="light"]) {
16
+ --lightningcss-light: initial;
17
+ --lightningcss-dark: ;
18
+ color-scheme: light;
19
+ }
20
+
21
+ :where([data-theme="dark"]) {
22
+ --lightningcss-light: ;
23
+ --lightningcss-dark: initial;
24
+ color-scheme: dark;
25
+ }
26
+
27
+ :where(*) {
28
+ --l-brand-primary: var(--lightningcss-light, var(--l-brand-primary-light)) var(--lightningcss-dark, var(--l-brand-primary-dark));
29
+ --color-brand-primary-emphasis: var(--lightningcss-light, var(--color-brand-primary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-primary-emphasis-dark));
30
+ --color-brand-primary-base: var(--lightningcss-light, var(--color-brand-primary-base-light)) var(--lightningcss-dark, var(--color-brand-primary-base-dark));
31
+ --color-brand-primary-surface: var(--lightningcss-light, var(--color-brand-primary-surface-light)) var(--lightningcss-dark, var(--color-brand-primary-surface-dark));
32
+ --color-brand-primary-hover: var(--lightningcss-light, var(--color-brand-primary-hover-light)) var(--lightningcss-dark, var(--color-brand-primary-hover-light));
33
+ --color-brand-primary-contrast-lightness: var(--lightningcss-light, var(--color-brand-primary-contrast-lightness-light)) var(--lightningcss-dark, var(--color-brand-primary-contrast-lightness-dark));
34
+ --color-brand-primary-contrast: var(--lightningcss-light, var(--color-brand-primary-contrast-light)) var(--lightningcss-dark, var(--color-brand-primary-contrast-dark));
35
+ --color-brand-secondary-emphasis: var(--lightningcss-light, var(--color-brand-secondary-emphasis-light)) var(--lightningcss-dark, var(--color-brand-secondary-emphasis-dark));
36
+ --color-brand-secondary-base: var(--lightningcss-light, var(--color-brand-secondary-base-light)) var(--lightningcss-dark, var(--color-brand-secondary-base-dark));
37
+ --color-brand-secondary-surface: var(--lightningcss-light, var(--color-brand-secondary-surface-light)) var(--lightningcss-dark, var(--color-brand-secondary-surface-dark));
38
+ --color-brand-secondary-hover: var(--lightningcss-light, var(--color-brand-secondary-hover-light)) var(--lightningcss-dark, var(--color-brand-secondary-hover-dark));
39
+ --color-brand-secondary-contrast: var(--lightningcss-light, var(--color-brand-secondary-contrast-light)) var(--lightningcss-dark, var(--color-brand-secondary-contrast-dark));
40
+ --color-text-base: var(--lightningcss-light, var(--color-text-base-light)) var(--lightningcss-dark, var(--color-text-base-dark));
41
+ --color-text-muted: var(--lightningcss-light, var(--color-text-muted-light)) var(--lightningcss-dark, var(--color-text-muted-dark));
42
+ --color-text-subtle: var(--lightningcss-light, var(--color-text-subtle-light)) var(--lightningcss-dark, var(--color-text-subtle-dark));
43
+ --color-text-on-emphasis: var(--lightningcss-light, var(--color-text-on-emphasis-light)) var(--lightningcss-dark, var(--color-text-on-emphasis-dark));
44
+ --color-text-hover: var(--lightningcss-light, var(--color-text-hover-light)) var(--lightningcss-dark, var(--color-text-hover-dark));
45
+ --color-surface-base: var(--lightningcss-light, var(--color-surface-base-light)) var(--lightningcss-dark, var(--color-surface-base-dark));
46
+ --color-surface-muted: var(--lightningcss-light, var(--color-surface-muted-light)) var(--lightningcss-dark, var(--color-surface-muted-dark));
47
+ --color-surface-subtle: var(--lightningcss-light, var(--color-surface-subtle-light)) var(--lightningcss-dark, var(--color-surface-subtle-dark));
48
+ --color-surface-emphasis: var(--lightningcss-light, var(--color-surface-emphasis-light)) var(--lightningcss-dark, var(--color-surface-emphasis-dark));
49
+ --color-border-base: var(--lightningcss-light, var(--color-border-base-light)) var(--lightningcss-dark, var(--color-border-base-dark));
50
+ --color-border-muted: var(--lightningcss-light, var(--color-border-muted-light)) var(--lightningcss-dark, var(--color-border-muted-dark));
51
+ --color-border-subtle: var(--lightningcss-light, var(--color-border-subtle-light)) var(--lightningcss-dark, var(--color-border-subtle-dark));
52
+ --color-border-on-emphasis: var(--lightningcss-light, var(--color-border-on-emphasis-light)) var(--lightningcss-dark, var(--color-border-on-emphasis-dark));
53
+ --color-border-hover: var(--lightningcss-light, var(--color-border-hover-light)) var(--lightningcss-dark, var(--color-border-hover-dark));
54
+ --color-status-info-emphasis: var(--lightningcss-light, var(--color-status-info-emphasis-light)) var(--lightningcss-dark, var(--color-status-info-emphasis-dark));
55
+ --color-status-info-base: var(--lightningcss-light, var(--color-status-info-base-light)) var(--lightningcss-dark, var(--color-status-info-base-dark));
56
+ --color-status-info-surface: var(--lightningcss-light, var(--color-status-info-surface-light)) var(--lightningcss-dark, var(--color-status-info-surface-dark));
57
+ --color-status-info-hover: var(--lightningcss-light, var(--color-status-info-hover-light)) var(--lightningcss-dark, var(--color-status-info-hover-light));
58
+ --color-status-info-contrast-lightness: var(--lightningcss-light, var(--color-status-info-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-info-contrast-lightness-dark));
59
+ --color-status-info-contrast: var(--lightningcss-light, var(--color-status-info-contrast-light)) var(--lightningcss-dark, var(--color-status-info-contrast-dark));
60
+ --color-status-success-emphasis: var(--lightningcss-light, var(--color-status-success-emphasis-light)) var(--lightningcss-dark, var(--color-status-success-emphasis-dark));
61
+ --color-status-success-base: var(--lightningcss-light, var(--color-status-success-base-light)) var(--lightningcss-dark, var(--color-status-success-base-dark));
62
+ --color-status-success-surface: var(--lightningcss-light, var(--color-status-success-surface-light)) var(--lightningcss-dark, var(--color-status-success-surface-dark));
63
+ --color-status-success-hover: var(--lightningcss-light, var(--color-status-success-hover-light)) var(--lightningcss-dark, var(--color-status-success-hover-light));
64
+ --color-status-success-contrast-lightness: var(--lightningcss-light, var(--color-status-success-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-success-contrast-lightness-dark));
65
+ --color-status-success-contrast: var(--lightningcss-light, var(--color-status-success-contrast-light)) var(--lightningcss-dark, var(--color-status-success-contrast-dark));
66
+ --color-status-warning-emphasis: var(--lightningcss-light, var(--color-status-warning-emphasis-light)) var(--lightningcss-dark, var(--color-status-warning-emphasis-dark));
67
+ --color-status-warning-base: var(--lightningcss-light, var(--color-status-warning-base-light)) var(--lightningcss-dark, var(--color-status-warning-base-dark));
68
+ --color-status-warning-surface: var(--lightningcss-light, var(--color-status-warning-surface-light)) var(--lightningcss-dark, var(--color-status-warning-surface-dark));
69
+ --color-status-warning-hover: var(--lightningcss-light, var(--color-status-warning-hover-light)) var(--lightningcss-dark, var(--color-status-warning-hover-light));
70
+ --color-status-warning-contrast-lightness: var(--lightningcss-light, var(--color-status-warning-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-warning-contrast-lightness-dark));
71
+ --color-status-warning-contrast: var(--lightningcss-light, var(--color-status-warning-contrast-light)) var(--lightningcss-dark, var(--color-status-warning-contrast-dark));
72
+ --color-status-danger-emphasis: var(--lightningcss-light, var(--color-status-danger-emphasis-light)) var(--lightningcss-dark, var(--color-status-danger-emphasis-dark));
73
+ --color-status-danger-base: var(--lightningcss-light, var(--color-status-danger-base-light)) var(--lightningcss-dark, var(--color-status-danger-base-dark));
74
+ --color-status-danger-surface: var(--lightningcss-light, var(--color-status-danger-surface-light)) var(--lightningcss-dark, var(--color-status-danger-surface-dark));
75
+ --color-status-danger-hover: var(--lightningcss-light, var(--color-status-danger-hover-light)) var(--lightningcss-dark, var(--color-status-danger-hover-light));
76
+ --color-status-danger-contrast-lightness: var(--lightningcss-light, var(--color-status-danger-contrast-lightness-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-lightness-dark));
77
+ --color-status-danger-contrast: var(--lightningcss-light, var(--color-status-danger-contrast-light)) var(--lightningcss-dark, var(--color-status-danger-contrast-dark));
78
+ --shadow-color: var(--lightningcss-light, var(--shadow-color-light)) var(--lightningcss-dark, var(--shadow-color-dark));
79
+ --shadow-inset: var(--lightningcss-light, var(--shadow-inset-light)) var(--lightningcss-dark, var(--shadow-inset-dark));
80
+ --shadow-nearest: var(--lightningcss-light, var(--shadow-nearest-light)) var(--lightningcss-dark, var(--shadow-nearest-dark));
81
+ --shadow-near: var(--lightningcss-light, var(--shadow-near-light)) var(--lightningcss-dark, var(--shadow-near-dark));
82
+ --shadow-medium: var(--lightningcss-light, var(--shadow-medium-light)) var(--lightningcss-dark, var(--shadow-medium-dark));
83
+ --shadow-far: var(--lightningcss-light, var(--shadow-far-light)) var(--lightningcss-dark, var(--shadow-far-dark));
84
+ --triangle-down-url: var(--lightningcss-light, var(--triangle-down-url-light)) var(--lightningcss-dark, var(--triangle-down-url-dark));
85
+ --triangle-up-url: var(--lightningcss-light, var(--triangle-up-url-light)) var(--lightningcss-dark, var(--triangle-up-url-dark));
86
+ }
87
+ }