@uzum-tech/ui 0.1.1 → 1.0.0

package/es/toggle-button/src/styles/toggle-button.cssr.js

@@ -0,0 +1,73 @@
+import { c, cE, cM, cB } from '../../../_utils/cssr';
+export default cB('toggle-button', `
+ transition: 
+ background-color .3s var(--u-bezier);
+ cursor: pointer;
+ user-select: none;
+ color: var(--u-color);
+ padding: var(--u-padding);
+ border-radius: var(--u-border-radius);
+ background-color: var(--u-background-color);
+ position: relative;
+ display: block;
+ width: 100%;
+ box-sizing: border-box;
+`, [cE('title', `
+ transition: 
+ color .3s var(--u-bezier);
+ color: currentColor;
+ font-size: var(--u-title-font-size);
+ font-weight: var(--u-title-font-weight);
+ line-height: var(--u-title-line-height);
+ margin-bottom: var(--u-title-margin-bottom);
+ padding-right: calc(var(--u-icon-size) + 16px);
+ `), cE('description', `
+ transition: 
+ color .3s var(--u-bezier);
+ color: currentColor;
+ font-size: var(--u-description-font-size);
+ font-weight: var(--u-description-font-weight);
+ line-height: var(--u-description-line-height);
+ margin-bottom: var(--u-description-margin-bottom);
+ padding-right: calc(var(--u-icon-size) + 16px);
+ `), cE('footer', `
+ transition: 
+ color .3s var(--u-bezier);
+ color: currentColor;
+ font-size: var(--u-footer-font-size);
+ font-weight: var(--u-footer-font-weight);
+ line-height: var(--u-footer-line-height);
+ `), cE('icon', `
+ transition: 
+ color .3s var(--u-bezier);
+ position: absolute;
+ right: 0;
+ top: 0;
+ margin: var(--u-icon-margin);
+ color: transparent;
+ `, [cB('base-icon', `
+ font-size: var(--u-icon-size);
+ `), cB('icon', `
+ font-size: var(--u-icon-size);
+ `)]), cE('input', `
+ opacity: 0;
+ pointer-events: none;
+ position: absolute;
+ `), c('> *:last-child', `
+ margin-bottom: 0px;
+ `), c('&:hover', `
+ background-color: var(--u-background-color-hover);
+ outline: none;
+ color: var(--u-color-hover);
+ `), c('&:focus', `
+ background-color: var(--u-background-color-focus);
+ outline: none;
+ color: var(--u-color-focus);
+ `), cM('disabled', `
+ cursor: not-allowed;
+ `), cM('checked', `
+ background-color: var(--u-background-color-checked);
+ color: var(--u-color-checked);
+ `, [cE('icon', `
+ color: currentColor;
+ `)])]);

package/es/toggle-button/styles/_common.d.ts

@@ -0,0 +1,7 @@
+declare const _default: {
+    padding: string;
+    titleMarginBottom: string;
+    descriptionMarginBottom: string;
+    iconMargin: string;
+};
+export default _default;

package/es/toggle-button/styles/_common.js

@@ -0,0 +1,6 @@
+export default {
+    padding: '16px',
+    titleMarginBottom: '4px',
+    descriptionMarginBottom: '20px',
+    iconMargin: '16px'
+};

package/es/toggle-button/styles/dark.d.ts

@@ -0,0 +1,3 @@
+import type { ToggleButtonTheme } from './light';
+declare const toggleButtonDark: ToggleButtonTheme;
+export default toggleButtonDark;

package/es/toggle-button/styles/dark.js

@@ -0,0 +1,8 @@
+import { commonDark } from '../../_styles/common';
+import { self } from './light';
+const toggleButtonDark = {
+    name: 'ToggleButton',
+    common: commonDark,
+    self
+};
+export default toggleButtonDark;

package/es/toggle-button/styles/index.d.ts

@@ -0,0 +1,3 @@
+export { default as toggleButtonDark } from './dark';
+export { default as toggleButtonLight } from './light';
+export type { ToggleButtonThemeVars, ToggleButtonTheme } from './light';

package/es/toggle-button/styles/index.js

@@ -0,0 +1,2 @@
+export { default as toggleButtonDark } from './dark';
+export { default as toggleButtonLight } from './light';

package/es/toggle-button/styles/light.d.ts

