@dev-dga/css 0.12.0 → 0.12.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/README.md +4 -2
- package/dist/components/date-picker.css +1 -1
- package/dist/components/date-picker.css.map +1 -1
- package/dist/components/date-range-picker.css +1 -1
- package/dist/components/date-range-picker.css.map +1 -1
- package/dist/components/dropdown.css +1 -1
- package/dist/components/dropdown.css.map +1 -1
- package/dist/components/number-input.css +1 -1
- package/dist/components/number-input.css.map +1 -1
- package/dist/components/text-input.css +1 -1
- package/dist/components/text-input.css.map +1 -1
- package/dist/components/textarea.css +1 -1
- package/dist/components/textarea.css.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/package.json +14 -8
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"mappings":"AAAA,uBAOE,8DAMA,sNAUA,qDAMA,2PAeA,uFAIA,uFAOA,wSAeA,8DAIA,uDAGA,+CAKA,yPAAA,+PAAA,+PAYA,mFAOA,6DAGA,
|
|
1
|
+
{"version":3,"mappings":"AAAA,uBAOE,8DAMA,sNAUA,qDAMA,2PAeA,uFAIA,uFAOA,wSAeA,8DAIA,uDAGA,+CAKA,yPAAA,+PAAA,+PAYA,mFAOA,6DAGA,uEAIA,yNAYA,sDASA,8DAAA,sGAIA,+EAOA,2IAQA,4HAQA,+HAKA,mIAKA,iHAGA,mOASA,6FAGA,8FAGA,8FASA,sEAGA,4GAIA,wFAGA,0IAIA,qGAGA,iFAGA,mFAAA,2HAIA,qMAIA,2HAAA,wIAMA,4QAQA,sHAMA,uCACE,qDASF,8BACE,2CAGA,2EAIA,yEAGA","sources":["src/components/textarea.css"],"sourcesContent":["@layer ddga-components {\n /* Wrapper (.ddga-field) + helper/error (.ddga-field__message) are shared —\n see field.css. Mirrors the SDGA \"Textarea\" field model (= Text input, minus\n the size axis): single size, three fill styles, gray-400 border, multi-line.\n The control owns the box; the <textarea> inside is borderless/transparent so\n the focus/pressed `::after` underline can render. */\n\n .ddga-field[data-slot='textarea-field'] {\n gap: var(--ddga-space-2);\n }\n\n /* ─── Label (SDGA: Text sm Regular, ink #161616, leading required *) ─── */\n\n .ddga-textarea__label {\n display: inline-flex;\n align-items: center;\n gap: var(--ddga-space-1);\n color: var(--ddga-text-primary);\n font-weight: var(--ddga-font-weight-regular);\n font-size: var(--ddga-font-size-sm);\n line-height: 1.4286;\n }\n\n .ddga-textarea__required {\n color: var(--ddga-error-700);\n }\n\n /* ─── Control (the bordered box; owns border/focus/state/style) ─── */\n\n .ddga-textarea {\n position: relative;\n display: block;\n inline-size: 100%;\n border: 1px solid var(--ddga-gray-400);\n border-radius: var(--ddga-radius-sm);\n background-color: var(--ddga-color-background);\n transition:\n border-color 150ms ease,\n box-shadow 150ms ease,\n background-color 150ms ease;\n }\n\n /* ─── Fill styles (SDGA Style axis) ─── */\n\n .ddga-textarea--filled-lighter {\n border-color: transparent;\n background-color: var(--ddga-gray-25);\n }\n .ddga-textarea--filled-darker {\n border-color: transparent;\n background-color: var(--ddga-gray-100);\n }\n\n /* ─── Field (the actual <textarea>: transparent, borderless, multi-line) ─── */\n\n .ddga-textarea__field {\n display: block;\n inline-size: 100%;\n padding-block: var(--ddga-space-3);\n padding-inline: var(--ddga-space-4);\n border: 0;\n background: transparent;\n color: var(--ddga-text-primary);\n font-family: inherit;\n font-size: var(--ddga-font-size-base);\n line-height: 1.5;\n caret-color: var(--ddga-gray-950);\n outline: none;\n }\n\n .ddga-textarea__field::placeholder {\n color: var(--ddga-gray-500);\n }\n\n .ddga-textarea__field--resize-vertical {\n resize: vertical;\n }\n .ddga-textarea__field--resize-none {\n resize: none;\n }\n\n /* Autofill: repaint with tokens (see text-input.css for the why). */\n .ddga-textarea__field:-webkit-autofill,\n .ddga-textarea__field:-webkit-autofill:hover,\n .ddga-textarea__field:-webkit-autofill:focus {\n -webkit-text-fill-color: var(--ddga-text-primary);\n -webkit-box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n box-shadow: 0 0 0 100vmax var(--ddga-color-background) inset;\n caret-color: var(--ddga-gray-950);\n }\n\n /* ─── Hover (SDGA: outlined style darkens its border to gray-700; the\n borderless filled styles stay borderless) ─── */\n\n .ddga-textarea--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-700);\n }\n\n /* ─── Focus (SDGA: shadow-md + a full-width 2px dark bottom underline, NOT a\n ring; outlined border stays gray-400, filled stays borderless) ─── */\n\n .ddga-textarea:focus-within {\n box-shadow: var(--ddga-shadow-md);\n }\n .ddga-textarea--default:focus-within {\n border-color: var(--ddga-gray-400);\n }\n /* Underline bar — hidden by default; states scale it in from center so pressed→focus tweens, no snap. */\n .ddga-textarea::after {\n content: '';\n position: absolute;\n inset-inline: 0;\n bottom: -1px;\n block-size: 2px;\n background-color: var(--ddga-gray-950);\n transform: scaleX(0);\n transform-origin: center;\n transition: transform 150ms ease;\n pointer-events: none;\n }\n .ddga-textarea:focus-within::after {\n transform: scaleX(1);\n }\n\n /* ─── Pressed (SDGA: gray-100 fill + a short, CENTERED ~50%-width 2px dark\n underline). Real state is :active; `--pressed` is a static hook so the\n state is visible in Storybook. The centered underline overrides the\n focus full-width one while the mouse is down. */\n\n .ddga-textarea:active:not(:has(.ddga-textarea__field:disabled)),\n .ddga-textarea--pressed {\n background-color: var(--ddga-gray-100);\n }\n .ddga-textarea:active::after,\n .ddga-textarea--pressed::after {\n transform: scaleX(0.5);\n }\n\n /* ─── Error (SDGA: error-700 border + helper; bg/text unchanged) ─── */\n\n .ddga-textarea--error,\n .ddga-textarea--error:hover:not(:focus-within),\n .ddga-textarea--error:focus-within {\n border-color: var(--ddga-error-700);\n }\n\n /* ─── Read-only (SDGA: gray-300 border, transparent fill) ─── */\n\n .ddga-textarea:has(.ddga-textarea__field:read-only:not(:disabled)) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n }\n\n /* ─── Disabled (SDGA: gray-300 border, transparent fill, gray-400 text,\n no opacity dimming) ─── */\n\n .ddga-textarea:has(.ddga-textarea__field:disabled) {\n border-color: var(--ddga-gray-300);\n background-color: transparent;\n cursor: not-allowed;\n }\n .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field {\n color: var(--ddga-gray-400);\n cursor: not-allowed;\n resize: none;\n }\n .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field::placeholder {\n color: var(--ddga-gray-400);\n }\n .ddga-field[data-slot='textarea-field']:has(.ddga-textarea__field:disabled) .ddga-textarea__label,\n .ddga-field[data-slot='textarea-field']:has(.ddga-textarea__field:disabled)\n .ddga-textarea__required {\n color: var(--ddga-gray-400);\n }\n\n /* ─── Helper / error line (SDGA: 16px feedback icon + text gray-700,\n error error-700, 4px block padding) ─── */\n\n .ddga-field[data-slot='textarea-field'] .ddga-field__message {\n padding-block: var(--ddga-space-1);\n }\n .ddga-field[data-slot='textarea-field'] .ddga-field__message--helper {\n color: var(--ddga-gray-700);\n }\n .ddga-field[data-slot='textarea-field'] .ddga-field__message--error {\n color: var(--ddga-error-700);\n }\n\n /* ─── Dark mode ─── */\n /* SDGA light values are fixed gray-ramp steps that don't flip; remap to the\n flipping semantic tokens so text/affordances stay readable on dark. Exact\n DGA dark palette deferred. */\n\n [data-theme='dark'] .ddga-textarea {\n border-color: var(--ddga-color-input);\n }\n [data-theme='dark'] .ddga-textarea__field {\n color: var(--ddga-text-primary);\n caret-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-textarea__field::placeholder {\n color: var(--ddga-text-placeholder);\n }\n [data-theme='dark'] .ddga-textarea--filled-lighter,\n [data-theme='dark'] .ddga-textarea--filled-darker {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-textarea--default:hover:not(:focus-within) {\n border-color: var(--ddga-gray-500);\n }\n [data-theme='dark'] .ddga-textarea::after {\n background-color: var(--ddga-text-primary);\n }\n [data-theme='dark'] .ddga-textarea:active:not(:has(.ddga-textarea__field:disabled)),\n [data-theme='dark'] .ddga-textarea--pressed {\n background-color: var(--ddga-color-muted);\n }\n [data-theme='dark'] .ddga-textarea:has(.ddga-textarea__field:read-only:not(:disabled)),\n [data-theme='dark'] .ddga-textarea:has(.ddga-textarea__field:disabled) {\n border-color: var(--ddga-color-border);\n }\n [data-theme='dark'] .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field,\n [data-theme='dark']\n .ddga-textarea:has(.ddga-textarea__field:disabled)\n .ddga-textarea__field::placeholder {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark']\n .ddga-field[data-slot='textarea-field']:has(.ddga-textarea__field:disabled)\n .ddga-textarea__label,\n [data-theme='dark']\n .ddga-field[data-slot='textarea-field']:has(.ddga-textarea__field:disabled)\n .ddga-textarea__required {\n color: var(--ddga-text-tertiary);\n }\n [data-theme='dark'] .ddga-field[data-slot='textarea-field'] .ddga-field__message--helper {\n color: var(--ddga-text-secondary);\n }\n\n /* ─── Reduced motion ─── */\n\n @media (prefers-reduced-motion: reduce) {\n .ddga-textarea,\n .ddga-textarea::after {\n transition: none;\n }\n }\n\n /* ─── Forced colors (Windows High Contrast): the focus underline is invisible,\n restore a visible outline ─── */\n\n @media (forced-colors: active) {\n .ddga-textarea {\n border: 1px solid CanvasText;\n }\n .ddga-textarea:focus-within {\n outline: 2px solid Highlight;\n outline-offset: 1px;\n }\n .ddga-textarea:has(.ddga-textarea__field:disabled) {\n border-color: GrayText;\n }\n .ddga-textarea:has(.ddga-textarea__field:disabled) .ddga-textarea__field {\n color: GrayText;\n }\n }\n}\n"],"names":[]}
|