procode-vs-theme 1.0.3 → 1.0.4

package/dist/src/components/_buttons.scss

@@ -0,0 +1,387 @@
+@use "sass:color";
+@use "../base/mixins/font_size-mx" as mx;
+@use "../base/font" as ft;
+@use "../base/color" as cl;
+@use "../base/border" as bo;
+
+$btn-padding-xs: 5.5px !default;
+$btn-padding-md: 8px !default;
+$btn-padding-xl: 16px !default;
+
+.qo-btn {
+  display: inline-block;
+  border-radius: bo.$border-radius-sm;
+
+  &.qo-btn-full {
+    display: block;
+    border-radius: bo.$border-radius-sm;
+    width: 100%;
+    padding: $btn-padding-xl;
+    @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
+  }
+
+  &.qo-btn-xs {
+    padding: $btn-padding-xs;
+    @include mx.font-size(ft.$font-size-xs, ft.$line-height-xs);
+  }
+
+  &.qo-btn-md {
+    padding: $btn-padding-md;
+    @include mx.font-size(ft.$font-size-md, ft.$line-height-md);
+  }
+
+  &.qo-btn-primary {
+    background-color: cl.$background-primary;
+    border: bo.$border-width-sm solid cl.$border-primary;
+    color: cl.$text-light;
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+
+    &:hover {
+      background-color: color.adjust(cl.$background-primary, $lightness: -8%);
+      border-color: color.adjust(cl.$border-primary, $lightness: -8%);
+    }
+
+    &:active {
+      background-color: color.adjust(cl.$background-primary, $lightness: -12%);
+      border-color: color.adjust(cl.$border-primary, $lightness: -12%);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: cl.$background-primary;
+        border-color: cl.$border-primary;
+      }
+    }
+  }
+
+  &.qo-btn-default {
+    background-color: cl.$background-default;
+    border: bo.$border-width-sm solid cl.$border-default;
+    color: cl.$text-dark;
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+
+    &:hover {
+      background-color: cl.$background-secondary;
+      border-color: cl.$border-secondary;
+    }
+
+    &:active {
+      background-color: color.adjust(cl.$background-secondary, $lightness: -4%);
+      border-color: cl.$border-secondary;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: cl.$background-default;
+        border-color: cl.$border-default;
+      }
+    }
+  }
+
+  &.qo-btn-danger {
+    background-color: cl.$background-danger;
+    border: bo.$border-width-sm solid cl.$border-danger;
+    color: cl.$text-danger;
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+
+    &:hover {
+      background-color: color.change(cl.$background-danger, $alpha: 0.06);
+    }
+
+    &:active {
+      background-color: color.change(cl.$background-danger, $alpha: 0.12);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+      border-color: cl.$border-default;
+      color: cl.$text-default;
+
+      &:hover {
+        background-color: cl.$background-default;
+      }
+    }
+  }
+
+  &.qo-btn-success {
+    background-color: cl.$background-success;
+    border: bo.$border-width-sm solid cl.$border-success;
+    color: cl.$text-light;
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+
+    &:hover {
+      background-color: color.adjust(cl.$background-success, $lightness: -8%);
+      border-color: color.adjust(cl.$border-success, $lightness: -8%);
+    }
+
+    &:active {
+      background-color: color.adjust(cl.$background-success, $lightness: -12%);
+      border-color: color.adjust(cl.$border-success, $lightness: -12%);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: cl.$background-success;
+        border-color: cl.$border-success;
+      }
+    }
+  }
+
+  &.qo-btn-warning {
+    background-color: cl.$background-warning;
+    border: bo.$border-width-sm solid cl.$border-warning;
+    color: cl.$text-light;
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+
+    &:hover {
+      background-color: color.adjust(cl.$background-warning, $lightness: -8%);
+      border-color: color.adjust(cl.$border-warning, $lightness: -8%);
+    }
+
+    &:active {
+      background-color: color.adjust(cl.$background-warning, $lightness: -12%);
+      border-color: color.adjust(cl.$border-warning, $lightness: -12%);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: cl.$background-warning;
+        border-color: cl.$border-warning;
+      }
+    }
+  }
+
+  &.qo-btn-info {
+    background-color: cl.$background-info;
+    border: bo.$border-width-sm solid cl.$border-info;
+    color: cl.$text-light;
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease;
+
+    &:hover {
+      background-color: color.adjust(cl.$background-info, $lightness: -8%);
+      border-color: color.adjust(cl.$border-info, $lightness: -8%);
+    }
+
+    &:active {
+      background-color: color.adjust(cl.$background-info, $lightness: -12%);
+      border-color: color.adjust(cl.$border-info, $lightness: -12%);
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: cl.$background-info;
+        border-color: cl.$border-info;
+      }
+    }
+  }
+
+  // Outline variants: transparent bg + colored border/text → hover fills color + white text
+
+  &.qo-btn-outline-primary {
+    background-color: transparent;
+    border: bo.$border-width-sm solid cl.$border-primary;
+    color: cl.$text-primary;
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+
+    &:hover {
+      background-color: cl.$background-primary;
+      border-color: cl.$border-primary;
+      color: cl.$text-light;
+    }
+
+    &:active {
+      background-color: color.adjust(cl.$background-primary, $lightness: -8%);
+      border-color: color.adjust(cl.$border-primary, $lightness: -8%);
+      color: cl.$text-light;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: transparent;
+        border-color: cl.$border-primary;
+        color: cl.$text-primary;
+      }
+    }
+  }
+
+  &.qo-btn-outline-default {
+    background-color: transparent;
+    border: bo.$border-width-sm solid cl.$border-default;
+    color: cl.$text-dark;
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+
+    &:hover {
+      background-color: cl.$background-secondary;
+      border-color: cl.$border-secondary;
+      color: cl.$text-dark;
+    }
+
+    &:active {
+      background-color: color.adjust(cl.$background-secondary, $lightness: -4%);
+      border-color: cl.$border-secondary;
+      color: cl.$text-dark;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: transparent;
+        border-color: cl.$border-default;
+        color: cl.$text-dark;
+      }
+    }
+  }
+
+  &.qo-btn-outline-danger {
+    background-color: transparent;
+    border: bo.$border-width-sm solid cl.$border-danger;
+    color: cl.$text-danger;
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+
+    &:hover {
+      background-color: cl.$background-danger;
+      border-color: cl.$border-danger;
+      color: cl.$text-light;
+    }
+
+    &:active {
+      background-color: color.adjust(cl.$background-danger, $lightness: -8%);
+      border-color: color.adjust(cl.$border-danger, $lightness: -8%);
+      color: cl.$text-light;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: transparent;
+        border-color: cl.$border-danger;
+        color: cl.$text-danger;
+      }
+    }
+  }
+
+  &.qo-btn-outline-success {
+    background-color: transparent;
+    border: bo.$border-width-sm solid cl.$border-success;
+    color: cl.$text-success;
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+
+    &:hover {
+      background-color: cl.$background-success;
+      border-color: cl.$border-success;
+      color: cl.$text-light;
+    }
+
+    &:active {
+      background-color: color.adjust(cl.$background-success, $lightness: -8%);
+      border-color: color.adjust(cl.$border-success, $lightness: -8%);
+      color: cl.$text-light;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: transparent;
+        border-color: cl.$border-success;
+        color: cl.$text-success;
+      }
+    }
+  }
+
+  &.qo-btn-outline-warning {
+    background-color: transparent;
+    border: bo.$border-width-sm solid cl.$border-warning;
+    color: cl.$text-warning;
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+
+    &:hover {
+      background-color: cl.$background-warning;
+      border-color: cl.$border-warning;
+      color: cl.$text-light;
+    }
+
+    &:active {
+      background-color: color.adjust(cl.$background-warning, $lightness: -8%);
+      border-color: color.adjust(cl.$border-warning, $lightness: -8%);
+      color: cl.$text-light;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: transparent;
+        border-color: cl.$border-warning;
+        color: cl.$text-warning;
+      }
+    }
+  }
+
+  &.qo-btn-outline-info {
+    background-color: transparent;
+    border: bo.$border-width-sm solid cl.$border-info;
+    color: cl.$text-info;
+    cursor: pointer;
+    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
+
+    &:hover {
+      background-color: cl.$background-info;
+      border-color: cl.$border-info;
+      color: cl.$text-light;
+    }
+
+    &:active {
+      background-color: color.adjust(cl.$background-info, $lightness: -8%);
+      border-color: color.adjust(cl.$border-info, $lightness: -8%);
+      color: cl.$text-light;
+    }
+
+    &:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
+
+      &:hover {
+        background-color: transparent;
+        border-color: cl.$border-info;
+        color: cl.$text-info;
+      }
+    }
+  }
+}

