@andreyshpigunov/x 0.5.3 → 0.5.5

package/src/components/x/buttons.css

@@ -6,6 +6,7 @@ Created by Andrey Shpigunov at 20.03.2025
 All right reserved.
 ----------------------------------------*/
 
+
 /*
   .button
   .button_label
@@ -20,53 +21,6 @@ All right reserved.
   .buttons-group
 */
 
-:root {
-  /*
-    External variables:
-    typo.css
-      --font-family
-      --font-size
-    colors.css
-      --color-grey
-      --color-primary
-      --color-success
-      --color-warning
-      --color-danger
-  */
-  
-  /* Required variables */
-  --button-height-coeff: 2.5;
-  --button-side-padding-coeff: 1.25;
-  --button-color: var(--color-grey);
-  --button-font-family: var(--font-family);
-  --button-font-color: #000;
-  --button-font-weight: 400;
-  --button-transition: all .1s ease-out;
-  --button-font-size: var(--font-size);
-  --button-transform: translate(0,0);
-  --button-transform-hover: none;
-  --button-transform-active: translate(0,.1rem);
-  --button-transform-origin: center bottom;
-  --button-box-shadow: 0 .1rem .1rem #00000011;
-  --button-box-shadow-hover: 0 .1rem .1rem #00000022;
-  --button-box-shadow-active: inset 0 0 .1rem #00000011;
-  --button-disabled-opacity: .5;
-  --button-border-radius: calc(var(--button-font-size) * 0.6);
-
-  /* Strength of hover (lighten) / active (darken). Override on :root or .button--* to tune. */
-  --button-hover-lighten: 10%;
-  --button-active-darken: 5%;
-  
-  /*
-    Additional variables and their default values:
-    --button-height: 4rem;
-    --button-side-padding: 2rem;
-    --button-hover-lighten: 20%  (how much white to mix on hover);
-    --button-active-darken: 20%  (how much black to mix on active).
-    Override --button-color-hover / --button-color-active for custom behaviour (e.g. .button--clear).
-  */
-}
-
 @layer buttons {
   
   .button, [type=submit] {

package/src/components/x/colors.css

@@ -26,17 +26,6 @@ All right reserved.
   .bg-grey
 */
 
-:root {
-  --color-primary: #0088ee;
-  --color-success: #33c433;
-  --color-warning: #ff8800;
-  --color-danger: #ee3333;
-  --color-error: #ee3333;
-  --color-black: #fff;
-  --color-white: #000;
-  --color-grey: #f4f5f6;
-}
-
 @layer colors {
     
   .color-primary {

package/src/components/x/dropdown.css

@@ -7,21 +7,6 @@ All right reserved.
 ----------------------------------------*/
 
 
-:root {
-  --dropdown-border-radius: 1.2rem;
-  --dropdown-backgroud-color: white;
-  --dropdown-box-shadow: var(--shadow-4);
-  --dropdown-padding: .8rem;
-  --dropdown-max-width: 28rem;
-  --dropdown-item-padding: .6rem 2.4rem .6rem 1.2rem;
-  --dropdown-item-font-size: inherit;
-  --dropdown-item-font-color: black;
-  --dropdown-item-font-color-hover: black;
-  --dropdown-item-background-color: white;
-  --dropdown-item-background-color-hover: var(--color-grey);
-  --dropdown-divider-color: var(--color-grey);
-}
-
 @layer dropdown {
   
   [x-dropdown] {

package/src/components/x/flex.css

@@ -6,6 +6,7 @@ Created by Andrey Shpigunov at 20.03.2025
 All right reserved.
 ----------------------------------------*/
 
+
 /*
   .flex     (s,m,l,xl)
   

package/src/components/x/flow.css

@@ -6,6 +6,7 @@ Created by Andrey Shpigunov at 20.03.2025
 All right reserved.
 ----------------------------------------*/
 
+
 /*
   .flow
   .flow.s[0-10] (s,m,l,xl)   - vertical space

package/src/components/x/grid.css

@@ -6,6 +6,7 @@ Created by Andrey Shpigunov at 20.03.2025
 All right reserved.
 ----------------------------------------*/
 
+
 /*
   .grid                   (s,m,l,xl)
   .grid.g[1-12]           (s,m,l,xl)  - columns limit in grid
@@ -13,7 +14,6 @@ All right reserved.
   .grid > .c[1-12]/[1-12] (s,m,l,xl)  - columns range for content
 */
 
-
 @layer grid {
   
   .grid { display: grid }

package/src/components/x/helpers.css

@@ -112,22 +112,6 @@ All right reserved.
   .no-print
 */
 
-
-:root {
-  --container-max-width: 160rem;
-  
-  --shadow-1:  0 2px 4px #00000016;
-  --shadow-2:  0 4px 8px #00000016;
-  --shadow-3:  0 6px 12px #00000016;
-  --shadow-4:  0 8px 16px #00000016;
-  --shadow-5:  0 10px 20px #00000016;
-  --shadow-6:  0 12px 24px #00000016;
-  --shadow-7:  0 14px 28px #00000016;
-  --shadow-8:  0 16px 32px #00000016;
-  --shadow-9:  0 18px 36px #00000016;
-  --shadow-10: 0 20px 40px #00000016;
-}
-
 @layer helpers {
   
   /* !- Font smoothing */

package/src/components/x/links.css

@@ -21,26 +21,6 @@ All right reserved.
   a.link_wavy
 */
 
-:root {
-  --link-color: #0060cc;
-  --link-decoration-line: underline;
-  --link-decoration-style: solid;
-  
-  /*
-    Additional variables and their default values:
-    --link-color-hover: var(--link-color);
-    --link-color-visited: var(--link-color);
-    --link-decoration-line-hover: var(--link-decoration-line-hover, var(--link-decoration-line));
-    --link-decoration-style-hover: var(--link-decoration-style-hover, var(--link-decoration-style));
-    --link-decoration-thickness: .06em;
-    --link-decoration-color: color-mix(in srgb, currentcolor, transparent 75%);
-    --link-decoration-color-hover: currentcolor;
-    --link-decoration-color-visited: currentcolor;
-    --link-underline-offset: .25em;
-    --link-transition: all .1s ease-out;
-  */
-}
-
 @layer links {
   
   a {

package/src/components/x/modal.css

@@ -7,27 +7,6 @@ All right reserved.
 ----------------------------------------*/
 
 
-:root {
-  --modal-margin-top: 3vw;
-  --modal-margin-bottom: 3vw;
-  --modal-margin-left: 3vw;
-  --modal-margin-right: 3vw;
-  --modal-padding-top: clamp(2.5rem, 4vw, 5rem);
-  --modal-padding-bottom: clamp(2.5rem, 4vw, 5rem);
-  --modal-padding-left: clamp(2.5rem, 4vw, 5rem);
-  --modal-padding-right: clamp(2.5rem, 4vw, 5rem);
-  --modal-background: #fff;
-  --modal-box-shadow: 0 1rem 4rem #00000033;
-  --modal-border-radius: 1.6rem;
-  --modal-closer-margin: .6rem;
-  --modal-closer-area: 4rem;
-  --modal-closer-size: 2.4rem;
-  --modal-closer-width: .2rem;
-  --modal-closer-color: #ccc;
-  --modal-closer-color-hover: #f00;
-  --modal-overlay-background-color: #00000066;
-}
-
 @layer modal {
 
   html.modal_active body {

package/src/components/x/reset.css

@@ -19,32 +19,6 @@ All right reserved.
   All queries are mobile first.
 */
 
-:root {
-  /* Base variables */
-  --font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
-                 "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
-  --font-family-mono: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
-  --line-height: 1.5;
-  --font-size-base: 62.5%;
-  --font-size: 1.6rem;
-  --font-scale: 1;
-  --font-color: #000;
-  --background-color: #fff;
-
-  /* Spaces */
-  --space-0:  0;
-  --space-1:  0.4rem;
-  --space-2:  0.8rem;
-  --space-3:  1.2rem;
-  --space-4:  1.6rem;
-  --space-5:  2.0rem;
-  --space-6:  2.4rem;
-  --space-7:  3.2rem;
-  --space-8:  4.0rem;
-  --space-9:  4.8rem;
-  --space-10: 6.4rem;
-}
-
 @layer reset {
   
   html, body, main, div, span, object, iframe,

package/src/components/x/scroll.css

@@ -16,12 +16,6 @@ All right reserved.
   .scroll_x-mandatory
 */
 
-:root {
-  --scroll-scrollbar-size: 6px;
-  --scroll-scrollbar-thumb-background: #00000011;
-  --scroll-scrollbar-thumb-background-hover: #00000022;
-}
-
 @layer scroll {
   
   .scroll {

package/src/components/x/slider.css

@@ -7,21 +7,6 @@ All right reserved.
 ----------------------------------------*/
 
 
-:root {
-  --slider-point-color: #ffffff66;
-  --slider-point-color-active: #fff;
-  --slider-point-size: .3rem;
-  --slider-indicators-gap: .3rem;
-  --slider-indicators-top: auto;
-  --slider-indicators-left: 1.2rem;
-  --slider-indicators-right: 1.2rem;
-  --slider-indicators-bottom: 1rem;
-  --slider-indicators-width: auto;
-  --slider-indicators-height: var(--slider-point-size);
-  --slider-indicators-init-opacity: 0;
-  --slider-object-fit: cover;
-}
-
 @layer slider {
   
   .slider {

package/src/components/x/typo.css

@@ -11,42 +11,6 @@ All right reserved.
   .h[1-6]
 */
 
-:root {
-  --headers-margin-top: 1em;
-  --headers-margin-bottom: .5em;
-  --headers-font-family: var(--font-family);
-  --headers-font-weight: 700;
-  --headers-font-color: var(--font-color);
-
-  --h1-font-size: 3.2rem;
-  --h2-font-size: 2.4rem;
-  --h3-font-size: 2.0rem;
-  --h4-font-size: 1.6rem;
-  --h5-font-size: 1.4rem;
-  --h6-font-size: 1.2rem;
-
-  --h1-line-height: 1.2;
-  --h2-line-height: 1.3;
-  --h3-line-height: 1.4;
-
-  --paragraph-margin: 1em;
-
-  --figure-margin: 2.5em auto 2em;
-  --figcaption-margin-top: .5em;
-  --figcaption-font-size: var(--font-size);
-  --figcaption-color: #999;
-  
-  --blockquote-margin: 2em 0;
-  --blockquote-padding: 1em 2em;
-  --blockquote-border: none;
-  --blockquote-font-style: italic;
-
-  --table-padding: .5em .75em;
-  --table-border: 1px solid #e4e4e4;
-  --table-caption-font-weight: 700;
-  --table-header-font-weight: 700;
-}
-
 @layer typo {
   
   /* !- Headers */

package/src/components/x/variables.css

@@ -0,0 +1,220 @@
+/*----------------------------------------
+variables.css
+Переменные
+
+Created by Andrey Shpigunov at 15.04.2026
+All right reserved.
+----------------------------------------*/
+
+
+@layer variables {
+  
+  :root{
+    /* Base variables */
+    --font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+                  "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+    --font-family-mono: SFMono-Regular, Consolas, Liberation Mono, Menlo, monospace;
+    --line-height: 1.5;
+    --font-size-base: 62.5%;
+    --font-size: 1.6rem;
+    --font-scale: 1;
+    --font-color: #000;
+    --background-color: #fff;
+    
+    /* Spaces */
+    --space-0:  0;
+    --space-1:  0.4rem;
+    --space-2:  0.8rem;
+    --space-3:  1.2rem;
+    --space-4:  1.6rem;
+    --space-5:  2.0rem;
+    --space-6:  2.4rem;
+    --space-7:  3.2rem;
+    --space-8:  4.0rem;
+    --space-9:  4.8rem;
+    --space-10: 6.4rem;
+    
+    --headers-margin-top: 1em;
+    --headers-margin-bottom: .5em;
+    --headers-font-family: var(--font-family);
+    --headers-font-weight: 700;
+    --headers-font-color: var(--font-color);
+    
+    --h1-font-size: 3.2rem;
+    --h2-font-size: 2.4rem;
+    --h3-font-size: 2.0rem;
+    --h4-font-size: 1.6rem;
+    --h5-font-size: 1.4rem;
+    --h6-font-size: 1.2rem;
+    
+    --h1-line-height: 1.2;
+    --h2-line-height: 1.3;
+    --h3-line-height: 1.4;
+    
+    --paragraph-margin: 1em;
+    
+    --figure-margin: 2.5em auto 2em;
+    --figcaption-margin-top: .5em;
+    --figcaption-font-size: var(--font-size);
+    --figcaption-color: #999;
+    
+    --blockquote-margin: 2em 0;
+    --blockquote-padding: 1em 2em;
+    --blockquote-border: none;
+    --blockquote-font-style: italic;
+    
+    --table-padding: .5em .75em;
+    --table-border: 1px solid #e4e4e4;
+    --table-caption-font-weight: 700;
+    --table-header-font-weight: 700;
+    
+    --container-max-width: 160rem;
+    
+    --shadow-1:  0 2px 4px #00000016;
+    --shadow-2:  0 4px 8px #00000016;
+    --shadow-3:  0 6px 12px #00000016;
+    --shadow-4:  0 8px 16px #00000016;
+    --shadow-5:  0 10px 20px #00000016;
+    --shadow-6:  0 12px 24px #00000016;
+    --shadow-7:  0 14px 28px #00000016;
+    --shadow-8:  0 16px 32px #00000016;
+    --shadow-9:  0 18px 36px #00000016;
+    --shadow-10: 0 20px 40px #00000016;
+    
+    --link-color: #0060cc;
+    --link-decoration-line: underline;
+    --link-decoration-style: solid;
+    
+    /*
+      Additional variables and their default values:
+      --link-color-hover: var(--link-color);
+      --link-color-visited: var(--link-color);
+      --link-decoration-line-hover: var(--link-decoration-line-hover, var(--link-decoration-line));
+      --link-decoration-style-hover: var(--link-decoration-style-hover, var(--link-decoration-style));
+      --link-decoration-thickness: .06em;
+      --link-decoration-color: color-mix(in srgb, currentcolor, transparent 75%);
+      --link-decoration-color-hover: currentcolor;
+      --link-decoration-color-visited: currentcolor;
+      --link-underline-offset: .25em;
+      --link-transition: all .1s ease-out;
+    */
+    
+    --color-primary: #0088ee;
+    --color-success: #33c433;
+    --color-warning: #ff8800;
+    --color-danger: #ee3333;
+    --color-error: #ee3333;
+    --color-black: #fff;
+    --color-white: #000;
+    --color-grey: #f4f5f6;
+    
+    /* Required variables */
+    --button-height-coeff: 2.5;
+    --button-side-padding-coeff: 1.25;
+    --button-color: var(--color-grey);
+    --button-font-family: var(--font-family);
+    --button-font-color: #000;
+    --button-font-weight: 400;
+    --button-transition: all .1s ease-out;
+    --button-font-size: var(--font-size);
+    --button-transform: translate(0,0);
+    --button-transform-hover: none;
+    --button-transform-active: translate(0,.1rem);
+    --button-transform-origin: center bottom;
+    --button-box-shadow: 0 .1rem .1rem #00000011;
+    --button-box-shadow-hover: 0 .1rem .1rem #00000022;
+    --button-box-shadow-active: inset 0 0 .1rem #00000011;
+    --button-disabled-opacity: .5;
+    --button-border-radius: calc(var(--button-font-size) * 0.6);
+    
+    /* Strength of hover (lighten) / active (darken). Override on :root or .button--* to tune. */
+    --button-hover-lighten: 10%;
+    --button-active-darken: 5%;
+    
+    /*
+      Additional variables and their default values:
+      --button-height: 4rem;
+      --button-side-padding: 2rem;
+      --button-hover-lighten: 20%  (how much white to mix on hover);
+      --button-active-darken: 20%  (how much black to mix on active).
+      Override --button-color-hover / --button-color-active for custom behaviour (e.g. .button--clear).
+    */
+    
+    --dropdown-border-radius: 1.2rem;
+    --dropdown-backgroud-color: white;
+    --dropdown-box-shadow: var(--shadow-4);
+    --dropdown-padding: .8rem;
+    --dropdown-max-width: 28rem;
+    --dropdown-item-padding: .6rem 2.4rem .6rem 1.2rem;
+    --dropdown-item-font-size: inherit;
+    --dropdown-item-font-color: black;
+    --dropdown-item-font-color-hover: black;
+    --dropdown-item-background-color: white;
+    --dropdown-item-background-color-hover: var(--color-grey);
+    --dropdown-divider-color: var(--color-grey);
+    
+    --form-width: 40rem;
+    --form-height-coeff: 2.6;
+    --form-side-padding: 1rem;
+    
+    --form-font-size: var(--font-size);
+    --form-font-color: #000;
+    --form-font-color-readonly: #000;
+    --form-font-color-disabled: #666;
+    --form-font-color-placeholder: #ccc;
+    
+    --form-border-width: .1rem;
+    --form-border-radius: .8rem;
+    --form-border-color: #d4d4d4;
+    --form-border-color-focused: #8cf;
+    --form-border-color-error: #f00;
+    --form-border-color-readonly: #ddd;
+    --form-border-color-disabled: #ddd;
+    
+    --form-background-color: #fff;
+    --form-background-color-readonly: #fafafa;
+    --form-background-color-disabled: #f6f6f6;
+    
+    /*
+      Additional variables and their default values:
+      --form-height: 4rem;
+    */
+    
+    --modal-margin-top: 3vw;
+    --modal-margin-bottom: 3vw;
+    --modal-margin-left: 3vw;
+    --modal-margin-right: 3vw;
+    --modal-padding-top: clamp(2.5rem, 4vw, 5rem);
+    --modal-padding-bottom: clamp(2.5rem, 4vw, 5rem);
+    --modal-padding-left: clamp(2.5rem, 4vw, 5rem);
+    --modal-padding-right: clamp(2.5rem, 4vw, 5rem);
+    --modal-background: #fff;
+    --modal-box-shadow: 0 1rem 4rem #00000033;
+    --modal-border-radius: 1.6rem;
+    --modal-closer-margin: .6rem;
+    --modal-closer-area: 4rem;
+    --modal-closer-size: 2.4rem;
+    --modal-closer-width: .2rem;
+    --modal-closer-color: #ccc;
+    --modal-closer-color-hover: #f00;
+    --modal-overlay-background-color: #00000066;
+    
+    --scroll-scrollbar-size: 6px;
+    --scroll-scrollbar-thumb-background: #00000011;
+    --scroll-scrollbar-thumb-background-hover: #00000022;
+    
+    --slider-point-color: #ffffff66;
+    --slider-point-color-active: #fff;
+    --slider-point-size: .3rem;
+    --slider-indicators-gap: .3rem;
+    --slider-indicators-top: auto;
+    --slider-indicators-left: 1.2rem;
+    --slider-indicators-right: 1.2rem;
+    --slider-indicators-bottom: 1rem;
+    --slider-indicators-width: auto;
+    --slider-indicators-height: var(--slider-point-size);
+    --slider-indicators-init-opacity: 0;
+    --slider-object-fit: cover;
+  }
+  
+}

package/src/css/x.css

@@ -7,8 +7,16 @@ All right reserved.
 ----------------------------------------*/
 
 
-@layer reset, space, typo, links, grid, flex, flow, form, buttons, dropdown, sheets, slider, sticky, modal, scroll, icons, helpers, colors;
+@layer variables, reset, space, typo, links, grid, flex, flow, form, buttons, dropdown, sheets, slider, sticky, modal, scroll, icons, app, helpers, colors;
 
+@layer app {
+  /*
+    Фейковый слой, чтобы можно было обернуть в него стили
+    приложения без повторного перечисления слоев.
+  */
+}
+
+@import "../components/x/variables.css";
 @import "../components/x/reset.css";
 @import "../components/x/space.css";
 @import "../components/x/typo.css";