/* ============================================================ Design System — Utilities (UIkit-inspired, density-aware) Spacing utilities read --ds-space-* (density-aware), so margins, paddings and gaps rescale with . Naming: ds- prefix. Numeric spacing scale 0..8 maps to the density-aware unit. Fractional widths like UIkit (ds-w-1-2). Bağımlılık: tokens/base.css ============================================================ */ /* ── Display ────────────────────────────────────────────────── */ .ds-block{display:block} .ds-inline-block{display:inline-block} .ds-inline{display:inline} .ds-hidden{display:none} .ds-flex{display:flex} .ds-inline-flex{display:inline-flex} .ds-grid{display:grid} /* ── Flex ───────────────────────────────────────────────────── */ .ds-flex-row{flex-direction:row} .ds-flex-col{flex-direction:column} .ds-flex-wrap{flex-wrap:wrap} .ds-flex-nowrap{flex-wrap:nowrap} .ds-flex-1{flex:1 1 0%} .ds-flex-auto{flex:1 1 auto} .ds-flex-none{flex:none} .ds-shrink-0{flex-shrink:0} .ds-grow{flex-grow:1} /* ── Align / Justify ────────────────────────────────────────── */ .ds-items-start{align-items:flex-start} .ds-items-center{align-items:center} .ds-items-end{align-items:flex-end} .ds-items-stretch{align-items:stretch} .ds-items-baseline{align-items:baseline} .ds-justify-start{justify-content:flex-start} .ds-justify-center{justify-content:center} .ds-justify-end{justify-content:flex-end} .ds-justify-between{justify-content:space-between} .ds-justify-around{justify-content:space-around} .ds-self-start{align-self:flex-start} .ds-self-center{align-self:center} .ds-self-end{align-self:flex-end} /* ── Gap (density-aware) ────────────────────────────────────── */ .ds-gap-0{gap:0} .ds-gap-1{gap:var(--ds-space-1)} .ds-gap-2{gap:var(--ds-space-2)} .ds-gap-3{gap:var(--ds-space-3)} .ds-gap-4{gap:var(--ds-space-4)} .ds-gap-6{gap:var(--ds-space-6)} .ds-gap-8{gap:var(--ds-space-8)} /* legacy aliases */ .ds-gap-sm{gap:var(--ds-space-2)} .ds-gap-md{gap:var(--ds-space-4)} .ds-gap-lg{gap:var(--ds-space-6)} /* ── Margin (density-aware) ─────────────────────────────────── */ .ds-m-0{margin:0} .ds-m-1{margin:var(--ds-space-1)}.ds-m-2{margin:var(--ds-space-2)}.ds-m-3{margin:var(--ds-space-3)}.ds-m-4{margin:var(--ds-space-4)}.ds-m-6{margin:var(--ds-space-6)}.ds-m-8{margin:var(--ds-space-8)} .ds-mx-auto{margin-left:auto;margin-right:auto} .ds-mt-0{margin-top:0}.ds-mt-1{margin-top:var(--ds-space-1)}.ds-mt-2{margin-top:var(--ds-space-2)}.ds-mt-3{margin-top:var(--ds-space-3)}.ds-mt-4{margin-top:var(--ds-space-4)}.ds-mt-6{margin-top:var(--ds-space-6)}.ds-mt-8{margin-top:var(--ds-space-8)} .ds-mb-0{margin-bottom:0}.ds-mb-1{margin-bottom:var(--ds-space-1)}.ds-mb-2{margin-bottom:var(--ds-space-2)}.ds-mb-3{margin-bottom:var(--ds-space-3)}.ds-mb-4{margin-bottom:var(--ds-space-4)}.ds-mb-6{margin-bottom:var(--ds-space-6)}.ds-mb-8{margin-bottom:var(--ds-space-8)} .ds-ml-1{margin-left:var(--ds-space-1)}.ds-ml-2{margin-left:var(--ds-space-2)}.ds-ml-3{margin-left:var(--ds-space-3)}.ds-ml-4{margin-left:var(--ds-space-4)} .ds-mr-1{margin-right:var(--ds-space-1)}.ds-mr-2{margin-right:var(--ds-space-2)}.ds-mr-3{margin-right:var(--ds-space-3)}.ds-mr-4{margin-right:var(--ds-space-4)} .ds-my-0{margin-top:0;margin-bottom:0} .ds-mx-0{margin-left:0;margin-right:0} /* ── Padding (density-aware) ────────────────────────────────── */ .ds-p-0{padding:0} .ds-p-1{padding:var(--ds-space-1)}.ds-p-2{padding:var(--ds-space-2)}.ds-p-3{padding:var(--ds-space-3)}.ds-p-4{padding:var(--ds-space-4)}.ds-p-6{padding:var(--ds-space-6)}.ds-p-8{padding:var(--ds-space-8)} .ds-px-2{padding-left:var(--ds-space-2);padding-right:var(--ds-space-2)}.ds-px-3{padding-left:var(--ds-space-3);padding-right:var(--ds-space-3)}.ds-px-4{padding-left:var(--ds-space-4);padding-right:var(--ds-space-4)} .ds-py-1{padding-top:var(--ds-space-1);padding-bottom:var(--ds-space-1)}.ds-py-2{padding-top:var(--ds-space-2);padding-bottom:var(--ds-space-2)}.ds-py-3{padding-top:var(--ds-space-3);padding-bottom:var(--ds-space-3)}.ds-py-4{padding-top:var(--ds-space-4);padding-bottom:var(--ds-space-4)} /* ── Grid ───────────────────────────────────────────────────── */ .ds-grid{display:grid;gap:var(--ds-space-4)} .ds-cols-1{grid-template-columns:repeat(1,1fr)} .ds-cols-2{grid-template-columns:repeat(2,1fr)} .ds-cols-3{grid-template-columns:repeat(3,1fr)} .ds-cols-4{grid-template-columns:repeat(4,1fr)} .ds-cols-5{grid-template-columns:repeat(5,1fr)} .ds-cols-6{grid-template-columns:repeat(6,1fr)} .ds-cols-12{grid-template-columns:repeat(12,1fr)} .ds-grid-auto{grid-template-columns:repeat(auto-fill,minmax(var(--ds-col-min,220px),1fr))} @media(max-width:768px){ .ds-cols-2,.ds-cols-3,.ds-cols-4,.ds-cols-5,.ds-cols-6{grid-template-columns:1fr} .ds-cols-md-2{grid-template-columns:repeat(2,1fr)} } /* ── Width ──────────────────────────────────────────────────── */ .ds-w-auto{width:auto} .ds-w-full{width:100%} .ds-w-1-2{width:50%} .ds-w-1-3{width:33.333%} .ds-w-2-3{width:66.667%} .ds-w-1-4{width:25%} .ds-w-3-4{width:75%} .ds-max-w-sm{max-width:24rem} .ds-max-w-md{max-width:36rem} .ds-max-w-lg{max-width:48rem} .ds-min-w-0{min-width:0} /* ── Position ───────────────────────────────────────────────── */ .ds-relative{position:relative} .ds-absolute{position:absolute} .ds-fixed{position:fixed} .ds-sticky{position:sticky} .ds-inset-0{top:0;right:0;bottom:0;left:0} .ds-top-0{top:0}.ds-right-0{right:0}.ds-bottom-0{bottom:0}.ds-left-0{left:0} .ds-z-dropdown{z-index:300} .ds-z-modal{z-index:400} .ds-z-toast{z-index:500} /* ── Text color / typography ────────────────────────────────── */ .ds-text-fg{color:var(--foreground)} .ds-text-muted{color:var(--muted-foreground)} .ds-text-primary{color:var(--primary)} .ds-text-success{color:var(--success)} .ds-text-warning{color:color-mix(in oklch,var(--warning) 70%,var(--foreground))} .ds-text-danger{color:var(--danger)} .ds-text-info{color:var(--info)} .ds-text-accent{color:var(--accent)} .ds-text-left{text-align:left}.ds-text-center{text-align:center}.ds-text-right{text-align:right} .ds-text-xs{font-size:calc(0.6875rem * var(--font-scale))} .ds-text-sm{font-size:calc(0.8125rem * var(--font-scale))} .ds-text-base{font-size:calc(0.875rem * var(--font-scale))} .ds-text-lg{font-size:calc(1rem * var(--font-scale))} .ds-font-mono{font-family:var(--font-mono)} .ds-font-medium{font-weight:500}.ds-font-semibold{font-weight:600}.ds-font-bold{font-weight:700} .ds-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .ds-nowrap{white-space:nowrap} .ds-leading-relaxed{line-height:1.6} /* ── Surface tint / opacity ─────────────────────────────────── */ .ds-tint-primary{background:color-mix(in oklch,var(--primary) 8%,transparent)} .ds-tint-success{background:color-mix(in oklch,var(--success) 8%,transparent)} .ds-tint-warning{background:color-mix(in oklch,var(--warning) 8%,transparent)} .ds-tint-danger{background:color-mix(in oklch,var(--danger) 8%,transparent)} .ds-tint-info{background:color-mix(in oklch,var(--info) 8%,transparent)} .ds-tint-muted{background:var(--muted)} .ds-op-60{opacity:.6}.ds-op-80{opacity:.8} /* ── Border / radius helpers ────────────────────────────────── */ .ds-border{border:1px solid var(--border)} .ds-border-t{border-top:1px solid var(--border)} .ds-border-b{border-bottom:1px solid var(--border)} .ds-rounded{border-radius:var(--radius)} .ds-rounded-sm{border-radius:var(--radius-sm)} .ds-rounded-lg{border-radius:var(--radius-lg)} .ds-rounded-full{border-radius:var(--radius-full)} /* ── Visibility (responsive) ────────────────────────────────── */ .ds-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} @media(max-width:768px){.ds-hidden-md-down{display:none}} @media(min-width:769px){.ds-visible-md-up{display:none}}