@zumer/orbit 1.0.0 → 1.1.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.
package/LICENSE CHANGED
@@ -1,6 +1,6 @@
1
1
  MIT License
2
2
 
3
- Copyright (c) 2024 Juan Martín Muda - ZumerLab
3
+ Copyright (c) 2025 Juan Martín Muda - ZumerLab
4
4
 
5
5
  Permission is hereby granted, free of charge, to any person obtaining a copy
6
6
  of this software and associated documentation files (the "Software"), to deal
package/README.md CHANGED
@@ -26,11 +26,14 @@ place your ⭐ in Orbit! <a href="https://github.com/zumerlab/orbit/stargazers">
26
26
 
27
27
  **Orbit** is a CSS framework designed for creating radial layouts. It offers simplicity, effectiveness, ease of use, and tremendous versatility for crafting compelling designs. It offers extensive customization options and supports nesting for building intricate designs tailored to your requirements.
28
28
 
29
-
30
29
  ## Why Orbit?
31
30
 
32
31
  Creating radial UIs generally involves using JavaScript or other programming languages to calculate angles, radii, distances, and more. **Orbit** saves you time and effort by enabling you to build these UIs with just CSS.
33
32
 
33
+ ## Documentation
34
+
35
+ Learn all about **Orbit** in our [doc site](https://zumerlab.github.io/orbit-docs)!
36
+
34
37
  ## What is radial UI?
35
38
 
36
39
  Radial UI refers to a design paradigm where elements are organized in a circular or radial pattern, diverging from traditional grid-based or linear layouts. This design approach is particularly effective for applications that involve:
@@ -64,10 +67,6 @@ With **Orbit**, you can:
64
67
  - Use **Orbit** alongside other traditional CSS frameworks.
65
68
  - Get started quickly with our detailed documentation, examples, and guides.
66
69
 
67
- ## Documentation
68
-
69
- Learn all about **Orbit** in our [doc site](https://zumerlab.github.io/orbit-docs)!
70
-
71
70
  ## Installation
72
71
 
73
72
  **Orbit** comes with just two files: `orbit.css` (or `orbit.min.css`) and `orbit.js` (or `orbit.min.js`).
@@ -155,6 +154,11 @@ There are many ways to **contribute** to **Orbit** development:
155
154
  - [**GitHub discussions**](https://github.com/zumerlab/orbit/discussions): Engage with other contributors, ask questions, and share your experiences.
156
155
  - [**Telegram group**](https://t.me/ZumlyCommunity): Join our Telegram group for real-time discussions and updates.
157
156
 
157
+ ## Special thanks to Doc Contributors
158
+
159
+ <a href="https://github.com/zumerlab/orbit-docs/graphs/contributors">
160
+ <img src="https://contrib.rocks/image?repo=zumerlab/orbit-docs" />
161
+ </a>
158
162
 
159
163
  ## License
160
164
 
package/dist/orbit.css CHANGED
@@ -1,13 +1,13 @@
1
1
 
2
2
  /*
3
3
  * orbit
4
- * v.1.0.0
4
+ * v.1.1.0
5
5
  * Author Juan Martin Muda - Zumerlab
6
6
  * License MIT
7
7
  **/
8
8
  @charset "UTF-8";
9
9
 
10
- /* ../../../../../var/folders/dl/jfswzzq96_7bqvgnhjs47_8w0000gp/T/tmp-71826-jluxOtrlBV0O/orbit/src/orbit.css */
10
+ /* ../../../../../var/folders/dl/jfswzzq96_7bqvgnhjs47_8w0000gp/T/tmp-63323-uDKMmYzQL1SX/orbit/src/orbit.css */
11
11
  .gravity-spot * {
12
12
  box-sizing: border-box;
13
13
  margin: 0;
@@ -1216,35 +1216,10 @@ o-arc {
1216
1216
  border-radius: 50%;
1217
1217
  position: absolute;
1218
1218
  pointer-events: none;
1219
- fill: currentColor;
1220
1219
  width: 100%;
1221
1220
  r: var(--o-radius);
1222
- stroke-width: calc(var(--o-radius) / (var(--o-orbit-number) + var(--o-initial-orbit, 0)) * var(--o-size-ratio, 1));
1223
1221
  transform: rotate(calc(var(--o-from) + var(--o-angle-composite)));
1224
1222
  }
1225
- o-arc[flip]:not([value]),
1226
- o-arc.flip:not([value]) {
1227
- --o-angle-composite: var(--o-angle) * calc(var(--o-orbit-child-number) + 1) * var(--o-direction, 1);
1228
- }
1229
- o-text {
1230
- --o-angle-composite: var(--o-angle) * var(--o-orbit-child-number) * var(--o-direction, 1);
1231
- container-name: otext;
1232
- display: flex;
1233
- justify-content: center;
1234
- align-items: center;
1235
- border-radius: 50%;
1236
- position: absolute;
1237
- pointer-events: none;
1238
- width: 100%;
1239
- fill: currentColor;
1240
- r: var(--o-radius);
1241
- stroke-width: calc(var(--o-radius) / (var(--o-orbit-number) + var(--o-initial-orbit, 0)) * var(--o-size-ratio, 1));
1242
- transform: rotate(calc(var(--o-from) + var(--o-angle-composite)));
1243
- }
1244
- o-text[flip],
1245
- o-text.flip {
1246
- --o-angle-composite: var(--o-angle) * calc(var(--o-orbit-child-number) + 1) * var(--o-direction, 1);
1247
- }
1248
1223
  o-progress {
1249
1224
  container-name: oprogress;
1250
1225
  --o-angle-composite: var(--o-angle) * var(--o-orbit-child-number) * var(--o-direction, 1);
@@ -6855,46 +6830,82 @@ o-arc.gap-30 {
6855
6830
  background: currentcolor;
6856
6831
  }
6857
6832
  o-progress {
6858
- --o-color: currentcolor;
6859
- --o-hover-color: unset;
6860
- --o-background-color: transparent;
6833
+ --o-fill: var(--o-gray-light);
6834
+ --o-stroke: var(--o-fill);
6835
+ --o-stroke-width: 1;
6836
+ --o-back-fill: transparent;
6837
+ --o-back-stroke: none;
6838
+ --o-back-stroke-width: 1;
6839
+ }
6840
+ o-progress:hover {
6841
+ --o-fill: var(--o-gray-light);
6842
+ --o-stroke: var(--o-fill);
6843
+ --o-stroke-width: 1;
6844
+ --o-back-fill: transparent;
6845
+ --o-back-stroke: none;
6846
+ --o-back-stroke-width: 1;
6861
6847
  }
6862
6848
  o-arc {
6863
- --o-color: unset;
6864
- --o-hover-color: unset;
6849
+ --o-fill: var(--o-gray-light);
6850
+ --o-stroke: var(--o-fill);
6851
+ --o-stroke-width: 1;
6852
+ }
6853
+ o-arc:hover {
6854
+ --o-fill: var(--o-gray-light);
6855
+ --o-stroke: var(--o-fill);
6856
+ --o-stroke-width: 1;
6865
6857
  }
6866
6858
  .dev-orbit.gravity-spot {
6867
6859
  background: none;
6868
- border: 0.2px dashed var(--o-red-light);
6860
+ border: 1px dashed var(--o-red-light);
6869
6861
  }
6870
6862
  .dev-orbit .gravity-spot {
6871
6863
  background: none;
6872
- border: 0.2px dashed var(--o-red-light);
6864
+ border: 1px dashed var(--o-red-light);
6873
6865
  }
6874
6866
  .dev-orbit .orbit,
6875
6867
  .dev-orbit [class*=orbit-] {
6876
- border: 0.2px solid var(--o-red-light);
6868
+ border: 1px dashed var(--o-red-light);
6877
6869
  }
6878
6870
  .dev-orbit .satellite {
6879
6871
  background-color: transparent;
6880
- border: 1px solid currentColor;
6872
+ border: 1px dashed var(--o-red-light);
6881
6873
  }
6882
6874
  .dev-orbit .vector {
6883
6875
  border: none;
6884
- background: currentColor;
6876
+ background: var(--o-red-light);
6885
6877
  }
6886
6878
  .dev-orbit .side {
6887
6879
  border: none;
6888
- background: currentColor;
6880
+ background: var(--o-red-light);
6889
6881
  }
6890
6882
  .dev-orbit o-progress {
6891
- --o-color: currentColor;
6892
- --o-hover-color: unset;
6893
- --o-background-color: transparent;
6883
+ --o-fill: var(--o-red-lighter);
6884
+ --o-stroke: var(--o-red-lighter);
6885
+ --o-stroke-width: 1;
6886
+ --o-back-fill: var(--o-red-lighter);
6887
+ --o-back-stroke: var(--o-red-lighter);
6888
+ --o-back-stroke-width: 1;
6889
+ fill-opacity: 0.5;
6890
+ }
6891
+ .dev-orbit o-progress:hover {
6892
+ --o-fill: var(--o-red-light);
6893
+ --o-stroke: var(--o-red-light);
6894
+ --o-stroke-width: 2;
6895
+ --o-back-fill: var(--o-red-light);
6896
+ --o-back-stroke: var(--o-red-light);
6897
+ --o-back-stroke-width: 2;
6894
6898
  }
6895
6899
  .dev-orbit o-arc {
6896
- --o-color: currentColor;
6897
- --o-hover-color: unset;
6900
+ --o-fill: var(--o-red-lighter);
6901
+ --o-stroke: var(--o-red-lighter);
6902
+ --o-stroke-width: 1;
6903
+ fill-opacity: 0.5;
6904
+ }
6905
+ .dev-orbit o-arc:hover {
6906
+ --o-fill: var(--o-red-light);
6907
+ --o-stroke: var(--o-red-light);
6908
+ --o-stroke-width: 2;
6898
6909
  }
6899
6910
  .theme-cyan .gravity-spot {
6900
6911
  background: none;
@@ -6917,11 +6928,28 @@ o-arc {
6917
6928
  background: var(--o-cyan);
6918
6929
  }
6919
6930
  .theme-cyan o-progress {
6920
- --o-color: var(--o-cyan);
6921
- --o-hover-color: var(--o-cyan);
6922
- --o-background-color: transparent;
6931
+ --o-fill: var(--o-cyan-light);
6932
+ --o-stroke: var(--o-fill);
6933
+ --o-stroke-width: 1;
6934
+ --o-back-fill: transparent;
6935
+ --o-back-stroke: none;
6936
+ --o-back-stroke-width: 1;
6937
+ }
6938
+ .theme-cyan o-progress:hover {
6939
+ --o-fill: var(--o-cyan-lighter);
6940
+ --o-stroke: var(--o-fill);
6941
+ --o-stroke-width: 2;
6942
+ --o-back-fill: transparent;
6943
+ --o-back-stroke: none;
6944
+ --o-back-stroke-width: 2;
6923
6945
  }
6924
6946
  .theme-cyan o-arc {
6925
- --o-color: var(--o-cyan);
6926
- --o-hover-color: unset;
6947
+ --o-fill: var(--o-cyan-light);
6948
+ --o-stroke: var(--o-fill);
6949
+ --o-stroke-width: 1;
6950
+ }
6951
+ .theme-cyan o-arc:hover {
6952
+ --o-fill: var(--o-cyan-lighter);
6953
+ --o-stroke: var(--o-fill);
6954
+ --o-stroke-width: 2;
6927
6955
  }