@yoga-tech/canvas-core 1.2.0 → 1.4.0

package/lib/scss/CanvasSCSS.scss

@@ -1,4 +1,4 @@
 //Core files
-@import '../../../../node_modules/bootstrap/scss/functions';
-@import '../../../../node_modules/bootstrap/scss/bootstrap';
-@import '../../../../node_modules/bootstrap/scss/mixins.scss';
+// @import '../../../../node_modules/bootstrap/scss/functions';
+// @import '../../../../node_modules/bootstrap/scss/bootstrap';
+// @import '../../../../node_modules/bootstrap/scss/mixins.scss';

package/lib/scss/CanvasStyles.scss

@@ -1,3 +1,9 @@
 // styles
+@import '../../../../node_modules/bootstrap/scss/functions';
+@import '../../../../node_modules/bootstrap/scss/variables';
+@import 'variables/variables';
+@import '../../../../node_modules/bootstrap/scss/mixins';
+
 @import 'theme/base.scss';
 @import 'theme/layers';
+@import 'theme/buttons';

package/lib/scss/theme/_buttons.scss

@@ -0,0 +1,114 @@
+//
+// _buttons.scss
+//
+
+button,
+a {
+    outline: none !important;
+}
+
+// Rounded Buttons
+.btn-rounded {
+    border-radius: 30px;
+}
+
+// example 1
+
+.btn-group-example {
+    .btn {
+        position: relative;
+
+        &:first-child {
+            &::before {
+                display: none;
+            }
+        }
+
+        &:before {
+            content: "OR";
+            position: absolute;
+            font-size: 10px;
+            width: 24px;
+            height: 24px;
+            line-height: 24px;
+            border-radius: 50%;
+            background-color: $gray-600;
+            color: $light;
+            border: 1px solid $white;
+            left: -12px;
+            top: 50%;
+            transform: translateY(-50%);
+            z-index: 1;
+        }
+    }
+}
+
+// Example 2
+
+.btn-label {
+    position: relative;
+    padding-left: 44px;
+    .label-icon {
+        position: absolute;
+        width: 32px;
+        height: 100%;
+        left: 0;
+        top: 0;
+        background-color: rgba($white, 0.1);
+        border-right: 1px solid rgba($white, 0.1);
+        font-size: 16px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    &.btn-light {
+        .label-icon {
+            background-color: rgba($dark, 0.1);
+            border-right: 1px solid rgba($dark, 0.2);
+        }
+    }
+}
+
+
+.btn-group-vertical{
+    label {
+        margin-bottom: 0px;
+    }
+}
+
+
+//
+// Soft Buttons
+// 
+
+@mixin button-variant-soft($bg) {
+    color: $bg;
+    background-color: rgba($bg, 0.1);
+    border-color: transparent;
+    transition: all 0.5s ease;
+    &:hover,
+    &:focus,
+    &:active {
+        color: $white;
+        background-color: $bg;
+        border-color: transparent;
+    }
+}
+
+@each $color,
+$value in $theme-colors {
+    .btn-soft-#{$color} {
+        @include button-variant-soft($value);
+    }
+}
+
+.like-btn {
+    &.active {
+        .bx-heart {
+            color: $danger;
+            &:before {
+                content: "\ec8f";
+            }
+        }
+    }
+}

package/lib/scss/variables/_variables.scss