package/dist/src/components.ts

@@ -0,0 +1,20 @@
+// VS Theme Components Export
+// Provides access to all component styles
+
+export const buttons = './components/_buttons.scss';
+export const input = './components/_input.scss';
+export const cards = './components/_cards.scss';
+
+// All components combined
+export const allComponents = [
+  buttons,
+  input,
+  cards
+];
+
+export default {
+  buttons,
+  input,
+  cards,
+  all: allComponents
+};

package/dist/src/index.scss

@@ -1,24 +1,71 @@
-@forward "./utilities/reset";
-@forward "./utilities/typography/font";
-@forward "./utilities/typography/color";
-@forward "./utilities/background-color/index.scss";
-@forward "./utilities/border/border-color";
-@forward "./utilities/border/border-radius";
-@forward "./utilities/border/border-size";
-@forward "./utilities/spaces/gap";
-@forward "./utilities/spaces/margin";
-@forward "./utilities/spaces/padding";
-@forward "./utilities/box-shadow/index.scss";
-@forward "./utilities/size/index.scss";
-
-@forward "./base/mixins/media-query-mx";
-@forward "./base/border";
-@forward "./base/color";
-@forward "./base/font";
-@forward "./base/space";
-@forward "./base/size";
-
-@forward "./components/buttons";
-@forward "./components/input";
-
-@forward "./layout/drawer";
+// Reset
+@forward "./utilities/reset";
+
+// CSS Custom Properties
+@forward "./base/custom-properties";
+
+// Typography
+@forward "./utilities/typography/font";
+@forward "./utilities/typography/color";
+
+// Background
+@forward "./utilities/background-color/index.scss";
+
+// Border
+@forward "./utilities/border/border-color";
+@forward "./utilities/border/border-radius";
+@forward "./utilities/border/border-size";
+
+// Spacing
+@forward "./utilities/spaces/gap";
+@forward "./utilities/spaces/margin";
+@forward "./utilities/spaces/padding";
+
+// Box shadow
+@forward "./utilities/box-shadow/index.scss";
+
+// Size
+@forward "./utilities/size/index.scss";
+
+// Display
+@forward "./utilities/display";
+
+// Flex
+@forward "./utilities/flex";
+
+// Text
+@forward "./utilities/text";
+
+// Position
+@forward "./utilities/position";
+
+// Overflow
+@forward "./utilities/overflow";
+
+// Opacity
+@forward "./utilities/opacity";
+
+// Cursor
+@forward "./utilities/cursor";
+
+// Sizing (width/height)
+@forward "./utilities/sizing";
+
+// Visibility
+@forward "./utilities/visibility";
+
+// Base variables & mixins
+@forward "./base/mixins/media-query-mx";
+@forward "./base/mixins/breakpoints";
+@forward "./base/border";
+@forward "./base/color";
+@forward "./base/font";
+@forward "./base/space";
+@forward "./base/size";
+
+// Components
+@forward "./components/buttons";
+@forward "./components/input";
+
+// Layout
+@forward "./layout/drawer";

