@steroidsjs/bootstrap 3.0.0-beta.1 → 3.0.0-beta.100

package/scss/variables/common/colors.scss

@@ -0,0 +1,269 @@
+@use "sass:map";
+
+//** Themed colors **//
+:root {
+    --primary: #651fff;
+    --primary-dark: #5218d0;
+    --primary-light: #dbcbff;
+    --secondary: #a3aee6;
+    --secondary-dark: #6b76ad;
+    --secondary-light: #d9dfff;
+    --success: #2bc945;
+    --success-dark: #2abd42;
+    --success-light: #b9ffc3;
+    --danger: #fb4e4e;
+    --danger-dark: #ec4c4c;
+    --danger-light: #ffbfbf;
+    --info: #a7efff;
+    --info-dark: #8fd8e9;
+    --info-light: #d3f7ff;
+    --warning: #ffe457;
+    --warning-dark: #ebd251;
+    --warning-light: #fff6c6;
+
+    --graphite-dark: #2b2828;
+    --graphite: #323232;
+    --mouse: #626262;
+    --gray-dark: #cbd5db;
+    --gray: #dbe2e6;
+    --light-gray: #f1f5f7;
+
+    --additional-gray-dark: #26272f;
+    --additional-light-gray: #f8f8f8;
+    --additional-light-blue: #f9fcff;
+
+    --text-color: #312c3a;
+    --link-color: #2BA3FB;
+    --link-color-hover: #00c2ff;
+
+    --background-color: #EDF0F1;
+
+    --element-placeholder-color: rgba(0, 0, 0, 0.3);
+    --element-placeholder-color-disabled: rgba(0, 0, 0, 0.1);
+    --element-border-color: #dbe2e6;
+    --element-border-color-hover: #cbd5db;
+    --element-background-color: #FFFFFF;
+    --element-background-color-disabled: #f1f5f7;
+    --element-field-background-color: #FFFFFF;
+
+    --scroll-thumb-color: #cbd5db;
+    --scroll-track-color: #f1f5f7;
+    --icon-color: #323232;
+
+    --diagram-success: var(--success-light);
+    --diagram-warning: var(--warning-light);
+    --diagram-danger: var(--danger-light);
+    --diagram-secondary: var(--secondary-light);
+    --sidebar-label-color: #312C3A;
+}
+
+html[data-theme="dark"] {
+    --primary: #9362ff;
+    --primary-dark: #8256e4;
+    --primary-light: #b898ff;
+    --secondary: #9ea8db;
+    --secondary-dark: #727eb7;
+    --secondary-light: #bcc3e9;
+    --success: #5ecc71;
+    --success-dark: #5b9966;
+    --success-light: #89e699;
+    --danger: #f76e6e;
+    --danger-dark: #e95b5b;
+    --danger-light: #ffa1a1;
+    --info: #9ae1f1;
+    --info-dark: #77c4d6;
+    --info-light: #ccf6ff;
+    --warning: #ffe457;
+    --warning-dark: #ebd251;
+    --warning-light: #fff6c8;
+
+    --graphite-dark: #16171b;
+    --graphite: #191b1f;
+    --mouse: #adacac;
+    --gray-dark: #272a37;
+    --gray: #333646;
+    --light-gray: #4b4e5e;
+
+    --additional-gray-dark: #26272f;
+    --additional-light-gray: #f8f8f8;
+    --additional-light-blue: #f9fcff;
+
+    --text-color: #ffffff;
+    --link-color: #2BA3FB;
+    --link-color-hover: #00c2ff;
+
+    --background-color: #101216;
+
+    --element-placeholder-color: rgba(255, 255, 255, 0.3);
+    --element-placeholder-color-disabled: rgba(255, 255, 255, 0.1);
+    --element-border-color: #333646;
+    --element-border-color-hover: #272a37;
+    --element-background-color: #191B1F;
+    --element-background-color-disabled: #333646;
+    --element-field-background-color: #101216;
+
+    --scroll-thumb-color: #333646;
+    --scroll-track-color: #26272f;
+    --icon-color: #FFFFFF;
+
+    --diagram-success: var(--success-dark);
+    --diagram-warning: var(--warning-dark);
+    --diagram-danger: var(--danger-dark);
+    --diagram-secondary: var(--secondary-dark);
+    --sidebar-label-color: #ffffff;
+}
+
+$primary: var(--primary);
+$primary-dark: var(--primary-dark);
+$primary-light: var(--primary-light);
+$secondary: var(--secondary);
+$secondary-dark: var(--secondary-dark);
+$secondary-light: var(--secondary-light);
+$success: var(--success);
+$success-dark: var(--success-dark);
+$success-light: var(--success-light);
+$danger: var(--danger);
+$danger-dark: var(--danger-dark);
+$danger-light: var(--danger-light);
+$info: var(--info);
+$info-dark: var(--info-dark);
+$info-light: var(--info-light);
+$warning: var(--warning);
+$warning-dark: var(--warning-dark);
+$warning-light: var(--warning-light);
+
+$graphite-dark: var(--graphite-dark);
+$graphite: var(--graphite);
+$mouse: var(--mouse);
+$gray-dark: var(--gray-dark);
+$gray: var(--gray);
+$light-gray: var(--light-gray);
+
+$additional-gray-dark: var(--additional-gray-dark);
+$additional-light-gray: var(--additional-gray);
+$additional-light-blue: var(--additional-light-blue);
+
+$text-color: var(--text-color);
+$link-color: var(--link-color);
+$link-color-hover: var(--link-color-hover);
+
+$background-color: var(--background-color);
+
+$element-placeholder-color: var(--element-placeholder-color);
+$element-placeholder-color-disabled: var(--element-placeholder-color-disabled);
+$element-border-color: var(--element-border-color);
+$element-border-color-hover: var(--element-border-color-hover);
+$element-background-color: var(--element-background-color);
+$element-background-color-disabled: var(--element-background-color-disabled);
+$element-field-background-color: var(--element-field-background-color);
+
+
+$scroll-thumb-color: var(--scroll-thumb-color);
+$scroll-track-color: var(--scroll-track-color);
+$icon-color: var(--icon-color);
+
+
+$diagram-success: var(--diagram-success);
+$diagram-warning: var(--diagram-warning);
+$diagram-danger: var(--diagram-danger);
+$diagram-secondary: var(--diagram-secondary);
+$sidebar-label-color: var(--sidebar-label-color);
+//** Themed colors **//
+
+//! Base colors !//
+$black: rgba(#000, 1) !default;
+$black-60: rgba(#000, 0.6) !default;
+$black-30: rgba(#000, 0.3) !default;
+$black-10: rgba(#000, 0.1) !default;
+$black-4: rgba(#000, 0.04) !default;
+$white: #fff !default;
+$white-60: rgba(#ffffff, 0.6) !default;
+$white-30: rgba(#ffffff, 0.3) !default;
+$white-10: rgba(#ffffff, 0.1) !default;
+$white-4: rgba(#ffffff, 0.04) !default;
+$gradient-blue: linear-gradient(180deg, #651fff, #ba9bff);
+$static-text-color: #312C3A !default;
+//! Base colors !//
+
+$color-themes: () !default;
+$color-themes: map.merge(
+    (
+        "basic": (
+            "color": $gray,
+            "color-dark": $gray-dark,
+            "color-light": $light-gray,
+            "text-color": $text-color,
+        ),
+        "primary": (
+            "color": $primary,
+            "color-dark": $primary-dark,
+            "color-light": $primary-light,
+            "text-color": $white,
+        ),
+        "secondary": (
+            "color": $secondary,
+            "color-dark": $secondary-dark,
+            "color-light": $secondary-light,
+            "text-color": $white,
+        ),
+        "success": (
+            "color": $success,
+            "color-dark": $success-dark,
+            "color-light": $success-light,
+            "text-color": $white,
+        ),
+        "danger": (
+            "color": $danger,
+            "color-dark": $danger-dark,
+            "color-light": $danger-light,
+            "text-color": $white,
+        ),
+        "error": (
+            "color": $danger,
+            "color-dark": $danger-dark,
+            "color-light": $danger-light,
+            "text-color": $white,
+        ),
+        "warning": (
+            "color": $warning,
+            "color-dark": $warning-dark,
+            "color-light": $warning-light,
+            "text-color": $text-color,
+        ),
+        "info": (
+            "color": $info,
+            "color-dark": $info-dark,
+            "color-light": $info-light,
+            "text-color": $text-color,
+        ),
+        "link": (
+            "color-dark": $link-color,
+            "color-light": $link-color-hover,
+        ),
+    ),
+    $color-themes
+);
+
+
+$diagram-colors: () !default;
+$diagram-colors: map.merge(
+    (
+        "success": (
+            "color": $success,
+            "color-themed": $diagram-success,
+        ),
+        "warning": (
+            "color": $warning,
+            "color-themed": $diagram-warning,
+        ),
+        "danger": (
+            "color": $danger,
+            "color-themed": $diagram-danger,
+        ),
+        "secondary": (
+            "color": $secondary,
+            "color-themed": $diagram-secondary,
+        ),
+    ),
+    $diagram-colors
+);

package/scss/variables/common/media.scss

@@ -0,0 +1,3 @@
+$mobile-width: 540px !default;
+$tablet-width: 960px !default;
+$desktop-width: 1920px !default;

package/scss/variables/common/old-variables.scss

@@ -0,0 +1,24 @@
+$grey-light: #D9D9D9;
+$grey-lighter: #F8F8F8;
+$grey: #F8F9FA;
+$grey-dark: #2D2D2D;
+$grey-darker: #78848E;
+$grey-disabled: #F1F1F1;
+
+$additional: #0596FF;
+
+$border-default: #CCCCCC;
+$border-hover: #B0B0B0;
+$border-action: #39BBD8;
+$border-typing: #A7EFFF;
+$back-disabled: #EBEBEB;
+$back-success: #F1FFEC;
+$border-success: #64D03E;
+$back-error: #FCE7E7;
+$border-error: #FF4557;
+$back-info: #ECFCFF;
+$back-warning: #FFFCEA;
+
+$shadow-default: 0px 0px 30px rgba(0, 0, 0, 0.1);
+
+$heading: #152536 !default;

package/scss/variables/common/radiuses.scss

@@ -0,0 +1,5 @@
+$radius-circle: 50%;
+$radius-xlarge: 160px;
+$radius-large: 12px;
+$radius-medium: 10px;
+$radius-small: 8px;

package/scss/variables/common/spacing.scss

@@ -0,0 +1,12 @@
+$spacing-240: 240px;
+$spacing-160: 160px;
+$spacing-124: 124px;
+$spacing-80: 80px;
+$spacing-64: 64px;
+$spacing-40: 40px;
+$spacing-32: 32px;
+$spacing-24: 24px;
+$spacing-16: 16px;
+$spacing-8: 8px;
+$spacing-4: 4px;
+$spacing-2: 2px;

package/scss/variables/common/typography.scss

@@ -0,0 +1,110 @@
+@use "sass:map";
+@use "colors";
+
+/*
+*  Common font variables
+*/
+
+$font-family-nunito: "Nunito", sans-serif;
+
+$font-size-xs: 12px !default;
+$font-size-sm: 14px !default;
+$font-size-base: 16px !default;
+$font-size-lg: 18px !default;
+$font-size-xl: 24px !default;
+$font-size-2xl: 32px !default;
+
+$line-height-xs: 16px !default;
+$line-height-sm: 18px !default;
+$line-height-base: 22px !default;
+$line-height-lg: 24px !default;
+$line-height-xl: 32px !default;
+$line-height-2xl: 44px !default;
+
+$font-weight-sm: 400 !default;
+$font-weight-md: 500 !default;
+$font-weight-lg: 700 !default;
+
+$title-types: () !default;
+$title-types: map.merge(
+    (
+        "h1": (
+            "font-size": $font-size-2xl,
+            "font-weight": $font-weight-lg,
+            "line-height": $line-height-2xl,
+            "color": colors.$text-color,
+        ),
+        "h2": (
+            "font-size": $font-size-xl,
+            "font-weight": $font-weight-lg,
+            "line-height": $line-height-xl,
+            "color": colors.$text-color,
+        ),
+        "h3": (
+            "font-size": $font-size-lg,
+            "font-weight": $font-weight-lg,
+            "line-height": $line-height-lg,
+            "color": colors.$text-color,
+        ),
+        "h4": (
+            "font-size": $font-size-base,
+            "font-weight": $font-weight-lg,
+            "line-height": $line-height-base,
+            "color": colors.$text-color,
+        ),
+        "h5": (
+            "font-size": $font-size-sm,
+            "font-weight": $font-weight-md,
+            "line-height": $line-height-sm,
+            "color": colors.$text-color,
+        ),
+        "h6": (
+            "font-size": $font-size-xs,
+            "font-weight": $font-weight-md,
+            "line-height": $line-height-xs,
+            "color": colors.$text-color,
+        ),
+        "subtitle": (
+            "font-size": $font-size-2xl,
+            "font-weight": $font-weight-md,
+            "line-height": $line-height-2xl,
+            "color": colors.$text-color,
+        ),
+    ),
+    $title-types
+);
+
+$text-types: () !default;
+$text-types: map.merge(
+    (
+        "body": (
+            "font-size": $font-size-base,
+            "font-weight": $font-weight-sm,
+            "line-height": $line-height-base,
+            "color": colors.$text-color,
+        ),
+        "span": (
+            "font-size": $font-size-base,
+            "font-weight": $font-weight-sm,
+            "line-height": $line-height-base,
+            "color": colors.$text-color,
+        ),
+        "boldSpan": (
+            "font-size": $font-size-base,
+            "font-weight": $font-weight-lg,
+            "line-height": $line-height-base,
+            "color": colors.$text-color,
+        ),
+    ),
+    $text-types
+);
+
+$typography-colors: (
+    "text-color": colors.$text-color,
+    "primary": colors.$primary,
+    "secondary": colors.$secondary,
+    "success": colors.$success,
+    "danger": colors.$danger,
+    "warning": colors.$warning,
+    "info": colors.$info,
+) !default;

package/scss/variables/common/variables.scss

@@ -0,0 +1 @@
+$transition-duration: .15s;

package/scss/variables/components/calendar.scss

@@ -1,9 +1,11 @@
-$calendar-primary-color: $primary !default;
-$calendar-primary-light-color: $primary-light !default;
-$calendar-secondary-color: $border-default !default;
-$calendar-secondary-light-color: $light !default;
-$calendar-text-color: $heading !default;
-$calendar-selected-text-color: $white !default;
+@use "../common/colors";
+@use "../common/old-variables";
+
+$calendar-primary-color: colors.$primary !default;
+$calendar-primary-light-color: colors.$primary-light !default;
+$calendar-secondary-color: old-variables.$border-default !default;
+$calendar-text-color: old-variables.$heading !default;
+$calendar-selected-text-color: colors.$white !default;
 
 $calendar-font-weight: 500 !default;
 
@@ -12,4 +14,4 @@ $calendar-day-border-radius: 10px !default;
 $calendar-shadow-shape: 0 0 0 3px !default;
 $calendar-selected-shadow: $calendar-shadow-shape $calendar-primary-light-color !default;
 $calendar-today-shadow: $calendar-shadow-shape $calendar-primary-light-color !default;
-$calendar-hover-shadow: $calendar-shadow-shape $calendar-secondary-color !default;
+$calendar-hover-shadow: $calendar-shadow-shape $calendar-secondary-color !default;

package/scss/variables/components/icon.scss

@@ -1,3 +1,3 @@
 $icon-size: 16px !default;
 $icon-size-sm: 12px !default;
-$icon-size-lg: 32px !default;
+$icon-size-lg: 32px !default;

package/scss/variables/components/input.scss

@@ -1,8 +1,66 @@
-$input-height-sm: 28px !default;
-$input-height-md: 36px !default;
-$input-height-lg: 46px !default;
+@use "../common/old-variables";
 
-$input-border: 1px solid $border-default !default;
+$input-height-sm: 34px;
+$input-height-md: 46px;
+$input-height-lg: 56px;
+
+
+//remove after ready all inputs
+//Small
+$input-label-margin-bottom-sm: 4px;
+
+$input-padding-x-sm: 12px;
+$input-padding-y-sm: 5px;
+
+$input-margin-bottom-sm: 20px;
+$input-outline-width-sm: 4px;
+$input-border-width-sm: 1px;
+
+$input-icon-margin-right-sm: 12px;
+$input-icon-close-margin-left-sm: 12px;
+$input-icon-size-sm: 24px;
+
+$input-message-margin-top-sm: 4px;
+$input-message-icon-size-sm: 16px;
+$input-message-icon-margin-right-sm: 4px;
+
+//Medium 
+$input-label-margin-bottom-md: $input-label-margin-bottom-sm;
+
+$input-padding-x-md: $input-padding-x-sm;
+$input-padding-y-md: 11px;
+
+$input-margin-bottom-md: $input-margin-bottom-sm;
+$input-outline-width-md: $input-outline-width-sm;
+$input-border-width-md: $input-border-width-sm;
+
+$input-icon-margin-right-md: $input-icon-margin-right-sm;
+$input-icon-close-margin-left-md: $input-icon-close-margin-left-sm;
+$input-icon-size-md: $input-icon-size-sm;
+
+$input-message-margin-top-md: $input-message-margin-top-sm;
+$input-message-icon-size-md: $input-message-icon-size-sm;
+$input-message-icon-margin-right-md: $input-message-icon-margin-right-sm;
+
+//Large
+$input-label-margin-bottom-lg: $input-label-margin-bottom-sm;
+
+$input-padding-x-lg: $input-padding-x-sm;
+$input-padding-y-lg: 16px;
+
+$input-margin-bottom-lg: $input-margin-bottom-sm;
+$input-outline-width-lg: $input-outline-width-sm;
+$input-border-width-lg: $input-border-width-sm;
+
+$input-icon-margin-right-lg: $input-icon-margin-right-sm;
+$input-icon-close-margin-left-lg: $input-icon-close-margin-left-sm;
+$input-icon-size-lg: $input-icon-size-sm;
+
+$input-message-margin-top-lg: $input-message-margin-top-sm;
+$input-message-icon-size-lg: $input-message-icon-size-sm;
+$input-message-icon-margin-right-lg: $input-message-icon-margin-right-sm;
+
+$input-border: 1px solid old-variables.$border-default !default;
 $input-border-radius: 4px !default;
 
 $input-padding-y: 0 !default;

package/scss/variables/components/ratefield.scss

@@ -1,2 +1,4 @@
+@use "../common/colors";
+
 $icon-size: 20px !default;
-$icon-color: $primary !default;
+$icon-color: colors.$primary !default;

package/scss/variables/index.scss

@@ -1,9 +1,11 @@
-@import 'colors';
-@import 'components/alert';
-@import 'components/avatar';
-@import 'components/button';
-@import 'components/calendar';
-@import 'components/card';
-@import 'components/icon';
-@import 'components/input';
-@import 'components/ratefield';
+@forward 'common/colors';
+@forward 'common/media';
+@forward 'common/typography';
+@forward 'common/radiuses';
+@forward 'common/old-variables';
+@forward 'common/variables';
+
+@forward 'components/button';
+@forward 'components/calendar';
+@forward 'components/icon';
+@forward 'components/input';

package/typography/Text/TextView.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ITextViewProps } from '@steroidsjs/core/ui/typography/Text/Text';
+export default function TextView(props: ITextViewProps): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

package/typography/Text/TextView.js

@@ -0,0 +1,46 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var TYPE_MAPPING = {
+    body: 'p',
+    span: 'span',
+    boldSpan: 'span'
+};
+function TextView(props) {
+    var bem = (0, hooks_1.useBem)('TextView');
+    var tag = props.tag || TYPE_MAPPING[props.type || ''] || 'p';
+    return (React.createElement(tag, {
+        className: bem(bem.block({
+            type: props.type,
+            color: props.color
+        }), props.className),
+        style: props.style
+    }, React.createElement(React.Fragment, null,
+        props.content,
+        props.children)));
+}
+exports["default"] = TextView;

package/typography/Text/TextView.scss

@@ -0,0 +1,19 @@
+@use "../../scss/variables";
+@use '../../scss/mixins';
+
+.TextView {
+  margin-bottom: 1em;
+  font-family: variables.$font-family-nunito;
+
+  @each $typeName, $typeMap in variables.$text-types {
+    &_type_#{$typeName} {
+        @include mixins.typography-type($typeMap);
+    }
+  }
+
+  @each $colorName, $color in variables.$typography-colors {
+    &_color_#{$colorName} {
+      color: $color;
+    }
+  }
+}

package/typography/Title/TitleView.d.ts

@@ -0,0 +1,3 @@
+import * as React from 'react';
+import { ITitleViewProps } from '@steroidsjs/core/ui/typography/Title/Title';
+export default function TitleView(props: ITitleViewProps): React.DetailedReactHTMLElement<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;

package/typography/Title/TitleView.js

@@ -0,0 +1,50 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+exports.__esModule = true;
+var React = __importStar(require("react"));
+var hooks_1 = require("@steroidsjs/core/hooks");
+var TYPE_MAPPING = {
+    h1: 'h1',
+    h2: 'h2',
+    h3: 'h3',
+    h4: 'h4',
+    h5: 'h5',
+    h6: 'h6',
+    subtitle: 'h6'
+};
+function TitleView(props) {
+    var bem = (0, hooks_1.useBem)('TitleView');
+    var tag = props.tag || TYPE_MAPPING[props.type || ''] || 'h2';
+    return (React.createElement(tag, {
+        className: bem(bem.block({
+            type: props.type,
+            color: props.color
+        }), props.className),
+        style: props.style
+    }, React.createElement(React.Fragment, null,
+        props.content,
+        props.children)));
+}
+exports["default"] = TitleView;