DangerousThings/dt-design-system
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More fine tuning

Browse Source
This commit is contained in:
michael
2026-03-06 10:16:55 -08:00
parent 8a8d4d4adc
commit 21acd98260
1 changed files with 26 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
packages/web/src/components/forms-dt.css
View File

@@ -18,6 +18,7 @@
[data-brand="dt"] .input { [data-brand="dt"] .input {
border: 2px solid var(--color-primary); border: 2px solid var(--color-primary);
border-radius: 0; border-radius: 0;
padding: 8px 12px;
background: var(--color-bg); background: var(--color-bg);
color: var(--color-text-primary); color: var(--color-text-primary);
transition: border-color var(--transition-fast), box-shadow var(--transition-fast); transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
@@ -141,27 +142,43 @@
/* ============================================================================ /* ============================================================================
Radio Button — Hexagonal indicator Radio Button — Hexagonal indicator
Source: DTRadioGroup.tsx — flat-top hexagon, 22px default Matches RN DTRadioGroup: outlined hexagon with inner filled dot on check.
Uses drop-shadow instead of border (clip-path clips CSS borders) Outer hexagon is always stroked (accent border); inner dot appears on check.
============================================================================ */ ============================================================================ */
[data-brand="dt"] input[type="radio"] { [data-brand="dt"] input[type="radio"] {
appearance: none; appearance: none;
-webkit-appearance: none; -webkit-appearance: none;
display: grid;
place-content: center;
width: 22px; width: 22px;
height: 22px; height: 22px;
flex-shrink: 0;
margin: 0;
border: none; border: none;
background: rgba(var(--color-primary-rgb), 0.1); background: var(--color-primary);
cursor: pointer; cursor: pointer;
clip-path: polygon( clip-path: polygon(
50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25% 50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%
); );
filter: drop-shadow(0 0 1px var(--color-primary)); transition: background var(--transition-fast);
transition: background var(--transition-fast), filter var(--transition-fast);
} }
[data-brand="dt"] input[type="radio"]:checked { /* Inner surface — creates the outlined hexagon look (accent border + transparent center) */
[data-brand="dt"] input[type="radio"]::before {
content: '';
position: absolute;
inset: 2px;
background: var(--color-bg);
clip-path: polygon(
50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%
);
transition: background var(--transition-fast);
}
/* Checked: inner dot fills with accent color (smaller inset for the dot effect) */
[data-brand="dt"] input[type="radio"]:checked::before {
inset: 5px;
background: var(--color-primary); background: var(--color-primary);
filter: drop-shadow(0 0 2px var(--color-primary));
} }
[data-brand="dt"] input[type="radio"]:disabled { [data-brand="dt"] input[type="radio"]:disabled {
@@ -181,8 +198,9 @@
} }
.dt-radio-option.selected { .dt-radio-option.selected {
background: rgba(var(--color-primary-rgb), 0.15); background: rgba(var(--color-primary-rgb), 0.7);
border-color: var(--color-primary); border-color: var(--color-primary);
color: var(--color-bg);
} }
/* ============================================================================ /* ============================================================================