ui-style-kit-css 2.4.1 → 2.6.0

package/styles/clean-defaults.css

@@ -0,0 +1,295 @@
+/* =========================================================
+   UI Style Kit CSS - Clean Defaults
+
+   Supplies conservative spacing and decoration defaults while
+   keeping deliberate flush and underlined treatments opt-in.
+========================================================= */
+
+@layer ui-style-kit.components {
+[data-ui][data-mode]:not([data-ui="technical-blueprint"]) {
+  --usk-element-margin-min: 2px;
+  --usk-element-padding-min: 2px;
+  --usk-wrapper-margin-min: var(--usk-element-margin-min);
+  --usk-wrapper-padding-min: var(--usk-element-padding-min);
+  --usk-compact-padding-block-min: 2px;
+  --usk-compact-padding-inline-min: 4px;
+}
+
+/**
+ * Establishes the library-wide non-zero spacing floor. Preset declarations in
+ * the later preset layer retain their roomier values, while either flush class
+ * provides an explicit opt-out for intentionally adjoining elements. Technical
+ * Blueprint is exempt because its drafting grammar intentionally joins controls.
+ */
+[data-ui][data-mode]:not([data-ui="technical-blueprint"]) :where(:not(.flush):not(.usk-flush)) {
+  margin: var(--usk-element-margin-min);
+  padding: var(--usk-element-padding-min);
+}
+
+/** Compact controls remain operable even when a preset omits its own padding. */
+[data-ui][data-mode]:not([data-ui="technical-blueprint"]) :where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"],
+  [class~="usk-button"],
+  [class~="usk-icon-button"],
+  [class~="usk-badge"],
+  [class~="ui-button"],
+  [class~="ui-icon-button"],
+  [class~="ui-badge"],
+  [class$="-button"], [class*="-button "],
+  [class$="-icon-button"], [class*="-icon-button "],
+  [class$="-badge"], [class*="-badge "]
+) {
+  padding-block: var(--usk-compact-padding-block-min);
+  padding-inline: var(--usk-compact-padding-inline-min);
+}
+}
+
+@layer ui-style-kit.clean_defaults {
+/** Keeps semantic state paint paired when a preset also owns broad anchor or input rules. */
+[data-ui][data-mode] :where(
+  [class~="usk-pagination-link"][aria-current="page"],
+  [class~="ui-pagination-link"][aria-current="page"]
+) {
+  color: var(--usk-native-on-primary);
+}
+
+/** Separates compact page numbers from roomier Previous and Next bookends. */
+[data-ui][data-mode] :where([class~="usk-pagination-link"], [class~="ui-pagination-link"]) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+[data-ui][data-mode] :where(
+  [class~="usk-pagination-link"][data-pagination-kind="page"],
+  [class~="ui-pagination-link"][data-pagination-kind="page"]
+) {
+  min-inline-size: 2.25rem;
+  min-block-size: 2.25rem;
+  padding: 2px 4px;
+  font-size: .9em;
+}
+
+[data-ui][data-mode] :where(
+  [class~="usk-pagination-link"][data-pagination-kind="direction"],
+  [class~="ui-pagination-link"][data-pagination-kind="direction"]
+) {
+  min-inline-size: 2.75rem;
+  min-block-size: 2.75rem;
+}
+
+/** Uses one centering model for native and semantic button content. */
+[data-ui][data-mode] :where(
+  button,
+  input[type="button"],
+  input[type="submit"],
+  input[type="reset"],
+  [class~="usk-button"],
+  [class~="usk-icon-button"],
+  [class~="ui-button"],
+  [class~="ui-icon-button"]
+) {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+[data-ui][data-mode] :where(input[type="checkbox"]:checked, input[type="radio"]:checked) {
+  color: var(--usk-native-choice-mark-color);
+}
+
+}
+
+/**
+ * Provides choice-wrapper alignment below preset paint so authored spacing and
+ * density remain authoritative when a preset supplies them.
+ */
+@layer ui-style-kit.components {
+[data-ui][data-mode] :where(
+  [class~="usk-check"],
+  [class~="usk-radio"],
+  [class~="usk-switch"],
+  [class~="ui-check"],
+  [class~="ui-radio"],
+  [class~="ui-switch"]
+) {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--usk-native-field-gap, .5rem);
+  margin: var(--usk-element-margin-min);
+  padding: .25rem .5rem;
+  line-height: 1.25;
+  vertical-align: middle;
+}
+
+[data-ui][data-mode] :where(
+  [class~="ui-check-control"],
+  [class~="ui-radio-control"],
+  [class~="usk-check-control"],
+  [class~="usk-radio-control"],
+  [class~="usk-switch-track"],
+  [class~="ui-switch-track"]
+) {
+  position: relative;
+  box-sizing: border-box;
+  flex: 0 0 auto;
+  align-self: center;
+  margin: var(--usk-element-margin-min);
+}
+}
+
+@layer ui-style-kit.clean_defaults {
+
+/** Keeps the moving switch face inside its preset-owned track dimensions. */
+[data-ui][data-mode] :where([class~="usk-switch-thumb"], [class~="ui-switch-thumb"]) {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+/**
+ * Protects workflow-stepper markup from preset classes that use the same suffix
+ * for numeric steppers or other three-column controls.
+ */
+[data-ui][data-mode] :where([class~="usk-stepper"], [class~="ui-stepper"]) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: stretch;
+  grid-template-columns: none;
+  inline-size: 100%;
+  max-inline-size: 100%;
+}
+
+[data-ui][data-mode] :where([class~="usk-step"], [class~="ui-step"]) {
+  display: flex;
+  flex: 1 1 12rem;
+  align-items: center;
+  inline-size: auto;
+  min-inline-size: min(100%, 12rem);
+  max-inline-size: 100%;
+}
+
+[data-ui][data-mode] :where([class~="usk-step-label"], [class~="ui-step-label"]) {
+  flex: 1 1 auto;
+  inline-size: auto;
+  min-inline-size: 8ch;
+  max-inline-size: 100%;
+  writing-mode: horizontal-tb;
+}
+
+}
+
+@layer ui-style-kit.clean_defaults {
+
+[data-ui][data-mode] :where(
+  [class~="ui-check"] > input:focus-visible + [class~="ui-check-control"],
+  [class~="ui-radio"] > input:focus-visible + [class~="ui-radio-control"],
+  [class~="ui-switch"] > input:focus-visible + [class~="ui-switch-track"],
+  [class~="usk-check"] > input:focus-visible + [class~="usk-check-control"],
+  [class~="usk-radio"] > input:focus-visible + [class~="usk-radio-control"],
+  [class~="usk-switch"] > input:focus-visible + [class~="usk-switch-track"]
+) {
+  outline: 2px solid var(--usk-native-focus);
+  outline-offset: 2px;
+}
+
+/** Keeps native choice inputs focusable without painting a duplicate control. */
+[data-ui][data-mode] :where(
+  [class~="usk-check"],
+  [class~="usk-radio"],
+  [class~="usk-switch"],
+  [class~="ui-check"],
+  [class~="ui-radio"],
+  [class~="ui-switch"]
+) > input:is([type="checkbox"], [type="radio"]) {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+  opacity: 0;
+}
+
+/** Centers fallback initials while keeping accessible status metadata out of the avatar grid. */
+[data-ui][data-mode] :where([class~="usk-avatar"], [class~="ui-avatar"]) > [aria-hidden="true"] {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  inline-size: 100%;
+  block-size: 100%;
+  line-height: 1;
+  translate: 0 .05em;
+}
+
+[data-ui][data-mode] :where([class~="usk-avatar"], [class~="ui-avatar"]) > [role="status"] {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+}
+
+/** Keeps the native remove action compact inside a chip without requiring a React-only class. */
+[data-ui][data-mode] :where([class~="usk-chip"], [class~="ui-chip"]) > button {
+  display: inline-flex;
+  flex: 0 0 auto;
+  align-items: center;
+  align-self: center;
+  justify-content: center;
+  box-sizing: border-box;
+  inline-size: 1.5rem;
+  block-size: 1.5rem;
+  min-inline-size: 1.5rem;
+  min-block-size: 1.5rem;
+  margin: var(--usk-element-margin-min);
+  padding: 2px;
+  line-height: 1;
+  vertical-align: middle;
+}
+
+[data-ui][data-mode] :where([class~="usk-chip"], [class~="ui-chip"]) > button > svg {
+  display: block;
+  inline-size: 0.75rem;
+  block-size: 0.75rem;
+  margin: 0;
+  padding: 0;
+}
+
+/** Normalizes semantic SVG icons without requiring a framework-specific class. */
+[data-ui][data-mode] :where([data-ui-icon]) {
+  display: block;
+  flex: 0 0 auto;
+  inline-size: 1em;
+  block-size: 1em;
+  margin: 0;
+  padding: 0;
+  overflow: visible;
+}
+
+/** Removes decorative underlines while preserving semantic edit notation. */
+[data-ui][data-mode] :where(*:not(u):not(ins):not(del):not(s):not(.usk-underline)) {
+  text-decoration-line: none;
+}
+
+/** Explicitly restores an underline when a consumer chooses that treatment. */
+[data-ui][data-mode] .usk-underline {
+  text-decoration-line: underline !important;
+}
+
+/** Explicitly removes the library's element spacing contract. */
+[data-ui][data-mode] :where(.flush, .usk-flush) {
+  margin: 0 !important;
+  padding: 0 !important;
+}
+}