@uzum-tech/ui 0.1.2 → 1.0.1

package/es/checkbox/src/styles/index.cssr.js

@@ -1,7 +1,6 @@
-import { c, cB, cE, cM, insideModal, insidePopover } from '../../../_utils/cssr';
+import { c, cB, cE, cM } from '../../../_utils/cssr';
 import { iconSwitchTransition } from '../../../_styles/transitions/icon-switch.cssr';
 // vars:
-// --u-label-line-height
 // --u-bezier
 // --u-size
 // --u-border
@@ -12,8 +11,6 @@ import { iconSwitchTransition } from '../../../_styles/transitions/icon-switch.c
 // --u-box-shadow-focus
 // --u-color
 // --u-color-checked
-// --u-color-table
-// --u-color-table-modal
 // --u-color-disabled
 // --u-color-disabled-checked
 // --u-text-color
@@ -24,8 +21,23 @@ import { iconSwitchTransition } from '../../../_styles/transitions/icon-switch.c
 // --u-border-radius
 // --u-font-size
 // --u-label-padding
-export default c([cB('checkbox', `
+export default c([iconSwitchTransition(), c('@keyframes ripple', {
+  from: {
+    transform: 'scale(0)'
+  },
+  to: {
+    transform: 'scale(1)',
+    opacity: '0.5'
+  }
+}), cB('checkbox', `
+ --u-merged-color: var(--u-color);
+ --u-merged-shadow: transparent;
+ --u-merged-border: var(--u-border);
+ --u-merged-icon: transparent;
+ box-sizing: border-box;
  font-size: var(--u-font-size);
+ line-height: var(--u-line-height);
+ font-weight: var(--u-font-weight);
  outline: none;
  cursor: pointer;
  display: var(--u-checkbox-position-block);
@@ -34,218 +46,129 @@ export default c([cB('checkbox', `
  align-items: flex-start;
  word-break: break-word;
  line-height: var(--u-size);
- --u-merged-color-table: var(--u-color-table);
- `, [cM('show-label', 'line-height: var(--u-label-line-height);'),
-// Default styles
-c('&:hover', [cB('checkbox-box', [cE('border', `
- border: var(--u-border-hover);
- `), c('&:before', `
- background-color: var(--u-box-shadow-hover);
- `)])]), c('&:focus:not(:active)', [cB('checkbox-box', [cE('border', `
- border: var(--u-border-hover);
- `), c('&:before', `
- background-color: var(--u-box-shadow-focus);
- `)])]), c('&:active', [cB('checkbox-box', [cE('border', `
- border: var(--u-border-hover);
- `), c('&:before', `
- background-color: var(--u-box-shadow-focus);
- `), cE('ripple', `
- background-color: var(--u-box-shadow-active);
- animation: ripple 0.4s 1 ease-in-out;
- `)])]),
-// background: var(--u-box-shadow-active);
-cM('inside-table', [cB('checkbox-box', `
- background-color: var(--u-merged-color-table);
- `)]), cM('checked', [cB('checkbox-box', `
- background-color: var(--u-color-checked);
- `, [cB('checkbox-icon', [
-// if not set width to 100%, safari & old chrome won't display the icon
-c('.check-icon', `
- opacity: 1;
+ color: var(--u-text-color);
+ `, [c('*', `
+ box-sizing: border-box;
+ `), c('&:hover', `
+ --u-merged-color: var(--u-color-hover);
+ --u-merged-border: var(--u-border-hover);
+ --u-merged-shadow: var(--u-box-shadow-hover);
+ `, [cB('checkbox-box', [c('&:before', `
  transform: scale(1);
- border-radius: 4px;
- `)])])]), cM('indeterminate', [cB('checkbox-box', [cB('checkbox-icon', [c('.check-icon', `
- opacity: 0;
+ `)])]), c('&:focus', `
+ --u-merged-color: var(--u-color-focus);
+ --u-merged-border: var(--u-border-hover);
+ --u-merged-shadow: var(--u-box-shadow-focus);
+ `, [cB('checkbox-box', [c('&:before', `
+ opacity: 0.36;
  transform: scale(1);
- `), c('.line-icon', `
- opacity: 1;
+ `)])]), c('&:active', `
+ --u-merged-color: var(--u-color-active);
+ --u-merged-shadow: var(--u-box-shadow-active);
+ --u-merged-border: var(--u-border-active);
+ `, [cB('checkbox-box', [c('&:before', `
+ opacity: 0.5;
  transform: scale(1);
- `)])])]),
-// Checked and Indeterminate styles
-cM('checked, indeterminate', [c('&:hover', [cB('checkbox-box', [cE('border', `
- border: var(--u-border-checked);
- `), c('&:before', `
- background-color: var(--u-box-shadow-hover-checked);
- `)])]), c('&:focus:not(:active)', [cB('checkbox-box', [cE('border', `
- border: var(--u-border-checked);
- `), c('&:before', `
- background-color: var(--u-box-shadow-focus-checked);
- `)])]), c('&:active', [cB('checkbox-box', [cE('border', `
- border: var(--u-border-checked);
- `), c('&:before', `
- background-color: var(--u-box-shadow-focus-checked);
  `), cE('ripple', `
- background: var(--u-box-shadow-active-checked);
- animation: ripple 0.4s 1 ease-in-out;
- `)])]), cB('checkbox-box', `
- background-color: var(--u-color-checked);
- border-left: 0;
- border-top: 0;
- `, [cE('border', {
-  border: 'var(--u-border-checked)'
-})])]),
-// Disabled styles
-cM('disabled', {
-  cursor: 'not-allowed'
-}, [cE('label', `
+ animation: ripple 0.4s 1 ease-in-out both;
+ `)])]), cM('disabled', `
+ cursor: not-allowed;
+ --u-merged-color: var(--u-color-disabled);
+ --u-merged-border: var(--u-border-disabled);
+ --u-merged-shadow: transparent;
  color: var(--u-text-color-disabled);
- `), c('&:hover', [cB('checkbox-box', [cE('border', `
- border: var(--u-border);
- `), c('&:before', `
- background-color: transparent;
- `)])]), c('&:focus:not(:active)', [cB('checkbox-box', [cE('border', `
- border: var(--u-border);
- `), c('&:before', `
- background-color: transparent;
- `)])]), c('&:active', [cB('checkbox-box', [cE('border', `
- border: var(--u-border);
- `), c('&:before', `
- background-color: transparent;
+ `, [cB('checkbox-box', [
+// c('&:before', `
+//   opacity: 0;
+// `),
+cE('ripple', `
+ animation: none;
+ `)]), cB('checkbox-label', [cE('description', `
+ color: var(--u-description-text-color-disabled);
+ `)])]), cM('checked', `
+ --u-merged-color: var(--u-color-checked);
+ --u-merged-border: var(--u-border-checked);
+ --u-merged-shadow: var(--u-box-shadow-hover-checked);
+ --u-merged-icon: var(--u-check-mark-color);
+ `, [c('&:hover', `
+ --u-merged-color: var(--u-color-hover-checked);
+ --u-merged-border: var(--u-border-hover-checked);
+ --u-merged-shadow: var(--u-box-shadow-hover-checked);
+ `), c('&:focus', `
+ --u-merged-color: var(--u-color-focus-checked);
+ --u-merged-border: var(--u-border-focus-checked);
+ --u-merged-shadow: var(--u-box-shadow-focus-checked);
+ `), c('&:active', `
+ --u-merged-color: var(--u-color-active-checked);
+ --u-merged-border: var(--u-border-active-checked);
+ --u-merged-shadow: var(--u-box-shadow-active-checked);
+ `), cM('disabled', `
+ --u-merged-color: var(--u-color-disabled-checked);
+ --u-merged-border: var(--u-border-disabled-checked);
+ --u-merged-shadow: transparent;
+ --u-merged-icon: var(--u-check-mark-color-disabled-checked);
  `)])]), cB('checkbox-box', `
- background-color: var(--u-color-disabled);
- border-left: 0;
- border-top: 0;
- `, [cE('border', {
-  border: 'var(--u-border)'
-})]), cM('checked', [cB('checkbox-box', `
- background-color: var(--u-color-disabled-checked);
- `, [cE('border', `
- border: var(--u-border-disabled-checked);
- `), c('&:hover', 'background-color: var(--u-color-disabled-checked);')])])]), cB('checkbox-box-wrapper', `
  position: relative;
- width: var(--u-size);
  flex-shrink: 0;
- flex-grow: 0;
- user-select: none;
- -webkit-user-select: none;
  order: var(--u-checkbox-position);
- `),
-// Initial styles
-cB('checkbox-box', `
- position: absolute;
- z-index: 2;
- left: 0;
- top: 50%;
- transform: translateY(-50%);
- height: var(--u-size);
- width: var(--u-size);
- display: inline-block;
- box-sizing: border-box;
- border-radius: var(--u-border-radius);
- background-color: var(--u-color);
- transition: background-color 0.3s var(--u-bezier);
+ z-index: 1;
  `, [c('&:before', `
+ transition: 
+ background-color .3s var(--u-bezier),
+ opacity .3s var(--u-bezier),
+ transform .3s var(--u-bezier);
  content: '';
- position: relative;
- display: block;
+ z-index: -1;
+ position: absolute;
  top: -50%;
  left: -50%;
- z-index: 0;
- width: calc(var(--u-size) * 2);
- height: calc(var(--u-size) * 2);
- border-radius: 50%;
- transition: background-color 0.3s var(--u-bezier);
+ width: 200%;
+ height: 200%;
+ border-radius: 100%;
+ background-color: var(--u-merged-shadow);
+ opacity: .25;
+ transform: scale(0);
+ `), cE('border', `
+ transition: 
+ border-color .3s var(--u-bezier), 
+ background-color 0.3s var(--u-bezier);
+ position: relative;
+ border-radius: var(--u-border-radius);
+ background-color: var(--u-merged-color);
+ border: var(--u-merged-border);
+ width: var(--u-size);
+ height: var(--u-size);
  `), cE('ripple', `
  position: absolute;
  display: block;
  top: -50%;
  left: -50%;
- z-index: 1;
  width: calc(var(--u-size) * 2);
  height: calc(var(--u-size) * 2);
+ background-color: var(--u-merged-shadow);
  opacity: 0;
  border-radius: 50%;
- `), cE('border', `
+ `), cE('icon', `
  transition:
- border-color .3s var(--u-bezier),
- box-shadow .3s var(--u-bezier);
- border-radius: inherit;
+ color .3s var(--u-bezier);
  position: absolute;
- z-index: 1;
- left: 0;
- right: 0;
  top: 0;
- bottom: 0;
- border: var(--u-border);
- `), cB('checkbox-icon', `
+ left: 0;
+ color: var(--u-merged-icon);
+ fill: currentColor;
  display: flex;
  align-items: center;
  justify-content: center;
- position: absolute;
- z-index: 1;
- left: 1px;
- right: 1px;
- top: 1px;
- bottom: 1px;
- `, [c('.check-icon, .line-icon', `
- position: relative;
- z-index: 99;
  width: 100%;
- fill: var(--u-check-mark-color);
- opacity: 0;
- transform: scale(0.5);
- transform-origin: center;
- transition:
- fill 0.3s var(--u-bezier),
- transform 0.3s var(--u-bezier),
- opacity 0.3s var(--u-bezier),
- border-color 0.3s var(--u-bezier);
- `), iconSwitchTransition({
-  left: '1px',
-  top: '1px'
-})])]), cE('label_box', `
- transition: color .3s var(--u-bezier);
- user-select: none;
- -webkit-user-select: none;
- padding: var(--u-label-padding);
- display: flex;
- flex-direction: column;
- `, [c('&:empty', {
-  display: 'none'
-})]), cE('label', `
- color: var(--u-text-color);
- transition: color .3s var(--u-bezier);
- user-select: none;
- -webkit-user-select: none;
- font-weight: var(--u-label-font-weight);
- line-height: var(--u-size);
- `, [c('&:empty', {
-  display: 'none'
-})]), cE('description', `
- transition: color .3s var(--u-bezier);
- user-select: none;
- -webkit-user-select: none;
- font-size: 14px;
- color: var(--u-text-description-color);;
- font-weight: var(--u-label-font-weight);
- line-height: 20px;
+ height: 100%;
+ `)]), cB('checkbox-label', `
+ padding-left: 16px;
+ padding-right: 16px;
+ font-size: var(--u-font-size);
+ line-height: var(--u-line-height);
+ font-weight: var(--u-font-weight);
+ `, [cE('description', `
+ color: var(--u-description-text-color);
+ `, [c('&:not(:empty)', `
  margin-top: 4px;
- `, [c('&:empty', {
-  display: 'none'
-})])]), c('@keyframes ripple', {
-  from: {
-    transform: 'scale(0)'
-  },
-  to: {
-    transform: 'scale(1)',
-    opacity: '1'
-  }
-}),
-// modal table header checkbox
-insideModal(cB('checkbox', `
- --u-merged-color-table: var(--u-color-table-modal);
- `)),
-// popover table header checkbox
-insidePopover(cB('checkbox', `
- --u-merged-color-table: var(--u-color-table-popover);
- `))]);
+ `)])])]);

package/es/checkbox/styles/_common.d.ts

@@ -3,8 +3,5 @@ declare const _default: {
     sizeMedium: string;
     sizeLarge: string;
     labelPadding: string;
-    labelFontWeight: string;
-    borderRadiusLarge: string;
-    borderRadiusSmall: string;
 };
 export default _default;

package/es/checkbox/styles/_common.js

@@ -1,9 +1,6 @@
 export default {
-    sizeSmall: '18px',
+    sizeSmall: '20px',
     sizeMedium: '24px',
-    sizeLarge: '24px',
-    labelPadding: '0 16px',
-    labelFontWeight: '400',
-    borderRadiusLarge: '8px',
-    borderRadiusSmall: '6px'
+    sizeLarge: '28px',
+    labelPadding: '0 16px'
 };

package/es/checkbox/styles/dark.js

@@ -3,12 +3,6 @@ import { self } from './light';
 const checkboxDark = {
     name: 'Checkbox',
     common: commonDark,
-    self(vars) {
-        const { cardColor } = vars;
-        const commonSelf = self(vars);
-        commonSelf.color = '#0000';
-        commonSelf.checkMarkColor = cardColor;
-        return commonSelf;
-    }
+    self
 };
 export default checkboxDark;

package/es/checkbox/styles/light.d.ts

@@ -1,40 +1,56 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import type { Theme } from '../../_mixins';
 export declare const self: (vars: ThemeCommonVars) => {
-    labelLineHeight: string;
-    fontSizeSmall: string;
-    fontSizeMedium: string;
+    fontWeight: string;
+    textColor: string;
+    descriptionTextColor: string;
+    textColorDisabled: string;
+    descriptionTextColorDisabled: string;
     fontSizeLarge: string;
+    fontSizeMedium: string;
+    fontSizeSmall: string;
+    lineHeightLarge: string;
+    lineHeightMedium: string;
+    lineHeightSmall: string;
+    borderRadiusLarge: string;
+    borderRadiusMedium: string;
+    borderRadiusSmall: string;
     color: string;
+    colorHover: string;
+    colorFocus: string;
+    colorActive: string;
     colorChecked: string;
+    colorHoverChecked: string;
+    colorFocusChecked: string;
+    colorActiveChecked: string;
     colorDisabled: string;
     colorDisabledChecked: string;
-    colorTableHeader: string;
-    colorTableHeaderModal: string;
-    colorTableHeaderPopover: string;
     checkMarkColor: string;
+    checkMarkColorHover: string;
+    checkMarkColorFocus: string;
+    checkMarkColorActive: string;
     checkMarkColorDisabled: string;
     checkMarkColorDisabledChecked: string;
     border: string;
-    borderDisabled: string;
-    borderDisabledChecked: string;
     borderHover: string;
-    borderChecked: string;
     borderFocus: string;
+    borderActive: string;
+    borderChecked: string;
+    borderHoverChecked: string;
+    borderFocusChecked: string;
+    borderActiveChecked: string;
+    borderDisabled: string;
+    borderDisabledChecked: string;
     boxShadowHover: string;
     boxShadowFocus: string;
     boxShadowActive: string;
     boxShadowHoverChecked: string;
     boxShadowFocusChecked: string;
     boxShadowActiveChecked: string;
-    textColor: string;
     sizeSmall: string;
     sizeMedium: string;
     sizeLarge: string;
     labelPadding: string;
-    labelFontWeight: string;
-    borderRadiusLarge: string;
-    borderRadiusSmall: string;
 };
 export type CheckboxThemeVars = ReturnType<typeof self>;
 declare const checkboxLight: Theme<'Checkbox', CheckboxThemeVars>;

package/es/checkbox/styles/light.js

@@ -1,10 +1,8 @@
 import { commonLight } from '../../_styles/common';
 import commonVariables from './_common';
 export const self = (vars) => {
-    const { baseColor, inputColorDisabled, cardColor, modalColor, popoverColor, borderColor, primaryColor, textColor2, fontSizeSmall, fontSizeMedium, fontSizeLarge, lineHeight } = vars;
-    return Object.assign(Object.assign({}, commonVariables), { labelLineHeight: lineHeight, fontSizeSmall,
-        fontSizeMedium,
-        fontSizeLarge, color: baseColor, colorChecked: primaryColor, colorDisabled: inputColorDisabled, colorDisabledChecked: '#C5C7CA', colorTableHeader: cardColor, colorTableHeaderModal: modalColor, colorTableHeaderPopover: popoverColor, checkMarkColor: baseColor, checkMarkColorDisabled: '#C5C7CA', checkMarkColorDisabledChecked: baseColor, border: `2px solid ${borderColor}`, borderDisabled: `2px solid ${borderColor}`, borderDisabledChecked: '2px solid #C5C7CA', borderHover: '2px solid #101010', borderChecked: `2px solid ${primaryColor}`, borderFocus: `2px solid ${primaryColor}`, boxShadowHover: 'rgba(197, 199, 202, .25)', boxShadowFocus: 'rgba(197, 199, 202, .36)', boxShadowActive: 'rgba(197, 199, 202, .5)', boxShadowHoverChecked: 'rgba(187, 162, 253, 0.25)', boxShadowFocusChecked: 'rgba(187, 162, 253, 0.36)', boxShadowActiveChecked: 'rgba(187, 162, 253, 0.5)', textColor: textColor2 });
+    const { lineHeightBodyLarge, fontBodyLarge, fontWeight, containerSecondary, textPrimary, containerPrimary, textQuaternary, elementsQuinary, elementsPrimary, brandPrimary500, elementsDarkQuinary, brandPrimary300, brandPrimary400, textTertiary, fontBodyMedium, lineHeightBodyMedium, fontTitleSmall, lineHeightTitleSmall, borderRadiusSmall, borderRadiusTiny } = vars;
+    return Object.assign(Object.assign({}, commonVariables), { fontWeight, textColor: textPrimary, descriptionTextColor: textTertiary, textColorDisabled: textPrimary, descriptionTextColorDisabled: textTertiary, fontSizeLarge: fontTitleSmall, fontSizeMedium: fontBodyLarge, fontSizeSmall: fontBodyMedium, lineHeightLarge: lineHeightTitleSmall, lineHeightMedium: lineHeightBodyLarge, lineHeightSmall: lineHeightBodyMedium, borderRadiusLarge: borderRadiusSmall, borderRadiusMedium: borderRadiusTiny, borderRadiusSmall: borderRadiusTiny, color: containerPrimary, colorHover: containerPrimary, colorFocus: containerPrimary, colorActive: containerPrimary, colorChecked: brandPrimary500, colorHoverChecked: brandPrimary500, colorFocusChecked: brandPrimary500, colorActiveChecked: brandPrimary500, colorDisabled: containerSecondary, colorDisabledChecked: elementsQuinary, checkMarkColor: textQuaternary, checkMarkColorHover: textQuaternary, checkMarkColorFocus: textQuaternary, checkMarkColorActive: textQuaternary, checkMarkColorDisabled: textQuaternary, checkMarkColorDisabledChecked: textQuaternary, border: `2px solid ${elementsQuinary}`, borderHover: `2px solid ${elementsPrimary}`, borderFocus: `2px solid ${elementsPrimary}`, borderActive: `2px solid ${elementsPrimary}`, borderChecked: `2px solid ${brandPrimary500}`, borderHoverChecked: `2px solid ${brandPrimary500}`, borderFocusChecked: `2px solid ${brandPrimary500}`, borderActiveChecked: `2px solid ${brandPrimary500}`, borderDisabled: `2px solid ${elementsQuinary}`, borderDisabledChecked: `2px solid ${elementsQuinary}`, boxShadowHover: elementsQuinary, boxShadowFocus: elementsQuinary, boxShadowActive: elementsDarkQuinary, boxShadowHoverChecked: brandPrimary300, boxShadowFocusChecked: brandPrimary300, boxShadowActiveChecked: brandPrimary400 });
 };
 const checkboxLight = {
     name: 'Checkbox',

package/es/code/styles/dark.js

@@ -1,26 +1,13 @@
 import { commonDark } from '../../_styles/common';
+import { self as selfLight } from './light';
+const self = (vars) => {
+    return Object.assign(Object.assign({}, selfLight(vars)), { 
+        // extracted from hljs atom-one-dark.scss
+        'mono-3': '#5c6370', 'hue-1': '#56b6c2', 'hue-2': '#61aeee', 'hue-3': '#c678dd', 'hue-4': '#98c379', 'hue-5': '#e06c75', 'hue-5-2': '#be5046', 'hue-6': '#d19a66', 'hue-6-2': '#e6c07b' });
+};
 const codeDark = {
     name: 'Code',
     common: commonDark,
-    self(vars) {
-        const { textColor2, fontSize, fontWeightStrong, textColor3 } = vars;
-        return {
-            textColor: textColor2,
-            fontSize,
-            fontWeightStrong,
-            // extracted from hljs atom-one-dark.scss
-            'mono-3': '#5c6370',
-            'hue-1': '#56b6c2',
-            'hue-2': '#61aeee',
-            'hue-3': '#c678dd',
-            'hue-4': '#98c379',
-            'hue-5': '#e06c75',
-            'hue-5-2': '#be5046',
-            'hue-6': '#d19a66',
-            'hue-6-2': '#e6c07b',
-            // line-number styles
-            lineNumberTextColor: textColor3
-        };
-    }
+    self
 };
 export default codeDark;

package/es/code/styles/light.d.ts

@@ -1,6 +1,6 @@
 import type { ThemeCommonVars } from '../../_styles/common';
 import { type Theme } from '../../_mixins/use-theme';
-declare const self: (vars: ThemeCommonVars) => {
+export declare const self: (vars: ThemeCommonVars) => {
     textColor: string;
     fontSize: string;
     fontWeightStrong: string;

package/es/code/styles/light.js

@@ -1,9 +1,9 @@
 import { commonLight } from '../../_styles/common';
-const self = (vars) => {
-    const { textColor2, fontSize, fontWeightStrong, textColor3 } = vars;
+export const self = (vars) => {
+    const { textPrimary, fontBodyMedium, fontWeightStrong, textTertiary } = vars;
     return {
-        textColor: textColor2,
-        fontSize,
+        textColor: textPrimary,
+        fontSize: fontBodyMedium,
         fontWeightStrong,
         // extracted from hljs atom-one-light.scss
         'mono-3': '#a0a1a7',
@@ -16,7 +16,7 @@ const self = (vars) => {
         'hue-6': '#986801',
         'hue-6-2': '#c18401',
         // line-number styles
-        lineNumberTextColor: textColor3
+        lineNumberTextColor: textTertiary
     };
 };
 const codeLight = {