@andreyshpigunov/x 0.5.2 → 0.5.4

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,9 @@ 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, helpers, colors;
 
+@import "../components/x/variables.css";
 @import "../components/x/reset.css";
 @import "../components/x/space.css";
 @import "../components/x/typo.css";
@@ -187,6 +188,14 @@ All right reserved.
   .br100     (s,m,l,xl)
   .sh[0-10]  (s,m,l,xl)
   .o[0-10]   (s,m,l,xl)
+  .mono
+  .italic
+  .strike
+  .fs[10-19] step 1 (m,l,xl) - size in rem - 1.0, 1.1, 1.2, ..., 1.9
+  .fs[20-64] step 2 (m,l,xl) - size in rem - 2.0, 2.2, 2.4, ..., 6.4
+  .fw[100-900] step 100 (m,l,xl)
+  .ls[0-4] (m,l,xl)
+  .lh[0-9] (m,l,xl)  - values: 1.0-1.9
   .no-print
 */
 
@@ -222,12 +231,4 @@ All right reserved.
 
 /*
   .h[1-6]
-  .mono
-  .italic
-  .strike
-  .fs[10-19] step 1 (m,l,xl) - size in rem - 1.0, 1.1, 1.2, ..., 1.9
-  .fs[20-64] step 2 (m,l,xl) - size in rem - 2.0, 2.2, 2.4, ..., 6.4
-  .fw[100-900] step 100 (m,l,xl)
-  .ls[0-4] (m,l,xl)
-  .lh[0-9] (m,l,xl)  - values: 1.0-1.9
 */