package/dist/src/index.ts

@@ -0,0 +1,52 @@
+// VS Theme - Main Entry Point
+// Provides comprehensive access to all theme components
+
+// Main theme SCSS entry point
+export const themeStylesheet = './index.scss';
+
+// Theme Variables
+export * as variables from './variables';
+export * as base from './baseExports';
+
+// Theme Components
+export * as components from './components';
+
+// Theme Layout
+export * as layout from './layout';
+
+// Theme Utilities  
+export * as utilities from './utilities';
+
+// Default export - Main theme configuration
+export default {
+  name: 'vs-theme',
+  version: '1.0.0',
+  stylesheet: './index.scss',
+  variables: './variables',
+  components: './components', 
+  layout: './layout',
+  utilities: './utilities'
+};
+
+// Type definitions for theme configuration
+export interface ThemeConfig {
+  name: string;
+  version: string;
+  stylesheet: string;
+  variables: string;
+  components: string;
+  layout: string;
+  utilities: string;
+}
+
+// Theme utility functions
+export const getThemeStylesheet = (): string => themeStylesheet;
+export const getThemeConfig = (): ThemeConfig => ({
+  name: 'vs-theme',
+  version: '1.0.0',
+  stylesheet: './index.scss',
+  variables: './variables',
+  components: './components',
+  layout: './layout', 
+  utilities: './utilities'
+});

