@xyd-js/atlas 0.1.0-xyd.11 → 0.1.0-xyd.13

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 (50) hide show
  1. package/.storybook/index.css +2 -27
  2. package/CHANGELOG.md +15 -0
  3. package/LICENSE +21 -0
  4. package/dist/CodeSample-B9VUhTKF-DJ2leksk.js +2 -0
  5. package/dist/CodeSample-B9VUhTKF-DJ2leksk.js.map +1 -0
  6. package/dist/CodeSample-BSXeFy0x-DJ2leksk.js +2 -0
  7. package/dist/CodeSample-BSXeFy0x-DJ2leksk.js.map +1 -0
  8. package/dist/CodeSample-BwP208sQ-DJ2leksk.js +2 -0
  9. package/dist/CodeSample-BwP208sQ-DJ2leksk.js.map +1 -0
  10. package/dist/CodeSample-CUemtj_W-DJ2leksk.js +2 -0
  11. package/dist/CodeSample-CUemtj_W-DJ2leksk.js.map +1 -0
  12. package/dist/CodeSample-D0iKih-A-DJ2leksk.js +2 -0
  13. package/dist/CodeSample-D0iKih-A-DJ2leksk.js.map +1 -0
  14. package/dist/CodeSample-D33vTa6M-DJ2leksk.js +2 -0
  15. package/dist/CodeSample-D33vTa6M-DJ2leksk.js.map +1 -0
  16. package/dist/CodeSample-DUSx2KBt-DJ2leksk.js +2 -0
  17. package/dist/CodeSample-DUSx2KBt-DJ2leksk.js.map +1 -0
  18. package/dist/CodeSample-P4yxkHPW-DJ2leksk.js +2 -0
  19. package/dist/CodeSample-P4yxkHPW-DJ2leksk.js.map +1 -0
  20. package/dist/atlas-index.d.ts +15 -0
  21. package/dist/atlas-index.js +2 -0
  22. package/dist/atlas-index.js.map +1 -0
  23. package/dist/index.css +58 -58
  24. package/dist/index.js +1 -1
  25. package/dist/index.js.map +1 -1
  26. package/dist/tokens.css +57 -0
  27. package/index.ts +1 -2
  28. package/package.json +8 -3
  29. package/packages/atlas-index/AtlasIndex.tsx +79 -0
  30. package/packages/atlas-index/index.ts +3 -0
  31. package/rollup.config.js +53 -11
  32. package/src/components/ApiRef/ApiRefItem/ApiRefItem.styles.tsx +56 -67
  33. package/src/components/ApiRef/ApiRefItem/ApiRefItem.tsx +20 -27
  34. package/src/components/ApiRef/ApiRefProperties/ApiRefProperties.styles.tsx +128 -142
  35. package/src/components/ApiRef/ApiRefProperties/ApiRefProperties.tsx +27 -37
  36. package/src/components/ApiRef/ApiRefSamples/ApiRefSamples.styles.tsx +18 -23
  37. package/src/components/ApiRef/ApiRefSamples/ApiRefSamples.tsx +3 -6
  38. package/src/components/Atlas/Atlas.styles.tsx +3 -5
  39. package/src/components/Atlas/Atlas.tsx +2 -5
  40. package/src/components/Atlas/AtlasLazy/AtlasLazy.styles.tsx +7 -8
  41. package/src/components/Atlas/AtlasLazy/AtlasLazy.tsx +2 -4
  42. package/src/components/Code/CodeCopy/CodeCopy.styles.tsx +17 -0
  43. package/src/components/Code/CodeCopy/CodeCopy.tsx +2 -4
  44. package/src/components/Code/CodeSample/CodeSample.styles.tsx +129 -132
  45. package/src/components/Code/CodeSample/CodeSample.tsx +15 -21
  46. package/src/components/Code/CodeSampleButtons/CodeSampleButtons.styles.tsx +57 -141
  47. package/src/components/Code/CodeSampleButtons/CodeSampleButtons.tsx +13 -20
  48. package/src/styles/tokens.css +57 -0
  49. package/tsconfig.json +3 -0
  50. package/src/components/Code/CodeCopy/CodeCopy.style.tsx +0 -21