@@ -0,0 +1,210 @@
+// Prefix for :root CSS variables
+
+$variable-prefix: bs-; // Deprecated in v5.2.0 for the shorter `$prefix`
+$prefix: $variable-prefix;
+
+// scss-docs-start gray-color-variables
+$white: #fff;
+$gray-100: #f8f9fa;
+$gray-200: #eff2f7;
+$gray-300: #f6f6f6;
+$gray-400: #ced4da;
+$gray-500: #adb5bd;
+$gray-600: #74788d;
+$gray-700: #495057;
+$gray-800: #343a40;
+$gray-900: #212529;
+$black: #000;
+// scss-docs-end gray-color-variables
+
+// fusv-disable
+// scss-docs-start gray-colors-map
+$grays: (
+  '100': $gray-100,
+  '200': $gray-200,
+  '300': $gray-300,
+  '400': $gray-400,
+  '500': $gray-500,
+  '600': $gray-600,
+  '700': $gray-700,
+  '800': $gray-800,
+  '900': $gray-900,
+);
+// scss-docs-end gray-colors-map
+// fusv-enable
+
+// scss-docs-start color-variables
+$blue: #556ee6;
+$indigo: #564ab1;
+$purple: #6f42c1;
+$pink: #e83e8c;
+$red: #f46a6a;
+$orange: #f1734f;
+$yellow: #f1b44c;
+$green: #34c38f;
+$teal: #050505;
+$cyan: #50a5f1;
+// scss-docs-end color-variables
+
+// scss-docs-start colors-map
+$colors: (
+  'blue': $blue,
+  'indigo': $indigo,
+  'purple': $purple,
+  'pink': $pink,
+  'red': $red,
+  'orange': $orange,
+  'yellow': $yellow,
+  'green': $green,
+  'teal': $teal,
+  'cyan': $cyan,
+  'black': $black,
+  'white': $white,
+  'gray': $gray-600,
+  'gray-dark': $gray-800,
+);
+// scss-docs-end colors-map
+
+// scss-docs-start theme-color-variables
+$primary: $blue;
+$secondary: $gray-600;
+$success: $green;
+$info: $cyan;
+$warning: $yellow;
+$danger: $red;
+$light: $gray-200;
+$dark: $gray-800;
+// scss-docs-end theme-color-variables
+
+$theme-colors: (
+  'primary': $primary,
+  'secondary': $secondary,
+  'success': $success,
+  'info': $info,
+  'warning': $warning,
+  'danger': $danger,
+  'pink': $pink,
+  'light': $light,
+  'dark': $dark,
+);
+
+// scss-docs-start theme-colors-map
+$theme-colors-rgb: ();
+
+@each $name, $color in $theme-colors {
+  $theme-colors-rgb: map-merge(
+    $theme-colors-rgb,
+    (
+      $name: to-rgb($color),
+    )
+  );
+}
+
+$font-weight-lighter: lighter;
+$font-weight-light: 300;
+$font-weight-normal: 400;
+$font-weight-semibold: 600;
+$font-weight-bold: 600;
+$font-weight-bolder: bolder;
+
+// scss-docs-start border-variables
+$border-width: 1px;
+// scss-docs-start border-radius-variables
+$border-radius: 0.25rem;
+$border-radius-sm: 0.2rem;
+$border-radius-lg: 0.4rem;
+$border-radius-xl: 1rem;
+$border-radius-2xl: 2rem;
+$border-radius-pill: 50rem;
+
+$font-size-base: 0.8125rem;
+$font-size-sm: $font-size-base * 0.875;
+$font-size-lg: $font-size-base * 1.25;
+$line-height-base: 1.5;
+$line-height-sm: 1.25;
+$line-height-lg: 2;
+$component-active-bg: $primary;
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+// scss-docs-start input-btn-variables
+$input-btn-padding-y: 0.47rem;
+$input-btn-padding-x: 0.75rem;
+$input-btn-font-family: null;
+$input-btn-font-size: $font-size-base;
+$input-btn-line-height: $line-height-base;
+
+$input-btn-focus-width: 0.15rem;
+$input-btn-focus-color-opacity: 0.25;
+$input-btn-focus-color: rgba($component-active-bg, $input-btn-focus-color-opacity);
+$input-btn-focus-blur: 0;
+$input-btn-focus-box-shadow: 0 0 0 $input-btn-focus-width $input-btn-focus-color;
+
+$input-btn-padding-y-sm: 0.25rem;
+$input-btn-padding-x-sm: 0.5rem;
+$input-btn-font-size-sm: $font-size-sm;
+
+$input-btn-padding-y-lg: 0.5rem;
+$input-btn-padding-x-lg: 1rem;
+$input-btn-font-size-lg: $font-size-lg;
+
+$input-btn-border-width: $border-width;
+// scss-docs-end input-btn-variables
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+
+// scss-docs-start btn-variables
+$btn-padding-y: $input-btn-padding-y;
+$btn-padding-x: $input-btn-padding-x;
+$btn-font-family: $input-btn-font-family;
+$btn-font-size: $input-btn-font-size;
+$btn-line-height: $input-btn-line-height;
+$btn-white-space: null; // Set to `nowrap` to prevent text wrapping
+
+$btn-padding-y-sm: $input-btn-padding-y-sm;
+$btn-padding-x-sm: $input-btn-padding-x-sm;
+$btn-font-size-sm: $input-btn-font-size-sm;
+
+$btn-padding-y-lg: $input-btn-padding-y-lg;
+$btn-padding-x-lg: $input-btn-padding-x-lg;
+$btn-font-size-lg: $input-btn-font-size-lg;
+
+$btn-border-width: $input-btn-border-width;
+
+$btn-font-weight: $font-weight-normal;
+$btn-box-shadow:
+  inset 0 1px 0 rgba($white, 0.15),
+  0 1px 1px rgba($black, 0.075);
+$btn-focus-width: $input-btn-focus-width;
+$btn-focus-box-shadow: $input-btn-focus-box-shadow;
+$btn-disabled-opacity: 0.65;
+$btn-active-box-shadow: inset 0 3px 5px rgba($black, 0.125);
+
+$btn-link-color: var(--#{$prefix}link-color);
+$btn-link-hover-color: var(--#{$prefix}link-hover-color);
+$btn-link-disabled-color: $gray-600;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius: $border-radius;
+$btn-border-radius-sm: $border-radius-sm;
+$btn-border-radius-lg: $border-radius-lg;
+
+$btn-transition:
+  color 0.15s ease-in-out,
+  background-color 0.15s ease-in-out,
+  border-color 0.15s ease-in-out,
+  box-shadow 0.15s ease-in-out;
+
+$btn-hover-bg-shade-amount: 15%;
+$btn-hover-bg-tint-amount: 15%;
+$btn-hover-border-shade-amount: 20%;
+$btn-hover-border-tint-amount: 10%;
+$btn-active-bg-shade-amount: 20%;
+$btn-active-bg-tint-amount: 20%;
+$btn-active-border-shade-amount: 25%;
+$btn-active-border-tint-amount: 10%;
+// scss-docs-end btn-variables

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@yoga-tech/canvas-core",
-  "version": "1.2.0",
+  "version": "1.4.0",
   "author": "Thineshraj <thinesh7474@gmail.com>",
   "homepage": "",
   "license": "ISC",
@@ -35,10 +35,11 @@
     "publish:npm": "node publish.js"
   },
   "dependencies": {
-    "@yoga-tech/canvas-theme": "1.0.5",
+    "@yoga-tech/canvas-theme": "1.2.0",
     "bootstrap": "^5.3.3",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "reactstrap": "^9.2.2"
   },
   "devDependencies": {
     "@babel/cli": "^7.24.7",
@@ -82,6 +83,7 @@
     "style-loader": "^4.0.0",
     "styled-components": "^6.1.11",
     "terser-webpack-plugin": "^5.3.10",
+    "url-loader": "^4.1.1",
     "webpack": "^5.92.1",
     "webpack-bundle-analyzer": "^4.10.2",
     "webpack-cli": "^5.1.4"