@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/src/styles/components/notifications.css ADDED
@@ -0,0 +1,137 @@
1
+ @layer components.notifications {
2
+ :root {
3
+ --_notification-max-width: var(--notifications-max-width, 20rem);
4
+ --_notification-gap: var(--notification-gap, var(--spacing-base));
5
+ --_notification-border-color: var(--notification-border-color, var(--color-border-base));
6
+ --_notification-center-background: var(
7
+ --notification-center-background,
8
+ oklch(var(--color-surface-subtle) / 0.05)
9
+ );
10
+ }
11
+
12
+ :where(.nc-notification-center, .nc-notification-output) {
13
+ position: fixed;
14
+ inset-block-start: 0;
15
+ inset-block-end: 0;
16
+ inset-inline-end: 0;
17
+ inline-size: 100%;
18
+ block-size: 100%;
19
+ max-inline-size: var(--_notification-max-width);
20
+ padding-block: var(--_notification-gap);
21
+ pointer-events: none;
22
+ }
23
+
24
+ .nc-notification-center {
25
+ block-size: 100%;
26
+ backdrop-filter: blur(3px);
27
+ background-color: var(--_notification-center-background);
28
+ transform: translate(100%, 0);
29
+ transition: transform var(--transition-duration-base) ease-in-out;
30
+ }
31
+
32
+ :where(.nc-notification-output, .nc-notification-center-container) {
33
+ display: flex;
34
+ flex-direction: column;
35
+ align-items: flex-end;
36
+ gap: var(--_notification-gap);
37
+ inline-size: 100%;
38
+ overflow-y: scroll;
39
+ max-block-size: 100%;
40
+ padding-inline: var(--_notification-gap);
41
+ min-inline-size: 0;
42
+ min-block-size: 100%;
43
+ flex-grow: 1;
44
+ }
45
+
46
+ :where(.nc-notification-center.-open) {
47
+ pointer-events: all;
48
+ transform: translate(0, 0);
49
+ }
50
+
51
+ :where(.nc-notification-center.-open:has(+ .nc-notification-output > .nc-notification)) {
52
+ opacity: 0.5;
53
+ filter: contrast(0.5);
54
+ }
55
+
56
+ :where(.nc-notification-center-header) {
57
+ display: flex;
58
+ align-items: center;
59
+ gap: var(--_notification-gap);
60
+ padding-inline: var(--_notification-gap);
61
+ margin-block-end: var(--_notification-gap);
62
+ }
63
+
64
+ :where(.nc-notification) {
65
+ padding: 0.5lh 2ch;
66
+ background: var(--color-surface-base);
67
+ border: var(--border-width-thin) solid var(--_notification-border-color);
68
+ display: flex;
69
+ flex-direction: column;
70
+ inline-size: 100%;
71
+ border-radius: var(--border-radius-small);
72
+ box-shadow: var(--shadow-far);
73
+ animation: pop-in var(--transition-duration-base) cubic-bezier(0, 0.6, 0.58, 1);
74
+ color: var(--color-text-base);
75
+ pointer-events: all;
76
+ }
77
+
78
+ :where(.nc-notification) p {
79
+ margin: 0;
80
+ padding: 0;
81
+ }
82
+
83
+ :where(.nc-notification-title) {
84
+ font-size: var(--font-size-base);
85
+ font-weight: var(--font-weight-heading);
86
+ }
87
+
88
+ :where(.nc-notification-description) {
89
+ font-size: var(--font-size-small);
90
+ }
91
+
92
+ :where(.nc-notification-time) {
93
+ font-size: var(--font-size-small);
94
+ color: var(--color-text-subtle);
95
+ }
96
+
97
+ :where(.nc-notification-footer) {
98
+ display: flex;
99
+ justify-content: space-between;
100
+ align-items: flex-end;
101
+ inline-size: 100%;
102
+ margin-block-start: 0.5ch;
103
+ }
104
+
105
+ :where(.nc-notification .nc-button, .nc-notification-center .nc-button) {
106
+ --button-height-base: 1em;
107
+ font-size: var(--font-size-small);
108
+ }
109
+
110
+ :where(.nc-notification.-closing) {
111
+ animation: remove-notification var(--transition-duration-base) cubic-bezier(0.7, 0, 1, 1)
112
+ forwards;
113
+ }
114
+
115
+ @keyframes pop-in {
116
+ 0% {
117
+ transform: translate(3vmin, -2vmin) scale(0.98);
118
+ opacity: 0;
119
+ }
120
+
121
+ 50% {
122
+ transform: translate(0, -1vmin) scale(0.98);
123
+ }
124
+
125
+ 100% {
126
+ transform: translate(0, 0) scale(1);
127
+ opacity: 1;
128
+ }
129
+ }
130
+
131
+ @keyframes remove-notification {
132
+ to {
133
+ transform: translate(0, 4vmin) scale(0.98);
134
+ opacity: 0;
135
+ }
136
+ }
137
+ }
package/src/styles/components/tables.css ADDED
@@ -0,0 +1,7 @@
1
+ @layer components.table {
2
+ :where(.nc-table) {
3
+ inline-size: 100%;
4
+ max-inline-size: 100%;
5
+ overflow-x: auto;
6
+ }
7
+ }
package/src/styles/config/bundle.css ADDED
@@ -0,0 +1,2 @@
1
+ @import "./config.css";
2
+ @import "./extras.css";