@lumston/ds-angular 0.0.6 → 0.0.8

package/styles/typography/tag/tag.styles.css

@@ -1,274 +0,0 @@
-/* Tag Component — Pure CSS */
-
-/* === Host === */
-:host {
-    display: contents;
-}
-
-/* === Base === */
-.tag {
-    display: inline-flex;
-    align-items: center;
-    justify-content: center;
-    gap: 6px;
-    font-size: 0.75rem;
-    font-weight: 600;
-    line-height: 1;
-    height: 24px;
-    padding: 0 8px;
-    border-radius: 6px;
-    white-space: nowrap;
-    cursor: default;
-    user-select: none;
-    transition: all 150ms ease-in-out;
-}
-
-/* === Icon === */
-.tag-icon {
-    display: inline-flex;
-    align-items: center;
-    flex-shrink: 0;
-    width: 16px;
-    height: 16px;
-}
-
-.tag-icon svg {
-    width: 100%;
-    height: 100%;
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Filled Variant
-   ══════════════════════════════════════════════════════════════════════ */
-
-.tag-filled-primary {
-    border: none;
-    color: #ffffff;
-    background-color: var(--ls-color-primary);
-}
-
-.tag-filled-secondary {
-    border: none;
-    color: #ffffff;
-    background-color: var(--ls-color-secondary);
-}
-
-.tag-filled-success {
-    border: none;
-    color: #ffffff;
-    background-color: var(--ls-color-success);
-}
-
-.tag-filled-error {
-    border: none;
-    color: #ffffff;
-    background-color: var(--ls-color-error);
-}
-
-.tag-filled-info {
-    border: none;
-    color: #ffffff;
-    background-color: var(--ls-color-info);
-}
-
-.tag-filled-warning {
-    border: none;
-    color: #ffffff;
-    background-color: var(--ls-color-warning);
-}
-
-.tag-filled-inherit {
-    border: none;
-    color: #ffffff;
-    background-color: var(--ls-color-dark);
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Outlined Variant
-   ══════════════════════════════════════════════════════════════════════ */
-
-.tag-outlined-primary {
-    background-color: transparent;
-    border: 1px solid var(--ls-color-primary);
-    color: var(--ls-color-primary);
-}
-
-.tag-outlined-secondary {
-    background-color: transparent;
-    border: 1px solid var(--ls-color-secondary);
-    color: var(--ls-color-secondary);
-}
-
-.tag-outlined-success {
-    background-color: transparent;
-    border: 1px solid var(--ls-color-success);
-    color: var(--ls-color-success);
-}
-
-.tag-outlined-error {
-    background-color: transparent;
-    border: 1px solid var(--ls-color-error);
-    color: var(--ls-color-error);
-}
-
-.tag-outlined-info {
-    background-color: transparent;
-    border: 1px solid var(--ls-color-info);
-    color: var(--ls-color-info);
-}
-
-.tag-outlined-warning {
-    background-color: transparent;
-    border: 1px solid var(--ls-color-warning);
-    color: var(--ls-color-warning);
-}
-
-.tag-outlined-inherit {
-    background-color: transparent;
-    border: 1px solid var(--ls-color-dark);
-    color: var(--ls-color-dark);
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Soft Variant
-   ══════════════════════════════════════════════════════════════════════ */
-
-.tag-soft-primary {
-    border: none;
-    color: var(--ls-color-primary);
-    background-color: var(--ls-color-primary-dark-light);
-}
-
-.tag-soft-secondary {
-    border: none;
-    color: var(--ls-color-secondary);
-    background-color: var(--ls-color-secondary-dark-light);
-}
-
-.tag-soft-success {
-    border: none;
-    color: var(--ls-color-success);
-    background-color: var(--ls-color-success-dark-light);
-}
-
-.tag-soft-error {
-    border: none;
-    color: var(--ls-color-error);
-    background-color: var(--ls-color-error-dark-light);
-}
-
-.tag-soft-info {
-    border: none;
-    color: var(--ls-color-info);
-    background-color: var(--ls-color-info-dark-light);
-}
-
-.tag-soft-warning {
-    border: none;
-    color: var(--ls-color-warning);
-    background-color: var(--ls-color-warning-dark-light);
-}
-
-.tag-soft-inherit {
-    border: none;
-    color: var(--ls-color-dark);
-    background-color: var(--ls-color-dark-dark-light);
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Inverted Variant
-   ══════════════════════════════════════════════════════════════════════ */
-
-.tag-inverted-primary {
-    border: none;
-    background-color: #ffffff;
-    color: var(--ls-color-primary);
-}
-
-.tag-inverted-secondary {
-    border: none;
-    background-color: #ffffff;
-    color: var(--ls-color-secondary);
-}
-
-.tag-inverted-success {
-    border: none;
-    background-color: #ffffff;
-    color: var(--ls-color-success);
-}
-
-.tag-inverted-error {
-    border: none;
-    background-color: #ffffff;
-    color: var(--ls-color-error);
-}
-
-.tag-inverted-info {
-    border: none;
-    background-color: #ffffff;
-    color: var(--ls-color-info);
-}
-
-.tag-inverted-warning {
-    border: none;
-    background-color: #ffffff;
-    color: var(--ls-color-warning);
-}
-
-.tag-inverted-inherit {
-    border: none;
-    background-color: #ffffff;
-    color: var(--ls-color-dark);
-}
-
-/* ══════════════════════════════════════════════════════════════════════
-   Dark Mode
-   ══════════════════════════════════════════════════════════════════════ */
-
-/* Filled — inherit adapts to dark text */
-body.dark .tag-filled-inherit {
-    color: var(--ls-color-dark);
-    background-color: #e0e6ed;
-}
-
-/* Outlined — inherit adapts border + text */
-body.dark .tag-outlined-inherit {
-    border-color: #e0e6ed;
-    color: #e0e6ed;
-}
-
-/* Soft — inherit adapts text + background */
-body.dark .tag-soft-inherit {
-    color: #e0e6ed;
-    background-color: rgba(224, 230, 237, 0.15);
-}
-
-/* Inverted — swap to dark surface */
-body.dark .tag-inverted-primary {
-    background-color: var(--ls-color-dark);
-}
-
-body.dark .tag-inverted-secondary {
-    background-color: var(--ls-color-dark);
-}
-
-body.dark .tag-inverted-success {
-    background-color: var(--ls-color-dark);
-}
-
-body.dark .tag-inverted-error {
-    background-color: var(--ls-color-dark);
-}
-
-body.dark .tag-inverted-info {
-    background-color: var(--ls-color-dark);
-}
-
-body.dark .tag-inverted-warning {
-    background-color: var(--ls-color-dark);
-}
-
-body.dark .tag-inverted-inherit {
-    color: #e0e6ed;
-    background-color: var(--ls-color-dark);
-}

package/styles/typography/text/text.styles.css

@@ -1,176 +0,0 @@
-/* Text Component — Pure CSS */
-
-.text {
-    margin-bottom: 0.5rem;
-    margin-top: 0;
-}
-
-/* ── Heading variants ── */
-
-.text-h1 {
-    font-size: 40px;
-    font-weight: 600;
-    line-height: 1;
-}
-
-.text-h2 {
-    font-size: 32px;
-    font-weight: 600;
-    line-height: 1;
-}
-
-.text-h3 {
-    font-size: 28px;
-    font-weight: 600;
-    line-height: 1;
-}
-
-.text-h4 {
-    font-size: 24px;
-    font-weight: 600;
-    line-height: 1;
-}
-
-.text-h5 {
-    font-size: 20px;
-    font-weight: 600;
-    line-height: 1;
-}
-
-.text-h6 {
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 1;
-}
-
-/* ── Body variants ── */
-
-.text-body1 {
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.5;
-    letter-spacing: 0.00938em;
-}
-
-.text-body2 {
-    font-size: 0.875rem;
-    font-weight: 400;
-    line-height: 1.43;
-    letter-spacing: 0.01071em;
-}
-
-/* ── Subtitle variants ── */
-
-.text-subtitle1 {
-    font-size: 1rem;
-    font-weight: 400;
-    line-height: 1.75;
-    letter-spacing: 0.00938em;
-}
-
-.text-subtitle2 {
-    font-size: 0.875rem;
-    font-weight: 500;
-    line-height: 1.57;
-    letter-spacing: 0.00714em;
-}
-
-/* ── Utility variants ── */
-
-.text-caption {
-    font-size: 0.75rem;
-    font-weight: 400;
-    line-height: 1.66;
-    letter-spacing: 0.03333em;
-}
-
-.text-overline {
-    font-size: 0.75rem;
-    font-weight: 400;
-    line-height: 2.66;
-    letter-spacing: 0.08333em;
-    text-transform: uppercase;
-}
-
-.text-button {
-    font-size: 0.875rem;
-    font-weight: 500;
-    line-height: 1.75;
-    letter-spacing: 0.02857em;
-    text-transform: uppercase;
-}
-
-/* ── Inherit variant ── */
-
-.text-inherit {
-    font-size: inherit;
-    font-weight: inherit;
-    line-height: inherit;
-    letter-spacing: inherit;
-}
-
-/* ── Text colors using design tokens ── */
-
-.text-color-default {
-    color: var(--ls-color-dark);
-}
-
-.text-color-primary {
-    color: var(--ls-color-primary);
-}
-
-.text-color-secondary {
-    color: var(--ls-color-secondary);
-}
-
-.text-color-success {
-    color: var(--ls-color-success);
-}
-
-.text-color-error {
-    color: var(--ls-color-danger);
-}
-
-.text-color-warning {
-    color: var(--ls-color-warning);
-}
-
-.text-color-info {
-    color: var(--ls-color-info);
-}
-
-.text-color-dark {
-    color: var(--ls-color-dark);
-}
-
-/* ── Text alignment ── */
-
-.text-align-left {
-    text-align: left;
-}
-
-.text-align-center {
-    text-align: center;
-}
-
-.text-align-right {
-    text-align: right;
-}
-
-.text-align-justify {
-    text-align: justify;
-}
-
-.text-align-inherit {
-    text-align: inherit;
-}
-
-/* ── Dark mode ── */
-
-body.dark .text-color-default {
-    color: #e0e6ed;
-}
-
-body.dark .text-color-dark {
-    color: #e0e6ed;
-}