@@ -0,0 +1,47 @@
+import type { ThemeCommonVars } from '../../_styles/common';
+import { type Theme } from '../../_mixins';
+export declare const self: (vars: ThemeCommonVars) => {
+    borderRadius: string;
+    titleFontSize: string;
+    titleFontWeight: string;
+    titleLineHeight: string;
+    descriptionFontSize: string;
+    descriptionFontWeight: string;
+    descriptionLineHeight: string;
+    footerFontSize: string;
+    footerFontWeight: string;
+    footerLineHeight: string;
+    iconSize: string;
+    backgroundColor: string;
+    backgroundColorFocus: string;
+    backgroundColorHover: string;
+    backgroundColorChecked: string;
+    color: string;
+    colorFocus: string;
+    colorHover: string;
+    colorChecked: string;
+    backgroundColorPrimary: string;
+    backgroundColorFocusPrimary: string;
+    backgroundColorHoverPrimary: string;
+    backgroundColorCheckedPrimary: string;
+    colorPrimary: string;
+    colorFocusPrimary: string;
+    colorHoverPrimary: string;
+    colorCheckedPrimary: string;
+    backgroundColorDisabled: string;
+    backgroundColorFocusDisabled: string;
+    backgroundColorHoverDisabled: string;
+    backgroundColorCheckedDisabled: string;
+    colorDisabled: string;
+    colorFocusDisabled: string;
+    colorHoverDisabled: string;
+    colorCheckedDisabled: string;
+    padding: string;
+    titleMarginBottom: string;
+    descriptionMarginBottom: string;
+    iconMargin: string;
+};
+export type ToggleButtonThemeVars = ReturnType<typeof self>;
+declare const toggleButtonLight: Theme<'ToggleButton', ToggleButtonThemeVars>;
+export default toggleButtonLight;
+export type ToggleButtonTheme = typeof toggleButtonLight;

package/es/toggle-button/styles/light.js

@@ -0,0 +1,18 @@
+import commonVariables from './_common';
+import { commonLight } from '../../_styles/common';
+export const self = (vars) => {
+    const { borderRadiusLarge, fontBodyLarge, lineHeightBodyLarge, fontBodyMedium, fontWeight, lineHeightBodyMedium, fontTitleLarge, fontWeightStrong, lineHeightTitleLarge, iconMedium, elementsTertiary, elementsQuaternary, elementsPrimary, textPrimary, textQuaternary, textTertiary, brandPrimary100 } = vars;
+    return Object.assign(Object.assign({}, commonVariables), { borderRadius: borderRadiusLarge, titleFontSize: fontBodyLarge, titleFontWeight: fontWeightStrong, titleLineHeight: lineHeightBodyLarge, descriptionFontSize: fontBodyMedium, descriptionFontWeight: fontWeight, descriptionLineHeight: lineHeightBodyMedium, footerFontSize: fontTitleLarge, footerFontWeight: fontWeightStrong, footerLineHeight: lineHeightTitleLarge, iconSize: iconMedium, 
+        // Default
+        backgroundColor: elementsTertiary, backgroundColorFocus: elementsQuaternary, backgroundColorHover: elementsQuaternary, backgroundColorChecked: elementsPrimary, color: textPrimary, colorFocus: textPrimary, colorHover: textPrimary, colorChecked: textQuaternary, 
+        // Primary
+        backgroundColorPrimary: elementsTertiary, backgroundColorFocusPrimary: elementsQuaternary, backgroundColorHoverPrimary: elementsQuaternary, backgroundColorCheckedPrimary: brandPrimary100, colorPrimary: textPrimary, colorFocusPrimary: textPrimary, colorHoverPrimary: textPrimary, colorCheckedPrimary: textPrimary, 
+        // Disabled
+        backgroundColorDisabled: elementsTertiary, backgroundColorFocusDisabled: elementsTertiary, backgroundColorHoverDisabled: elementsTertiary, backgroundColorCheckedDisabled: elementsQuaternary, colorDisabled: textTertiary, colorFocusDisabled: textTertiary, colorHoverDisabled: textTertiary, colorCheckedDisabled: textTertiary });
+};
+const toggleButtonLight = {
+    name: 'ToggleButton',
+    common: commonLight,
+    self
+};
+export default toggleButtonLight;