package/dist/src/layout.ts

@@ -0,0 +1,23 @@
+// VS Theme Layout Export  
+// Provides access to all layout styles
+
+export const drawer = './layout/_drawer.scss';
+export const header = './layout/_header.scss';
+export const footer = './layout/_footer.scss';
+export const sidebar = './layout/_sidebar.scss';
+
+// All layout components combined
+export const allLayout = [
+  drawer,
+  header,
+  footer,
+  sidebar
+];
+
+export default {
+  drawer,
+  header,
+  footer,
+  sidebar,
+  all: allLayout
+};

package/dist/src/utilities/_cursor.scss

@@ -0,0 +1,7 @@
+$_cursors: auto, default, pointer, wait, text, move, not-allowed, grab, grabbing;
+
+@each $cursor in $_cursors {
+  .qo-cursor-#{$cursor} {
+    cursor: $cursor;
+  }
+}

package/dist/src/utilities/_display.scss

@@ -0,0 +1,20 @@
+@use "../base/mixins/breakpoints" as bp;
+
+$_displays: none, inline, inline-block, block, flex, inline-flex, grid, inline-grid, table, table-row, table-cell;
+
+@each $display in $_displays {
+  .qo-d-#{$display} {
+    display: $display;
+  }
+}
+
+// Responsive variants
+@each $bp-name, $bp-value in bp.$breakpoints {
+  @media (min-width: $bp-value) {
+    @each $display in $_displays {
+      .qo-d-#{$bp-name}-#{$display} {
+        display: $display;
+      }
+    }
+  }
+}

package/dist/src/utilities/_flex.scss

