@lumston/ds-angular 0.0.4 → 0.0.5

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

@@ -0,0 +1,377 @@
+/* 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

@@ -0,0 +1,157 @@
+/* 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

@@ -0,0 +1,157 @@
+/* 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;
+}