update

zumerlab · Jul 20, 2024 · dc9b4ad · dc9b4ad
1 parent 15dade5
commit dc9b4ad
Show file tree

Hide file tree

Showing 19 changed files with 254 additions and 161 deletions.
diff --git a/assets/css/orbit.min.css b/assets/css/orbit.min.css
diff --git a/assets/css/orbit.min.css.map b/assets/css/orbit.min.css.map
diff --git a/notes.md b/notes.md
@@ -281,4 +281,4 @@ penssar en algo tipo span sectors, orbiters
 - ver algop ara labels... tipo https://www.benchling.com/
 * reset styles to avoid conflcits
 - create basic theme
-- volver a chequear documentacion
+* volver a chequear documentacion
diff --git a/src/js/orbit-label.js b/src/js/orbit-label.js
@@ -13,10 +13,10 @@ function calcularExpresionCSS(cssExpression) {
 /*! 
 ## o-label
 
-`<o-label>` is a standard web-component for rendering curved text. 
-By default there are 24 sector per orbit. The number can be modify with `$max-orbiters` var at `_variables.scss`.
+`<o-label>` is a standard web-component for rendering curved text. There are up to 24 sector per orbit. 
+The number can be modify with `$max-orbiters` var at `_variables.scss`.
 
-It has some special attributes and css variables to customize it:
+### Customization
   - Attribute `label-color`: To set a text color for label. Default `black`
   - Attribute `bg-color`: To set a background color for label. Default `none`
 

diff --git a/src/js/orbit-progress.js b/src/js/orbit-progress.js
@@ -4,7 +4,8 @@
 `<o-progress>` is a standard web-component for rendering a radial progress bar. Just one o-progress can be used per orbit.
 It has two elements: a progress bar and a background bar that show the max range progress bar can achieve.
 
-o-progress has some special attributes and css variables to customize it:
+### Customization
+
   - Attribute `value`: To set a number that represents the progress bar value.
   - Attribute `max`: To set the max allowed `value`.
   - Attribute `bar-color`: To set a color for progress bar. Default `orange`

diff --git a/src/js/orbit-resize.js b/src/js/orbit-resize.js
@@ -1,41 +1,23 @@
 /*! 
-## Orbit.resize
+## Orbit.resize()
 
-Resize is currently the only method of Orbit. 
+Resize is currently the only JS method of Orbit. 
 
-### Install
+### Usage
 
 ```html
 <body>
-    <div class="orbit-zone">
-    <!-- Orbit app -->
+    <div class="container">
+        <div class="orbit-zone">
+            <!-- Orbit app -->
+        </div>
     </div>
     <script scr="orbit-resize.js">
-
+        Orbit.resize('container');
     </script>
 </body>
-
-```
-
-### Usage
-
-```html
-<div class="wrapper">
-    <div class="orbit-zone">
-    <!-- Orbit app -->
-    </div>
-</div>
 ```
 
-
-```js
-<script scr="orbit-resize.js">
-    Orbit.resize('.wrapper')
-</script>
-
-```
-
-
 */
 let Orbit = {}
 

diff --git a/src/js/orbit-sector.js b/src/js/orbit-sector.js
@@ -13,10 +13,10 @@ function calcularExpresionCSS(cssExpression) {
 /*! 
 ## o-sector
 
-`<o-sector>` is a standard web-component for rendering a radial slices or pies. 
-By default there are 24 sector per orbit. The number can be modify with `$max-orbiters` var at `_variables.scss`.
+`<o-sector>` is a standard web-component for rendering a radial slices or pies. By default there are 24 sector per orbit. The number can be modify with `$max-orbiters` var at `_variables.scss`.
+
+### Custmization
 
-It has some special attributes and css variables to customize it:
   - Attribute `sector-color`: To set a color for sector. Default `orange`
   - Attribute `shape`: To set a different endings looks. Currently, you can choose between `circle`, `arrow`, `slash`, `backslash` and `zigzag` shapes. Default `none`
 

diff --git a/src/orbit.scss b/src/orbit.scss
@@ -22,6 +22,7 @@
 /*=================
     ORBIT THEME
 ===================*/
+@import './scss/_color-theme.scss';
 @import './scss/_orbit-zone_theme.scss';
 @import './scss/_orbit-class_theme.scss';
 @import './scss/_satellite_theme.scss';

diff --git a/src/scss/_capsule.scss b/src/scss/_capsule.scss
@@ -2,8 +2,8 @@
 /*!
 ## .capsule
 
-Capsule is a class to put text or other content. It can be used into satellites and segments.
-There are some utilties to modify capsule orientation content.
+Capsule is a class to put text or another content. Currently, it can be used into `satellites` and `segments`.
+There are some utilties to modify `.capsule` orientation content.
 
 ### Usage
 
@@ -24,7 +24,7 @@ There are some utilties to modify capsule orientation content.
 
 ### TO-DO
 
-- Add some visual aids
+- Add some visual aids to prevent add capsule in elements are no satellite or segment.
 
 
 */

diff --git a/src/scss/_color-theme.scss b/src/scss/_color-theme.scss
@@ -0,0 +1,94 @@
+:root {
+  --o-red: hsl(3, 100%, 61%);
+  --o-orange: hsl(36, 100%, 51%);
+  --o-yellow: hsl(49, 100%, 51%);
+  --o-green: hsl(129, 67%, 51%);
+  --o-cyan: hsl(197, 88%, 65%);
+  --o-blue: hsl(210, 100%, 51%);
+  --o-indigo: hsl(240, 73%, 63%);
+  --o-purple: hsl(279, 85%, 65%);
+  --o-pink: hsl(348, 100%, 60%);
+  --o-gray: hsl(240, 2%, 60%);
+
+  --o-hue: 70; /* 0 - 360 */
+  --o-saturation: 70%; /* 0 - 100% */
+  --o-light: 70%; /* 0 - 100% */
+  --o-color: hsl(var(--o-hue), var(--o-saturation), var(--o-light));
+
+  --o-color-white: color-mix(in oklab, var(--o-color), white 95%);
+  --o-color-lighter: color-mix(in oklab, var(--o-color), white 75%);
+  --o-color-light: color-mix(in oklab, var(--o-color), white 30%);
+  --o-color-dark: color-mix(in oklab, var(--o-color), black 20%);
+  --o-color-darker: color-mix(in oklab, var(--o-color), black 40%);
+  --o-color-black: color-mix(in oklab, var(--o-color), black 78%);
+
+  --o-red-white: color-mix(in oklab, var(--o-red), white 95%);
+  --o-red-lighter: color-mix(in oklab, var(--o-red), white 75%);
+  --o-red-light: color-mix(in oklab, var(--o-red), white 30%);
+  --o-red-dark: color-mix(in oklab, var(--o-red), black 20%);
+  --o-red-darker: color-mix(in oklab, var(--o-red), black 40%);
+  --o-red-black: color-mix(in oklab, var(--o-red), black 78%);
+
+  --o-orange-white: color-mix(in oklab, var(--o-orange), white 95%);
+  --o-orange-lighter: color-mix(in oklab, var(--o-orange), white 75%);
+  --o-orange-light: color-mix(in oklab, var(--o-orange), white 30%);
+  --o-orange-dark: color-mix(in oklab, var(--o-orange), black 20%);
+  --o-orange-darker: color-mix(in oklab, var(--o-orange), black 40%);
+  --o-orange-black: color-mix(in oklab, var(--o-orange), black 78%);
+
+  --o-yellow-white: color-mix(in oklab, var(--o-yellow), white 95%);
+  --o-yellow-lighter: color-mix(in oklab, var(--o-yellow), white 75%);
+  --o-yellow-light: color-mix(in oklab, var(--o-yellow), white 30%);
+  --o-yellow-dark: color-mix(in oklab, var(--o-yellow), black 20%);
+  --o-yellow-darker: color-mix(in oklab, var(--o-yellow), black 40%);
+  --o-yellow-black: color-mix(in oklab, var(--o-yellow), black 78%);
+
+  --o-green-white: color-mix(in oklab, var(--o-green), white 95%);
+  --o-green-lighter: color-mix(in oklab, var(--o-green), white 75%);
+  --o-green-light: color-mix(in oklab, var(--o-green), white 30%);
+  --o-green-dark: color-mix(in oklab, var(--o-green), black 20%);
+  --o-green-darker: color-mix(in oklab, var(--o-green), black 40%);
+  --o-green-black: color-mix(in oklab, var(--o-green), black 78%);
+
+  --o-cyan-white: color-mix(in oklab, var(--o-cyan), white 95%);
+  --o-cyan-lighter: color-mix(in oklab, var(--o-cyan), white 75%);
+  --o-cyan-light: color-mix(in oklab, var(--o-cyan), white 30%);
+  --o-cyan-dark: color-mix(in oklab, var(--o-cyan), black 20%);
+  --o-cyan-darker: color-mix(in oklab, var(--o-cyan), black 40%);
+  --o-cyan-black: color-mix(in oklab, var(--o-cyan), black 78%);
+
+  --o-blue-white: color-mix(in oklab, var(--o-blue), white 95%);
+  --o-blue-lighter: color-mix(in oklab, var(--o-blue), white 75%);
+  --o-blue-light: color-mix(in oklab, var(--o-blue), white 30%);
+  --o-blue-dark: color-mix(in oklab, var(--o-blue), black 20%);
+  --o-blue-darker: color-mix(in oklab, var(--o-blue), black 40%);
+  --o-blue-black: color-mix(in oklab, var(--o-color), black 78%);
+
+  --o-indigo-white: color-mix(in oklab, var(--o-indigo), white 95%);
+  --o-indigo-lighter: color-mix(in oklab, var(--o-indigo), white 75%);
+  --o-indigo-light: color-mix(in oklab, var(--o-indigo), white 30%);
+  --o-indigo-dark: color-mix(in oklab, var(--o-indigo), black 20%);
+  --o-indigo-darker: color-mix(in oklab, var(--o-indigo), black 40%);
+  --o-indigo-black: color-mix(in oklab, var(--o-indigo), black 78%);
+
+  --o-purple-white: color-mix(in oklab, var(--o-purple), white 95%);
+  --o-purple-lighter: color-mix(in oklab, var(--o-purple), white 75%);
+  --o-purple-light: color-mix(in oklab, var(--o-purple), white 30%);
+  --o-purple-dark: color-mix(in oklab, var(--o-purple), black 20%);
+  --o-purple-darker: color-mix(in oklab, var(--o-purple), black 40%);
+  --o-purple-black: color-mix(in oklab, var(--o-purple), black 78%);
+
+  --o-pink-white: color-mix(in oklab, var(--o-pink), white 95%);
+  --o-pink-lighter: color-mix(in oklab, var(--o-pink), white 75%);
+  --o-pink-light: color-mix(in oklab, var(--o-pink), white 30%);
+  --o-pink-dark: color-mix(in oklab, var(--o-pink), black 20%);
+  --o-pink-darker: color-mix(in oklab, var(--o-pink), black 40%);
+  --o-pink-black: color-mix(in oklab, var(--o-pink), black 78%);
+
+  --o-gray-white: color-mix(in oklab, var(--o-gray), white 95%);
+  --o-gray-lighter: color-mix(in oklab, var(--o-gray), white 75%);
+  --o-gray-light: color-mix(in oklab, var(--o-gray), white 30%);
+  --o-gray-dark: color-mix(in oklab, var(--o-gray), black 20%);
+  --o-gray-darker: color-mix(in oklab, var(--o-gray), black 40%);
+  --o-gray-black: color-mix(in oklab, var(--o-gray), black 78%);
+}
diff --git a/src/scss/_label.scss b/src/scss/_label.scss
@@ -1,5 +1,5 @@
 @use './variables' as *;
-/*!
+/*
 ## <o-label>
 
 See o-label docs in web-component file.

diff --git a/src/scss/_orbit-class.scss b/src/scss/_orbit-class.scss
@@ -10,7 +10,6 @@ By default there are 12 orbits. The number can be modify with `$max-orbits` var
 ### Stack order
 Orbits stack order is same as any html element. First orbit is below second one. 
 
-
 ### Usage: 
 
 - Basic example that renders two orbits
@@ -29,15 +28,6 @@ Orbits stack order is same as any html element. First orbit is below second one.
   </div>
   ```
 
-### Examples:
-
-- This renders three orbits equally distributed 
-  ```html
-  <div class="orbit"></div>
-  <div class="orbit"></div>
-  <div class="orbit"></div>
-  ```
-
 - This renders three orbits with custom distribution
   ```html
   <div class="orbit-2"></div>
@@ -84,10 +74,7 @@ an ellipse (`--o-ellipse-x`, and `--o-ellipse-y`). This will affect orbit and it
 </div>
 ```
 
-There are some utility classes that are set on orbit element and affect its child radial layout (`.from-*`, `.range-*`, etc). 
-Please see **Radial Layout section**.
-
-
+There are some utility classes that are set on `.orbit` element and affect its child radial layout (`.from-*`, `.range-*`, etc).  Please see [**Radial Layout section**].
 
 */
 .orbit, [class*='orbit-']:not(.orbit-zone) {

diff --git a/src/scss/_orbit-zone.scss b/src/scss/_orbit-zone.scss
@@ -1,13 +1,11 @@
 /*! 
 ## .orbit-zone
 
-Orbit-zone is a functional class that groups `.orbit` classes. It serves as a container with a length defined once by `--o-length` when the Orbit app is initialized.
+Orbit-zone is a container class that groups `.orbit` classes. It serves as a container with a size defined once by `--o-length` when the Orbit app is initialized.
 ~~When orbit-zone is nested into a `.satellite`, its length will depend on the `.satellite`'s `.orbit` diameter.~~
 
 ### Customization
 
-It has some special classes and css variables to customize it:
-
   - Aligment class utilities: `.center`, `center-left`, `.center-right`, `.top-left`, `.top-center`, `.top-right`, `.bottom-left`, `.bottom-center`,  `.bottom-right`. Default `.center`
 
 **Note:** Orbit is 100% CSS, but in case user needs Orbit be responsive there is an optional tiny JS script that modifies `--o-length` when a parent element of `.orbit-zone` is resized. See how to use in Orbit.resize docs
@@ -21,15 +19,14 @@ It has some special classes and css variables to customize it:
   <div class="orbit"></div>
   <div class="orbit">
     <div class="satellite">
-      <div class="orbit-zone"> <!-- Nested -->
+      <div class="orbit-zone"> <!-- nested -->
         <div class="orbit"></div>
       </div>
     </div>
   </div>
 </div>
 ```
 
-
 */
 .orbit-zone {
   container-name: orbitzone;

diff --git a/src/scss/_progress.scss b/src/scss/_progress.scss
@@ -1,4 +1,4 @@
-/*!
+/*
 ## <o-progress>
 
 See o-progress docs in web-component docs.

diff --git a/src/scss/_radial-layout.scss b/src/scss/_radial-layout.scss
@@ -2,35 +2,47 @@
 @use './variables' as *;
 
 /*! 
-## Orbit Radial Layout
+## Orbit radial layout
 
 Orbit radial layout is the core of Orbit framework that offers a flexible, clean and simple way to design radial UI using just CSS and some optional vanilla web components crafted to improve dev UX.
 
 ### Overview
 
-`.orbit` and `.orbit-*` have `--o-orbit-number` to individualize their position according to the maximum number of orbits (e.g., `orbit-4` has `--o-orbit-number: 4`). Similarly, other elements such as `satellites`, `spokes`, `sectors`, and others use `--o-orbit-child-number` to be individualized.
+To create radial layouts using just CSS, it is neccesary to use CSS variables and do some maths. `.orbit` and `.orbit-*` have `--o-orbit-number` var to individualize their position according to the maximum number of orbits. Similarly, other elements such as `satellites`, `spokes`, `sectors`, and others use `--o-orbit-child-number` to be individualized.
 
-`.orbit` and `.orbit-*` hold a unique `--o-angle` value calculated by counting their children. This allows to distribute such elements along an orbit.
+Besides that, `.orbit` and `.orbit-*` have `--o-angle` var that counts their child elements.
 
 ### Mechanism
 
 The mechanism is straightforward:
 
-- `--o-orbit-number` gives a radius that informs where each `orbit` is placed, according to `.orbit-zone` length and maximum number of orbits. For example, with an `.orbit-zone` length of 500px and a maximum of 12 orbits, `orbit-4` will have 166.66 pixels of radius.
+- `--o-orbit-number` informs where each `orbit` is placed, according to `.orbit-zone` length and maximum number of orbits. For example, with an `.orbit-zone` length of 500px and a maximum of 12 orbits, `orbit-4` will have 166.66 pixels of radius.
 
-- `--o-angle` is calculated depending on children number in an orbit (if one orbit has 3 satellites, `--o-angle` is 120deg). Finally, `--o-angle` is multiplied by `--o-orbit-child-numbers`. For example, satellite one will have 120deg, satellite two 240deg, and satellite three 360deg, and each satellite will be placed along its orbit at 166.66px.
+- `--o-angle` is calculated depending on `.orbit` children number. For example, if an orbit has 3 satellites, `--o-angle` is 120deg). Finally, `--o-angle` is multiplied by `--o-orbit-child-number`. For example, satellite one will have 120deg, satellite two 240deg, and satellite three 360deg, and each satellite will be placed along its orbit at 166.66px.
 
 ### Modifiers
 
-There are some modifiers to adjust orbit child distribution:
+There are some modifiers to adjust orbit child distribution and make radial layout more flexible:
 
-- `--o-range`: This variable allows the user to set an arbitrary arc length. Values can range from 0 to 360deg. For convenience, there are utility classes `range-*` (.range-0 to .range-360).
+  - Utility class `.range-*`: To define the arc lenght. Default '360deg'
+  - Utility class `.from-*`: To define starting point. Default '0deg'
+  - Utility class `.grow-*x`: To increase size according number of orbits. Default 1.
+  - Utility class `.reduce-*`: To decrease size according an orbit fracction percentage. Default 1.
+  - Utility class `.inner-orbit`: To place `.satellite` just below its orbit
+  - Utility class `.outer-orbit`: To place `.satellite` just above its orbit
+  - Utility class `.quarter-inner-orbit`: To place `.satellite` a 25% into its orbit.
+  - Utility class `.quarter-outer-orbit`: To place `.satellite` a 25% outer its orbit.
+  - Utility class `.ccw`: to invert arrange order of orbit child elements. Default clock-wise.
+  - Utility class `.fit-range`: Useful when range is inferior to 360deg to cover all range.
 
-- `--o-from`: This variable allows the user to set an arbitrary starting point. Values can range from 0 to 360deg. For convenience, there are utility classes `from-*` (.from-0 to .from-360).
+### Layout rules
 
-- ccw
+Any Orbit project should be follow this simple rules:
 
-- fit-range
+- Start with `.orbit-zone`.
+- Add as many `.orbit`or `.orbit-*` as needed.
+- Put `.satellite`, `o-sector`, `o-progress`,`o-label`,`.segment` or `.spoke` inside an `.orbit`. 
+- Orbits can be nested by adding `.orbit-zone` into `.satellite`.
 
 ### Usage and Examples
 
@@ -66,11 +78,6 @@ There are some modifiers to adjust orbit child distribution:
 </div>
 ```
 
-#### To-do
-
-- Improve this doc section to be more clear
-- Add angle modifier
-
 */
 
 /* Orbits layout */