@lumston/ds-angular 0.0.5 → 0.0.7

package/styles/components/inputs/button/button.styles.css

@@ -1,377 +0,0 @@
-/* Button Component — Pure CSS */
-
-/* === Host === */
-:host {
-    display: contents;
-}
-
-/* === Base === */
-.btn {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: var(--ls-border-radius-md);
-    border: 1px solid;
-    padding: 0.5rem 1.25rem;
-    font-size: 0.875rem;
-    line-height: 1.25rem;
-    font-weight: 600;
-    box-shadow: 0 10px 20px -10px;
-    outline: none;
-    transition: all var(--ls-transition-duration) ease;
-    cursor: pointer;
-}
-
-/* === Sizes === */
-.btn-lg {
-    padding: 0.625rem 1.75rem;
-    font-size: 1rem;
-    line-height: 1.5rem;
-}
-
-.btn-sm {
-    padding: 0.375rem 0.625rem;
-    font-size: 0.75rem;
-    line-height: 1rem;
-}
-
-/* === Disabled === */
-.btn[disabled] {
-    cursor: not-allowed;
-    opacity: 0.6;
-}
-
-/* === Contained variants === */
-.btn-primary {
-    border-color: var(--ls-color-primary);
-    background-color: var(--ls-color-primary);
-    color: var(--ls-color-white);
-    box-shadow: 0 10px 20px -10px rgb(67 97 238 / 0.6);
-}
-
-.btn-primary:hover {
-    filter: brightness(0.9);
-}
-
-.btn-secondary {
-    border-color: var(--ls-color-secondary);
-    background-color: var(--ls-color-secondary);
-    color: var(--ls-color-white);
-    box-shadow: 0 10px 20px -10px rgb(128 93 202 / 0.6);
-}
-
-.btn-secondary:hover {
-    filter: brightness(0.9);
-}
-
-.btn-success {
-    border-color: var(--ls-color-success);
-    background-color: var(--ls-color-success);
-    color: var(--ls-color-white);
-    box-shadow: 0 10px 20px -10px rgb(0 171 85 / 0.6);
-}
-
-.btn-success:hover {
-    filter: brightness(0.9);
-}
-
-.btn-error {
-    border-color: var(--ls-color-danger);
-    background-color: var(--ls-color-danger);
-    color: var(--ls-color-white);
-    box-shadow: 0 10px 20px -10px rgb(231 81 90 / 0.6);
-}
-
-.btn-error:hover {
-    filter: brightness(0.9);
-}
-
-.btn-warning {
-    border-color: var(--ls-color-warning);
-    background-color: var(--ls-color-warning);
-    color: var(--ls-color-white);
-    box-shadow: 0 10px 20px -10px rgb(226 160 63 / 0.6);
-}
-
-.btn-warning:hover {
-    filter: brightness(0.9);
-}
-
-.btn-info {
-    border-color: var(--ls-color-info);
-    background-color: var(--ls-color-info);
-    color: var(--ls-color-white);
-    box-shadow: 0 10px 20px -10px rgb(33 150 243 / 0.6);
-}
-
-.btn-info:hover {
-    filter: brightness(0.9);
-}
-
-.btn-dark {
-    border-color: var(--ls-color-dark);
-    background-color: var(--ls-color-dark);
-    color: var(--ls-color-white);
-    box-shadow: 0 10px 20px -10px rgb(59 63 92 / 0.6);
-}
-
-.btn-dark:hover {
-    filter: brightness(0.9);
-}
-
-/* === Outline variants === */
-.btn-outline-primary {
-    border-color: var(--ls-color-primary);
-    color: var(--ls-color-primary);
-    background-color: transparent;
-    box-shadow: none;
-}
-
-.btn-outline-primary:hover {
-    background-color: var(--ls-color-primary);
-    color: var(--ls-color-white);
-}
-
-.btn-outline-secondary {
-    border-color: var(--ls-color-secondary);
-    color: var(--ls-color-secondary);
-    background-color: transparent;
-    box-shadow: none;
-}
-
-.btn-outline-secondary:hover {
-    background-color: var(--ls-color-secondary);
-    color: var(--ls-color-white);
-}
-
-.btn-outline-success {
-    border-color: var(--ls-color-success);
-    color: var(--ls-color-success);
-    background-color: transparent;
-    box-shadow: none;
-}
-
-.btn-outline-success:hover {
-    background-color: var(--ls-color-success);
-    color: var(--ls-color-white);
-}
-
-.btn-outline-error {
-    border-color: var(--ls-color-danger);
-    color: var(--ls-color-danger);
-    background-color: transparent;
-    box-shadow: none;
-}
-
-.btn-outline-error:hover {
-    background-color: var(--ls-color-danger);
-    color: var(--ls-color-white);
-}
-
-.btn-outline-warning {
-    border-color: var(--ls-color-warning);
-    color: var(--ls-color-warning);
-    background-color: transparent;
-    box-shadow: none;
-}
-
-.btn-outline-warning:hover {
-    background-color: var(--ls-color-warning);
-    color: var(--ls-color-white);
-}
-
-.btn-outline-info {
-    border-color: var(--ls-color-info);
-    color: var(--ls-color-info);
-    background-color: transparent;
-    box-shadow: none;
-}
-
-.btn-outline-info:hover {
-    background-color: var(--ls-color-info);
-    color: var(--ls-color-white);
-}
-
-.btn-outline-dark {
-    border-color: var(--ls-color-dark);
-    color: var(--ls-color-dark);
-    background-color: transparent;
-    box-shadow: none;
-}
-
-.btn-outline-dark:hover {
-    background-color: var(--ls-color-dark);
-    color: var(--ls-color-white);
-}
-
-/* === Text variants === */
-.btn-text-primary {
-    border-color: transparent;
-    background-color: transparent;
-    color: var(--ls-color-primary);
-    box-shadow: none;
-}
-
-.btn-text-primary:hover {
-    background-color: rgb(67 97 238 / 0.1);
-}
-
-.btn-text-secondary {
-    border-color: transparent;
-    background-color: transparent;
-    color: var(--ls-color-secondary);
-    box-shadow: none;
-}
-
-.btn-text-secondary:hover {
-    background-color: rgb(128 93 202 / 0.1);
-}
-
-.btn-text-success {
-    border-color: transparent;
-    background-color: transparent;
-    color: var(--ls-color-success);
-    box-shadow: none;
-}
-
-.btn-text-success:hover {
-    background-color: rgb(0 171 85 / 0.1);
-}
-
-.btn-text-error {
-    border-color: transparent;
-    background-color: transparent;
-    color: var(--ls-color-danger);
-    box-shadow: none;
-}
-
-.btn-text-error:hover {
-    background-color: rgb(231 81 90 / 0.1);
-}
-
-.btn-text-warning {
-    border-color: transparent;
-    background-color: transparent;
-    color: var(--ls-color-warning);
-    box-shadow: none;
-}
-
-.btn-text-warning:hover {
-    background-color: rgb(226 160 63 / 0.1);
-}
-
-.btn-text-info {
-    border-color: transparent;
-    background-color: transparent;
-    color: var(--ls-color-info);
-    box-shadow: none;
-}
-
-.btn-text-info:hover {
-    background-color: rgb(33 150 243 / 0.1);
-}
-
-.btn-text-dark {
-    border-color: transparent;
-    background-color: transparent;
-    color: var(--ls-color-dark);
-    box-shadow: none;
-}
-
-.btn-text-dark:hover {
-    background-color: rgb(59 63 92 / 0.1);
-}
-
-/* === Gradient === */
-.btn-gradient {
-    background: linear-gradient(to right, var(--ls-gradient-start), var(--ls-gradient-end));
-    color: var(--ls-color-white);
-    border-color: transparent;
-}
-
-.btn-gradient:hover {
-    background: linear-gradient(to right, var(--ls-gradient-end), var(--ls-gradient-start));
-}
-
-/* === Modifiers === */
-.btn-full-width {
-    width: 100%;
-}
-
-.btn-rounded {
-    border-radius: var(--ls-border-radius-full);
-}
-
-/* === Internal layout classes (used by component template) === */
-.btn-spinner {
-    animation: ls-spin 1s linear infinite;
-    height: 1rem;
-    width: 1rem;
-}
-
-.btn-spinner-circle {
-    opacity: 0.25;
-}
-
-.btn-spinner-path {
-    opacity: 0.75;
-}
-
-.btn-icon {
-    flex-shrink: 0;
-    display: inline-flex;
-}
-
-.btn-icon > svg {
-    height: 100%;
-    width: 100%;
-}
-
-.btn-icon--start {
-    margin-inline-end: 0.375rem;
-}
-
-.btn-icon--end {
-    margin-inline-start: 0.375rem;
-}
-
-.btn-icon--sm {
-    height: 0.875rem;
-    width: 0.875rem;
-}
-
-.btn-icon--md {
-    height: 1rem;
-    width: 1rem;
-}
-
-.btn-icon--lg {
-    height: 1.25rem;
-    width: 1.25rem;
-}
-
-.btn-loading-overlay {
-    position: absolute;
-    inset: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.btn-loading-inline {
-    display: inline-flex;
-    align-items: center;
-}
-
-.btn-loading-inline--start {
-    margin-inline-end: 0.5rem;
-}
-
-.btn-loading-inline--end {
-    margin-inline-start: 0.5rem;
-}
-
-.btn-content--hidden {
-    visibility: hidden;
-}

package/styles/components/inputs/checkbox/checkbox.styles.css

@@ -1,157 +0,0 @@
-/* Checkbox Component — Pure CSS */
-
-:host {
-  display: inline-flex;
-}
-
-.checkbox {
-  display: inline-flex;
-  align-items: center;
-  gap: 8px;
-  cursor: pointer;
-  position: relative;
-  transition: opacity var(--ls-transition-duration);
-}
-
-.checkbox-input {
-  position: absolute;
-  opacity: 0;
-  width: 0;
-  height: 0;
-  margin: 0;
-  padding: 0;
-  pointer-events: none;
-}
-
-.checkbox-icon {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  line-height: 0;
-}
-
-.checkbox-icon svg {
-  width: 100%;
-  height: 100%;
-}
-
-.checkbox-label {
-  user-select: none;
-  cursor: pointer;
-}
-
-/* ── Sizes ── */
-
-.checkbox-sm .checkbox-icon {
-  width: 18px;
-  height: 18px;
-}
-
-.checkbox-sm .checkbox-label {
-  font-size: 0.875rem;
-}
-
-.checkbox-md .checkbox-icon {
-  width: 1.25rem;
-  height: 1.25rem;
-}
-
-.checkbox-md .checkbox-label {
-  font-size: 0.875rem;
-}
-
-/* ── Label placement ── */
-
-.checkbox-label-end {
-  flex-direction: row;
-}
-
-.checkbox-label-start {
-  flex-direction: row-reverse;
-}
-
-.checkbox-label-top {
-  flex-direction: column-reverse;
-  align-items: center;
-}
-
-.checkbox-label-bottom {
-  flex-direction: column;
-  align-items: center;
-}
-
-/* ── Colors (checked / indeterminate state) ── */
-
-.checkbox-color-inherit.checkbox-checked .checkbox-icon,
-.checkbox-color-inherit.checkbox-indeterminate .checkbox-icon {
-  color: inherit;
-}
-
-.checkbox-color-primary.checkbox-checked .checkbox-icon,
-.checkbox-color-primary.checkbox-indeterminate .checkbox-icon {
-  color: var(--ls-color-primary);
-}
-
-.checkbox-color-secondary.checkbox-checked .checkbox-icon,
-.checkbox-color-secondary.checkbox-indeterminate .checkbox-icon {
-  color: var(--ls-color-secondary);
-}
-
-.checkbox-color-success.checkbox-checked .checkbox-icon,
-.checkbox-color-success.checkbox-indeterminate .checkbox-icon {
-  color: var(--ls-color-success);
-}
-
-.checkbox-color-error.checkbox-checked .checkbox-icon,
-.checkbox-color-error.checkbox-indeterminate .checkbox-icon {
-  color: var(--ls-color-danger);
-}
-
-.checkbox-color-info.checkbox-checked .checkbox-icon,
-.checkbox-color-info.checkbox-indeterminate .checkbox-icon {
-  color: var(--ls-color-info);
-}
-
-.checkbox-color-warning.checkbox-checked .checkbox-icon,
-.checkbox-color-warning.checkbox-indeterminate .checkbox-icon {
-  color: var(--ls-color-warning);
-}
-
-/* ── Unchecked state — muted icon ── */
-
-.checkbox:not(.checkbox-checked):not(.checkbox-indeterminate)
-  .checkbox-icon {
-  color: var(--ls-color-dark);
-}
-
-/* ── Disabled ── */
-
-.checkbox-disabled {
-  cursor: not-allowed;
-  opacity: 0.5;
-}
-
-.checkbox-disabled .checkbox-label {
-  cursor: not-allowed;
-}
-
-/* ── Focus-visible ── */
-
-.checkbox-input:focus-visible + .checkbox-icon {
-  outline: 2px solid currentColor;
-  outline-offset: 2px;
-  border-radius: 2px;
-}
-
-/* ── Dark mode ── */
-
-body.dark
-  .checkbox:not(.checkbox-checked):not(.checkbox-indeterminate)
-  .checkbox-icon {
-  color: #e0e6ed;
-}
-
-body.dark .checkbox-label {
-  color: #e0e6ed;
-}

package/styles/components/inputs/icon-button/icon-button.styles.css

@@ -1,157 +0,0 @@
-/* IconButton Component — Pure CSS */
-
-/* === Host === */
-:host {
-    display: inline-flex;
-}
-
-/* === Base === */
-.icon-btn {
-    position: relative;
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid transparent;
-    border-radius: var(--ls-border-radius-full);
-    background-color: transparent;
-    padding: 0;
-    outline: none;
-    cursor: pointer;
-    transition: all var(--ls-transition-duration) ease;
-    box-shadow: none;
-}
-
-/* === Sizes (equal width & height) === */
-.icon-btn-sm {
-    width: 32px;
-    height: 32px;
-}
-
-.icon-btn-md {
-    width: 40px;
-    height: 40px;
-}
-
-.icon-btn-lg {
-    width: 48px;
-    height: 48px;
-}
-
-/* === Icon sizes (centered within button) === */
-.icon-btn-sm .icon-btn-icon,
-.icon-btn-sm .icon-btn-spinner {
-    width: 18px;
-    height: 18px;
-}
-
-.icon-btn-md .icon-btn-icon,
-.icon-btn-md .icon-btn-spinner {
-    width: 24px;
-    height: 24px;
-}
-
-.icon-btn-lg .icon-btn-icon,
-.icon-btn-lg .icon-btn-spinner {
-    width: 28px;
-    height: 28px;
-}
-
-/* === Color variants (text variant pattern from Button) === */
-.icon-btn-primary {
-    color: var(--ls-color-primary);
-}
-
-.icon-btn-primary:hover {
-    background-color: rgb(67 97 238 / 0.1);
-}
-
-.icon-btn-secondary {
-    color: var(--ls-color-secondary);
-}
-
-.icon-btn-secondary:hover {
-    background-color: rgb(128 93 202 / 0.1);
-}
-
-.icon-btn-success {
-    color: var(--ls-color-success);
-}
-
-.icon-btn-success:hover {
-    background-color: rgb(0 171 85 / 0.1);
-}
-
-.icon-btn-error {
-    color: var(--ls-color-danger);
-}
-
-.icon-btn-error:hover {
-    background-color: rgb(231 81 90 / 0.1);
-}
-
-.icon-btn-warning {
-    color: var(--ls-color-warning);
-}
-
-.icon-btn-warning:hover {
-    background-color: rgb(226 160 63 / 0.1);
-}
-
-.icon-btn-info {
-    color: var(--ls-color-info);
-}
-
-.icon-btn-info:hover {
-    background-color: rgb(33 150 243 / 0.1);
-}
-
-.icon-btn-dark {
-    color: var(--ls-color-dark);
-}
-
-.icon-btn-dark:hover {
-    background-color: rgb(59 63 92 / 0.1);
-}
-
-/* === Focus visible (keyboard navigation) === */
-.icon-btn:focus-visible {
-    outline: 2px solid currentColor;
-    outline-offset: 2px;
-}
-
-/* === Disabled === */
-.icon-btn[disabled] {
-    cursor: not-allowed;
-    opacity: 0.6;
-}
-
-.icon-btn[disabled]:hover {
-    background-color: transparent;
-}
-
-/* === Icon display === */
-.icon-btn-icon {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    flex-shrink: 0;
-}
-
-.icon-btn-icon > svg,
-.icon-btn-icon svg {
-    width: 100%;
-    height: 100%;
-}
-
-/* === Spinner === */
-.icon-btn-spinner {
-    animation: ls-spin 1s linear infinite;
-}
-
-.icon-btn-spinner-circle {
-    opacity: 0.25;
-}
-
-.icon-btn-spinner-path {
-    opacity: 0.75;
-}