@shohojdhara/atomix 0.1.16 → 0.1.17

package/src/styles/06-components/_components.card.scss

@@ -1,152 +0,0 @@
-@use 'sass:map';
-@use '../01-settings/settings.config' as *;
-@use '../01-settings/settings.card' as *;
-@use '../01-settings/settings.border-radius' as *;
-@use '../02-tools/tools.rem' as *;
-@use '../02-tools/tools.animations' as *;
-@use '../02-tools/tools.object-fit' as *;
-@use '../02-tools/tools.size' as *;
-
-.c-card {
-  $root: &;
-  --#{$prefix}card-spacer-y: #{rem($card-spacer-y)};
-  --#{$prefix}card-spacer-x: #{rem($card-spacer-x)};
-  --#{$prefix}card-row-spacer-y: #{rem($card-row-spacer-y)};
-  --#{$prefix}card-row-spacer-x: #{rem($card-row-spacer-x)};
-  --#{$prefix}card-title-spacer-y: #{rem($card-title-spacer-y)};
-  --#{$prefix}card-action-spacer-y: #{rem($card-action-spacer-y)};
-  --#{$prefix}card-header-spacer-y: #{rem($card-header-spacer-y)};
-  --#{$prefix}card-title-color: #{$card-title-color};
-  --#{$prefix}card-title-font-size: #{$card-title-font-size};
-  --#{$prefix}card-text-color: #{$card-text-color};
-  --#{$prefix}card-text-font-size: #{$card-text-font-size};
-  --#{$prefix}card-border-color: #{$card-border-color};
-  --#{$prefix}card-border-width: #{$card-border-width};
-  --#{$prefix}card-border-radius: #{$card-border-radius};
-  --#{$prefix}card-image-border-radius: #{$card-image-border-radius};
-  --#{$prefix}card-boxshadow: #{$card-boxshadow};
-  --#{$prefix}card-height: #{$card-height};
-  --#{$prefix}card-bg: #{$card-bg};
-  --#{$prefix}card-bg-hover: #{$card-bg-hover};
-  --#{$prefix}card-icon-size: #{rem($card-icon-size)};
-  --#{$prefix}card-icon-padding: #{rem($card-icon-padding)};
-  --#{$prefix}card-icon-bg: #{$card-icon-bg};
-  --#{$prefix}card-icon-color: #{$card-icon-color};
-  --#{$prefix}card-width: #{$card-width};
-
-  width: 100%;
-  max-width: var(--#{$prefix}card-width);
-  padding: var(--#{$prefix}card-spacer-y) var(--#{$prefix}card-spacer-x);
-  border: var(--#{$prefix}card-border-width) solid
-    var(--#{$prefix}card-border-color);
-  border-radius: var(--#{$prefix}card-border-radius);
-  background-color: var(--#{$prefix}card-bg);
-  overflow: hidden;
-  @include basic-transition();
-
-  &__header {
-    margin-bottom: var(--#{$prefix}card-header-spacer-y);
-  }
-
-  &__image {
-    width: 100%;
-    max-width: 100%;
-    border-radius: var(--#{$prefix}card-image-border-radius);
-    @include object-fit(cover);
-  }
-
-  &__body {
-    position: relative;
-  }
-
-  &__title {
-    color: var(--#{$prefix}card-title-color);
-    font-size: var(--#{$prefix}card-title-font-size);
-    margin-bottom: var(--#{$prefix}card-title-spacer-y);
-  }
-
-  &__text {
-    color: var(--#{$prefix}card-text-color);
-    font-size: var(--#{$prefix}card-text-font-size);
-  }
-
-  &__actions {
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--#{$prefix}card-action-spacer-y);
-    margin-top: var(--#{$prefix}card-action-spacer-y);
-  }
-
-  &__icon {
-    display: inline-flex;
-    font-size: var(--#{$prefix}card-icon-size);
-    color: var(--#{$prefix}card-icon-color);
-    background-color: var(--#{$prefix}card-icon-bg);
-    padding: var(--#{$prefix}card-icon-padding);
-    border-radius: $border-radius-pill;
-  }
-
-  @if ($card-hover == true) {
-    &:hover {
-      background-color: var(--#{$prefix}card-bg-hover);
-    }
-  }
-
-  &:focus,
-  &.is-active {
-    --#{$prefix}card-border-color: var(--#{$prefix}brand-border-subtle);
-  }
-
-  &--row {
-    display: flex;
-    padding: var(--#{$prefix}card-row-spacer-y)
-      var(--#{$prefix}card-row-spacer-x);
-
-    #{$root} {
-      &__header {
-        margin-bottom: 0;
-      }
-
-      &__body {
-        flex: 1;
-        padding-left: var(--#{$prefix}card-row-spacer-x);
-        padding-top: 0;
-      }
-
-      &__image {
-        flex: 1;
-        @include square(100%);
-        max-width: none;
-        @include object-fit(cover);
-      }
-    }
-  }
-
-  &--flat {
-    padding: 0;
-
-    #{$root}__body {
-      padding: var(--#{$prefix}card-row-spacer-y)
-        var(--#{$prefix}card-row-spacer-x);
-    }
-
-    #{$root}__image {
-      border-radius: 0;
-    }
-
-    #{$root}__footer {
-      padding: var(--#{$prefix}card-row-spacer-y)
-        var(--#{$prefix}card-row-spacer-x);
-      padding-top: 0;
-    }
-  }
-}
-
-// Elevation effect for ElevationCard
-.is-elevated {
-  .c-card {
-    box-shadow: var(--#{$prefix}box-shadow-lg, 0 16px 48px rgba(0,0,0,0.175));
-    z-index: 1;
-    transition: box-shadow 0.2s cubic-bezier(0.4,0,0.2,1);
-  }
-}

package/src/styles/06-components/_components.checkbox-group.scss

@@ -1,18 +0,0 @@
-@use 'sass:map';
-@use '../01-settings/settings.config' as *;
-@use '../01-settings/settings.checkbox-group' as *;
-@use '../02-tools/tools.rem' as *;
-
-.c-checkbox-group {
-    --#{$prefix}checkbox-group-items-spacer-y: #{rem($checkbox-group-items-spacer-y)};
-    --#{$prefix}checkbox-group-items-spacer-x: #{rem($checkbox-group-items-spacer-x)};
-
-    display: flex;
-    flex-direction: column;
-    gap: var(--#{$prefix}checkbox-group-items-spacer-y) var(--#{$prefix}checkbox-group-items-spacer-x);
-
-    
-    &--horizontal {
-        flex-direction: row;
-    }
-}

package/src/styles/06-components/_components.checkbox.scss

@@ -1,142 +0,0 @@
-@use 'sass:map';
-@use '../01-settings/settings.config' as *;
-@use '../01-settings/settings.checkbox' as *;
-@use '../01-settings/settings.border-radius' as *;
-@use '../02-tools/tools.rem' as *;
-@use '../02-tools/tools.animations' as *;
-
-.c-checkbox {
-  $root: &;
-
-  --#{$prefix}checkbox-width: #{$checkbox-width};
-  --#{$prefix}checkbox-height: #{$checkbox-height};
-  --#{$prefix}checkbox-spacer: #{$checkbox-spacer};
-  --#{$prefix}checkbox-font-size: #{$checkbox-font-size};
-  --#{$prefix}checkbox-text-color: #{$checkbox-text-color};
-  --#{$prefix}checkbox-text-color-disabled: #{$checkbox-text-color-disabled};
-  --#{$prefix}checkbox-checked-text-color: #{$checkbox-checked-text-color};
-  --#{$prefix}checkbox-checked-text-color-disabled: #{$checkbox-checked-text-color-disabled};
-  --#{$prefix}checkbox-bg: #{$checkbox-bg};
-  --#{$prefix}checkbox-checked-bg: #{$checkbox-checked-bg};
-  --#{$prefix}checkbox-checked-bg-hover: #{$checkbox-checked-bg-hover};
-  --#{$prefix}checkbox-checked-bg-disabled: #{$checkbox-checked-bg-disabled};
-  --#{$prefix}checkbox-border-width: #{$checkbox-border-width};
-  --#{$prefix}checkbox-border-color: #{$checkbox-border-color};
-  --#{$prefix}checkbox-border-color-hover: #{$checkbox-border-color-hover};
-  --#{$prefix}checkbox-border-color-disabled: #{$checkbox-border-color-disabled};
-  --#{$prefix}checkbox-border-color-error: #{$checkbox-border-color-error};
-
-  display: flex;
-  gap: var(--#{$prefix}checkbox-spacer);
-
-  &__input {
-    position: relative;
-    appearance: none;
-    background-color: var(--#{$prefix}checkbox-bg);
-    width: var(--#{$prefix}checkbox-width);
-    height: var(--#{$prefix}checkbox-height);
-    color: currentColor;
-    border: var(--#{$prefix}checkbox-border-width) solid
-      var(--#{$prefix}checkbox-border-color);
-    border-radius: var(--#{$prefix}checkbox-border-radius);
-    overflow: hidden;
-    @include basic-transition();
-
-    &[type="radio"] {
-      border-radius: $border-radius-pill;
-    }
-
-    &::before {
-      position: absolute;
-      top: -7px;
-      left: -4px;
-      font-family: 'Lux Icon';
-      color: var(--#{$prefix}checkbox-checked-bg);
-      content: '\ef10';
-      font-size: rem(26px);
-      transform: scale(0);
-      display: block;
-      transform-origin: center;
-      transition: 120ms transform ease-in-out;
-    }
-
-    &:hover {
-      border-color: var(--#{$prefix}checkbox-border-color-hover);
-    }
-
-    &:checked {
-      border-color: var(--#{$prefix}checkbox-checked-bg);
-
-      &::before {
-        transform: scale(1);
-      }
-
-      &:hover {
-        border-color: var(--#{$prefix}checkbox-checked-bg-hover);
-
-        &::before {
-          color: var(--#{$prefix}checkbox-checked-bg-hover);
-        }
-      }
-
-      & + #{$root} {
-        color: red;
-      }
-    }
-
-    &:focus-visible {
-      outline: 2px solid var(--#{$prefix}brand-border-subtle);
-    }
-
-    &:disabled {
-      border-color: var(--#{$prefix}checkbox-border-color-disabled) !important;
-      cursor: not-allowed;
-
-      &::before {
-        color: var(--#{$prefix}checkbox-checked-text-color-disabled) !important;
-      }
-    }
-
-   
-  }
-
-  &__label {
-    font-size: var(--#{$prefix}checkbox-font-size);
-    color: var(--#{$prefix}checkbox-text-color);
-  }
-
-  &.is-disabled {
-    --#{$prefix}checkbox-text-color: var(--#{$prefix}checkbox-text-color-disabled);
-
-    #{$root} {
-      &__input {
-        border-color: var(
-          --#{$prefix}checkbox-border-color-disabled
-        ) !important;
-        cursor: not-allowed;
-
-        &::before {
-          color: var(
-            --#{$prefix}checkbox-checked-text-color-disabled
-          ) !important;
-        }
-      }
-    }
-  }
-
-  &.is-error {
-    #{$root} {
-        &__input {
-            border-color: var(--#{$prefix}checkbox-border-color-error) !important;
-        }
-    }
-  }
-
-  &--mixed {
-    #{$root} {
-        &__input::before {
-            content: '\f0d6';
-        }
-    }
-  }
-}

package/src/styles/06-components/_components.color-mode-toggle.scss

@@ -1,36 +0,0 @@
-@use '../01-settings/settings.config' as *;
-@use '../01-settings/settings.colors' as colors;
-@use '../02-tools/tools.rem' as *;
-
-.c-color-mode-toggle {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  background: transparent;
-  border: none;
-  cursor: pointer;
-  padding: rem(8px);
-  border-radius: 50%;
-  transition: background-color 0.2s ease;
-  color: var(--#{$prefix}body-color);
-  
-  &:hover {
-    background-color: rgba(0, 0, 0, 0.05);
-  }
-  
-  &:focus {
-    outline: none;
-    box-shadow: 0 0 0 2px var(--#{$prefix}primary);
-  }
-  
-  svg {
-    width: rem(24px);
-    height: rem(24px);
-  }
-  
-  [data-#{$prefix}theme="dark"] & {
-    &:hover {
-      background-color: rgba(255, 255, 255, 0.1);
-    }
-  }
-} 

package/src/styles/06-components/_components.countdown.scss

@@ -1,64 +0,0 @@
-@use 'sass:map';
-@use '../01-settings/settings.config' as *;
-@use '../01-settings/settings.countdown' as *;
-@use '../01-settings/settings.typography' as *;
-@use '../02-tools/tools.rem' as *;
-
-.c-countdown {
-    $root: &; 
-
-    --#{$prefix}countdown-color: #{$countdown-color};
-    --#{$prefix}countdown-font-size: #{$countdown-font-size};
-    --#{$prefix}countdown-font-weight: #{$countdown-font-weight};
-    --#{$prefix}countdown-focused-time-font-size: #{$countdown-focused-time-font-size};
-    --#{$prefix}countdown-focused-label-font-size: #{$countdown-focused-label-font-size};
-    --#{$prefix}countdown-focused-border-radius: #{$countdown-focused-border-radius};
-    --#{$prefix}countdown-focused-bg: #{$countdown-focused-bg};
-    --#{$prefix}countdown-item-padding-x: #{rem($countdown-item-padding-x)};
-    --#{$prefix}countdown-item-padding-y: #{rem($countdown-item-padding-y)};
-    --#{$prefix}countdown-items-gap: #{rem($countdown-items-gap)};
-    --#{$prefix}countdown-focused-items-gap: #{rem($countdown-focused-items-gap)};
-
-    display: flex;
-    align-items: center;
-    gap: var(--#{$prefix}countdown-items-gap);
-
-    &__time {
-        display: flex;
-    }
-
-    &__time-count {
-        color: var(--#{$prefix}countdown-color);
-        font-size: var(--#{$prefix}countdown-font-size);
-        font-weight: var(--#{$prefix}countdown-font-weight);
-    }
-
-    &__separator {
-        color: var(--#{$prefix}countdown-color);
-        font-size: var(--#{$prefix}countdown-font-size);
-    }
-
-    &__time-label {
-        @extend .c-countdown__time-count;
-    }
-
-    &--focused {
-        gap: var(--#{$prefix}countdown-focused-items-gap);
-
-        #{$root} {
-            &__time {
-                flex-direction: column;
-                align-items: center;
-                padding: var(--#{$prefix}countdown-item-padding-y) var(--#{$prefix}countdown-item-padding-x);
-                border-radius: var(--#{$prefix}countdown-focused-border-radius);
-                background-color: var(--#{$prefix}countdown-focused-bg);   
-            }
-
-            &__time-label {
-                font-size: var(--#{$prefix}countdown-focused-label-font-size);
-                font-weight: $font-weight-normal;
-            }
-        }
-    }
-
-}

package/src/styles/06-components/_components.data-table.scss

@@ -1,179 +0,0 @@
-@use "../01-settings/settings.config" as config;
-@use "../01-settings/settings.data-table" as data-table;
-@use "../02-tools/tools.color-functions" as *;
-@use "../02-tools/tools.to-rgb" as *;
-
-// Component: DataTable
-// Description: Styles for the DataTable component
-
-.c-data-table-container {
-  width: 100%;
-  margin-bottom: 1rem;
-}
-
-// Table wrapper (for overflow)
-.c-data-table-wrapper {
-  position: relative;
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  width: 100%;
-}
-
-// Base table
-.c-data-table {
-  --#{config.$prefix}data-table-bg: #{data-table.$data-table-bg};
-  --#{config.$prefix}data-table-color: #{data-table.$data-table-color};
-  --#{config.$prefix}data-table-border-color: #{data-table.$data-table-border-color};
-  --#{config.$prefix}data-table-header-bg: #{data-table.$data-table-header-bg};
-  --#{config.$prefix}data-table-header-color: #{data-table.$data-table-header-color};
-  --#{config.$prefix}data-table-striped-bg: #{data-table.$data-table-striped-bg};
-  --#{config.$prefix}data-table-hover-bg: #{data-table.$data-table-hover-bg};
-  
-  width: 100%;
-  margin-bottom: 0;
-  color: var(--#{config.$prefix}data-table-color);
-  background-color: var(--#{config.$prefix}data-table-bg);
-  border-collapse: collapse;
-  
-  // Header
-  &__header {
-    background-color: var(--#{config.$prefix}data-table-header-bg);
-  }
-  
-  &__header-cell {
-    padding: data-table.$data-table-cell-padding-y data-table.$data-table-cell-padding-x;
-    font-weight: data-table.$data-table-header-font-weight;
-    color: var(--#{config.$prefix}data-table-header-color);
-    border-bottom: data-table.$data-table-border-width data-table.$data-table-border-style var(--#{config.$prefix}data-table-border-color);
-    text-align: left;
-    white-space: nowrap;
-    
-    &--sortable {
-      cursor: pointer;
-      user-select: none;
-      
-      &:hover {
-        background-color: rgba(0, 0, 0, 0.05);
-      }
-    }
-  }
-  
-  &__header-content {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-  }
-  
-  &__sort-icon {
-    margin-left: 0.5rem;
-    font-size: data-table.$data-table-sort-icon-size;
-    color: data-table.$data-table-sort-icon-color;
-    
-    .c-data-table__header-cell[aria-sort] & {
-      color: data-table.$data-table-sort-icon-active-color;
-    }
-  }
-  
-  // Body cells
-  &__cell {
-    padding: data-table.$data-table-cell-padding-y data-table.$data-table-cell-padding-x;
-    border-bottom: data-table.$data-table-border-width data-table.$data-table-border-style var(--#{config.$prefix}data-table-border-color);
-    vertical-align: middle;
-  }
-  
-  // Rows
-  &__row {
-    background-color: var(--#{config.$prefix}data-table-bg);
-    
-    &:hover {
-      background-color: var(--#{config.$prefix}data-table-hover-bg);
-    }
-    
-    &[role="button"] {
-      cursor: pointer;
-    }
-  }
-  
-  // Loading state
-  &__loading-cell {
-    padding: 2rem;
-    text-align: center;
-  }
-  
-  &__loading-indicator {
-    display: inline-block;
-  }
-  
-  // Empty state
-  &__empty-cell {
-    padding: 2rem;
-    text-align: center;
-    color: var(--#{config.$prefix}gray-500);
-  }
-  
-  // Variants
-  &--striped {
-    tbody tr:nth-of-type(odd) {
-      background-color: var(--#{config.$prefix}data-table-striped-bg);
-    }
-  }
-  
-  &--bordered {
-    border: data-table.$data-table-border-width data-table.$data-table-border-style var(--#{config.$prefix}data-table-border-color);
-    border-radius: data-table.$data-table-border-radius;
-    
-    th, td {
-      border: data-table.$data-table-border-width data-table.$data-table-border-style var(--#{config.$prefix}data-table-border-color);
-    }
-  }
-  
-  &--dense {
-    th, td {
-      padding: data-table.$data-table-cell-padding-y-sm data-table.$data-table-cell-padding-x-sm;
-    }
-  }
-  
-  &--loading {
-    opacity: 0.7;
-  }
-}
-
-
-// Toolbar
-.c-data-table-toolbar {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin-bottom: 1rem;
-}
-
-// Search
-.c-data-table-search {
-  flex: 0 0 auto;
-  
-  &__input {
-    // Styles are now inherited from c-input class
-    width: 240px;
-  }
-}
-
-// Pagination container
-.c-data-table__pagination-container {
-  display: flex;
-  justify-content: center;
-  margin-top: 1rem;
-}
-
-// Override small pagination in data tables
-.c-data-table__pagination {
-  margin: 0;
-  
-  .c-pagination__items {
-    gap: 0.125rem;
-  }
-  
-  .c-pagination__link {
-    font-size: 0.75rem;
-  }
-}
-