@@ -0,0 +1,82 @@
+@use "../base/mixins/breakpoints" as bp;
+
+// Direction
+.qo-flex-row { flex-direction: row; }
+.qo-flex-column { flex-direction: column; }
+.qo-flex-row-reverse { flex-direction: row-reverse; }
+.qo-flex-column-reverse { flex-direction: column-reverse; }
+
+// Wrap
+.qo-flex-wrap { flex-wrap: wrap; }
+.qo-flex-nowrap { flex-wrap: nowrap; }
+.qo-flex-wrap-reverse { flex-wrap: wrap-reverse; }
+
+// Justify content
+.qo-justify-content-start { justify-content: flex-start; }
+.qo-justify-content-end { justify-content: flex-end; }
+.qo-justify-content-center { justify-content: center; }
+.qo-justify-content-between { justify-content: space-between; }
+.qo-justify-content-around { justify-content: space-around; }
+.qo-justify-content-evenly { justify-content: space-evenly; }
+
+// Align items
+.qo-align-items-start { align-items: flex-start; }
+.qo-align-items-end { align-items: flex-end; }
+.qo-align-items-center { align-items: center; }
+.qo-align-items-baseline { align-items: baseline; }
+.qo-align-items-stretch { align-items: stretch; }
+
+// Align self
+.qo-align-self-start { align-self: flex-start; }
+.qo-align-self-end { align-self: flex-end; }
+.qo-align-self-center { align-self: center; }
+.qo-align-self-baseline { align-self: baseline; }
+.qo-align-self-stretch { align-self: stretch; }
+
+// Align content
+.qo-align-content-start { align-content: flex-start; }
+.qo-align-content-end { align-content: flex-end; }
+.qo-align-content-center { align-content: center; }
+.qo-align-content-between { align-content: space-between; }
+.qo-align-content-around { align-content: space-around; }
+.qo-align-content-stretch { align-content: stretch; }
+
+// Flex grow/shrink/fill
+.qo-flex-fill { flex: 1 1 auto; }
+.qo-flex-grow-0 { flex-grow: 0; }
+.qo-flex-grow-1 { flex-grow: 1; }
+.qo-flex-shrink-0 { flex-shrink: 0; }
+.qo-flex-shrink-1 { flex-shrink: 1; }
+
+// Order
+.qo-order-first { order: -1; }
+.qo-order-0 { order: 0; }
+.qo-order-1 { order: 1; }
+.qo-order-2 { order: 2; }
+.qo-order-3 { order: 3; }
+.qo-order-4 { order: 4; }
+.qo-order-5 { order: 5; }
+.qo-order-last { order: 6; }
+
+// Responsive variants
+@each $bp-name, $bp-value in bp.$breakpoints {
+  @media (min-width: $bp-value) {
+    .qo-flex-#{$bp-name}-row { flex-direction: row; }
+    .qo-flex-#{$bp-name}-column { flex-direction: column; }
+    .qo-flex-#{$bp-name}-row-reverse { flex-direction: row-reverse; }
+    .qo-flex-#{$bp-name}-column-reverse { flex-direction: column-reverse; }
+    .qo-flex-#{$bp-name}-wrap { flex-wrap: wrap; }
+    .qo-flex-#{$bp-name}-nowrap { flex-wrap: nowrap; }
+    .qo-justify-content-#{$bp-name}-start { justify-content: flex-start; }
+    .qo-justify-content-#{$bp-name}-end { justify-content: flex-end; }
+    .qo-justify-content-#{$bp-name}-center { justify-content: center; }
+    .qo-justify-content-#{$bp-name}-between { justify-content: space-between; }
+    .qo-justify-content-#{$bp-name}-around { justify-content: space-around; }
+    .qo-justify-content-#{$bp-name}-evenly { justify-content: space-evenly; }
+    .qo-align-items-#{$bp-name}-start { align-items: flex-start; }
+    .qo-align-items-#{$bp-name}-end { align-items: flex-end; }
+    .qo-align-items-#{$bp-name}-center { align-items: center; }
+    .qo-align-items-#{$bp-name}-baseline { align-items: baseline; }
+    .qo-align-items-#{$bp-name}-stretch { align-items: stretch; }
+  }
+}

package/dist/src/utilities/_opacity.scss

@@ -0,0 +1,7 @@
+$_opacities: (0: 0, 25: 0.25, 50: 0.5, 75: 0.75, 100: 1);
+
+@each $key, $value in $_opacities {
+  .qo-opacity-#{$key} {
+    opacity: $value;
+  }
+}