package/src/styles/tokens.css ADDED
@@ -0,0 +1,57 @@
1
+ :root {
2
+ /* Ref tokens - Base values */
3
+ --XydAtlas-Ref-Palette-Primary-60: #7051d4;
4
+ --XydAtlas-Ref-Palette-Primary-70: #6045b9;
5
+ --XydAtlas-Ref-Palette-Primary-80: #4f399e;
6
+
7
+ --XydAtlas-Ref-Palette-Neutral-10: #F8F9FA;
8
+ --XydAtlas-Ref-Palette-Neutral-20: #F1F3F5;
9
+ --XydAtlas-Ref-Palette-Neutral-30: #E9ECEF;
10
+ --XydAtlas-Ref-Palette-Neutral-40: #DEE2E6;
11
+ --XydAtlas-Ref-Palette-Neutral-70: #6C757D;
12
+ --XydAtlas-Ref-Palette-Neutral-80: #495057;
13
+ --XydAtlas-Ref-Palette-Neutral-100: #212529;
14
+
15
+ /* System tokens - Semantic values */
16
+ --XydAtlas-Sys-Color-Primary: var(--XydAtlas-Ref-Palette-Primary-60);
17
+ --XydAtlas-Sys-Color-Primary--hover: var(--XydAtlas-Ref-Palette-Primary-70);
18
+ --XydAtlas-Sys-Color-Primary--active: var(--XydAtlas-Ref-Palette-Primary-80);
19
+
20
+ --XydAtlas-Sys-Color-Surface: var(--XydAtlas-Ref-Palette-Neutral-10);
21
+ --XydAtlas-Sys-Color-Surface--hover: var(--XydAtlas-Ref-Palette-Neutral-20);
22
+ --XydAtlas-Sys-Color-Surface--active: var(--XydAtlas-Ref-Palette-Neutral-30);
23
+
24
+ --XydAtlas-Sys-Color-Text-Primary: var(--XydAtlas-Ref-Palette-Neutral-100);
25
+ --XydAtlas-Sys-Color-Text-Secondary: var(--XydAtlas-Ref-Palette-Neutral-80);
26
+ --XydAtlas-Sys-Color-Text-Tertiary: var(--XydAtlas-Ref-Palette-Neutral-70);
27
+
28
+ --XydAtlas-Sys-Color-Border: var(--XydAtlas-Ref-Palette-Neutral-30);
29
+ --XydAtlas-Sys-Color-Border--hover: var(--XydAtlas-Ref-Palette-Neutral-40);
30
+ --XydAtlas-Sys-Color-Border--active: var(--XydAtlas-Ref-Palette-Primary-60);
31
+
32
+ /* Component tokens - Specific component values */
33
+ /* ApiRef Properties */
34
+ --XydAtlas-Component-ApiRef-Properties__color-description: var(--XydAtlas-Sys-Color-Text-Secondary);
35
+ --XydAtlas-Component-ApiRef-Properties__color-propName: var(--XydAtlas-Sys-Color-Text-Primary);
36
+ --XydAtlas-Component-ApiRef-Properties__color-propType: var(--XydAtlas-Sys-Color-Text-Tertiary);
37
+ --XydAtlas-Component-ApiRef-Properties__color--active: var(--XydAtlas-Sys-Color-Primary);
38
+ --XydAtlas-Component-ApiRef-Properties__color-border: var(--XydAtlas-Sys-Color-Border);
39
+
40
+ /* ApiRef Item */
41
+ --XydAtlas-Component-ApiRef-Item__color-border: var(--XydAtlas-Sys-Color-Border);
42
+ --XydAtlas-Component-ApiRef-Item__color-navbar: var(--XydAtlas-Sys-Color-Text-Secondary);
43
+
44
+ /* Code Sample */
45
+ --XydAtlas-Component-Code-Sample__color-border: var(--XydAtlas-Sys-Color-Border);
46
+ --XydAtlas-Component-Code-Sample__color: var(--XydAtlas-Sys-Color-Text-Secondary);
47
+ --XydAtlas-Component-Code-Sample__color--active: var(--XydAtlas-Sys-Color-Primary);
48
+ --XydAtlas-Component-Code-Sample__color-background: var(--XydAtlas-Sys-Color-Surface--hover);
49
+ --XydAtlas-Component-Code-Sample__color-markBorder--active: var(--XydAtlas-Sys-Color-Primary);
50
+ --XydAtlas-Component-Code-Sample__color-markBackground--active: var(--XydAtlas-Sys-Color-Surface--hover);
51
+
52
+ /* Code Sample Buttons */
53
+ --XydAtlas-Component-Code-SampleButtons__color-containerBackground: var(--XydAtlas-Sys-Color-Surface);
54
+ --XydAtlas-Component-Code-SampleButtons__color-background--active: var(--XydAtlas-Sys-Color-Surface--active);
55
+ --XydAtlas-Component-Code-SampleButtons__color: var(--XydAtlas-Sys-Color-Text-Secondary);
56
+ --XydAtlas-Component-Code-SampleButtons__color--active: var(--XydAtlas-Sys-Color-Text-Primary);
57
+ }
package/tsconfig.json CHANGED
@@ -35,6 +35,9 @@
35
35
  "src/**/*.ts",
36
36
  "src/**/*.tsx",
37
37
  "src/**/*.json",
38
+ "packages/**/*.ts",
39
+ "packages/**/*.tsx",
40
+ "packages/**/*.json",
38
41
  ".storybook/**/*.ts",
39
42
  ".storybook/**/*.tsx",
40
43
  ],
package/src/components/Code/CodeCopy/CodeCopy.style.tsx DELETED
@@ -1,21 +0,0 @@
1
- import {css} from "@linaria/core";
2
-
3
- export const $copy = {
4
- host: css`
5
- all: unset;
6
-
7
- cursor: pointer;
8
-
9
- display: flex;
10
- align-items: center;
11
- justify-content: center;
12
-
13
- border-radius: 6px;
14
- padding: 6px;
15
-
16
- &:hover {
17
- transition: ease-in 0.1s;
18
- background: var(--atlas-comp-code-copy-background--active);
19
- }
20
- `
21
- }