@dbosoft/nextjs-uicore 1.6.1 → 1.7.0

package/.turbo/turbo-check-types.log

@@ -0,0 +1,4 @@
+
+> @dbosoft/nextjs-uicore@1.6.0 check-types F:\source\repos\dbosoft\web\react-components\packages\nextjs-uicore
+> tsc --noEmit
+

package/.turbo/turbo-lint.log

@@ -0,0 +1,5 @@
+
+> @dbosoft/nextjs-uicore@1.6.0 lint F:\source\repos\dbosoft\web\react-components\packages\nextjs-uicore
+> echo 'DEPRECATED: skipping lint for nextjs-uicore'
+
+'DEPRECATED: skipping lint for nextjs-uicore'

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @dbosoft/nextjs-uicore
 
+## 1.7.0
+
+### Minor Changes
+
+- 164d932: Surface system: WCAG-validated surface composition model.
+  - New CSS surface classes (`surface-page`, `surface-page-alt`, `surface-brand-wash`, `surface-brand-bold`, `surface-page-recede`) and child surfaces (`child-container`, `child-zone-light`, `child-zone-dark`, `child-emphasis`)
+  - New Tailwind utilities: `text-on-primary`, `text-on-secondary`, `text-on-muted`, `text-on-brand`, `text-on-link`, `decoration-on-link`, `border-child`, `bg-on-brand-emph`
+  - Text token migration: `text-content-primary` → `text-on-primary`, `text-content-secondary` → `text-on-secondary`, `text-content-muted` → `text-on-muted`, `text-link` → `text-on-link`
+  - Dark mode uses dark blue surfaces (hue 215°) with wide lightness steps
+  - 18 surfaces, 90 foreground pairings, 73 AAA + 17 AA, 0 FAIL
+  - `bg-surface-*` tokens remain valid for interactive states, overlays, dropdowns
+
+### Patch Changes
+
+- Updated dependencies [164d932]
+  - @dbosoft/react-uicore@1.5.0
+
+## 1.6.2
+
+### Patch Changes
+
+- Updated dependencies [e1e8cbf]
+  - @dbosoft/react-uicore@1.4.2
+
 ## 1.6.1
 
 ### Patch Changes

package/eslint.config.mjs

@@ -1,3 +1,3 @@
-import react from '@dbosoft/eslint-config/react'
-
-export default [...react]
+import react from '@dbosoft/eslint-config/react'
+
+export default [...react]

package/package.json

@@ -3,7 +3,7 @@
   "description": "DEPRECATED: Use @dbosoft/react-uicore/tabs for pure React tabs and @dbosoft/nextjs-site-core/ui/tabs for Next.js integration. All other components (head, subnav, themeselector) are replaced by @dbosoft/nextjs-site-core.",
   "deprecated": true,
   "author": "dbosoft",
-  "version": "1.6.1",
+  "version": "1.7.0",
   "sideEffects": false,
   "license": "MIT",
   "exports": {
@@ -23,8 +23,8 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0",
     "typescript": "^5.8.0",
-    "@dbosoft/eslint-config": "2.0.0",
     "@dbosoft/typescript-config": "1.1.0",
+    "@dbosoft/eslint-config": "2.0.0",
     "@dbosoft/web-types": "1.0.0"
   },
   "publishConfig": {
@@ -39,7 +39,7 @@
     "@heroicons/react": ">=2.1.0",
     "clsx": ">=2.1.0",
     "next-themes": ">=0.4.3",
-    "@dbosoft/react-uicore": "1.4.1"
+    "@dbosoft/react-uicore": "1.5.0"
   },
   "scripts": {
     "check-types": "tsc --noEmit",

package/src/subnav/partials/CtaLinks/github-stars-link/formatStarCount/index.test.js

@@ -1,25 +1,25 @@
-import formatStarCount from './index.js'
-
-describe('<Subnav /> - formatStarCount', () => {
-  it('should return zero for an undefined, null, or zero count', () => {
-    expect(formatStarCount(undefined)).toBe(false)
-    expect(formatStarCount(null)).toBe(false)
-    expect(formatStarCount(0)).toBe(false)
-  })
-
-  it('should return numbers 1 to 999 without formatting', () => {
-    expect(formatStarCount(1)).toBe('1')
-    expect(formatStarCount(999)).toBe('999')
-  })
-
-  it('should abbreviate numbers in the tens of thousands with "k" and a single decimal point', () => {
-    expect(formatStarCount(1003)).toBe('1.0k')
-    expect(formatStarCount(1280)).toBe('1.2k')
-    expect(formatStarCount(15630)).toBe('15.6k')
-  })
-
-  it('should abbreviate numbers in the hundreds of thousands with "k" and no decimal point', () => {
-    expect(formatStarCount(100000)).toBe('100k')
-    expect(formatStarCount(156783)).toBe('156k')
-  })
-})
+import formatStarCount from './index.js'
+
+describe('<Subnav /> - formatStarCount', () => {
+  it('should return zero for an undefined, null, or zero count', () => {
+    expect(formatStarCount(undefined)).toBe(false)
+    expect(formatStarCount(null)).toBe(false)
+    expect(formatStarCount(0)).toBe(false)
+  })
+
+  it('should return numbers 1 to 999 without formatting', () => {
+    expect(formatStarCount(1)).toBe('1')
+    expect(formatStarCount(999)).toBe('999')
+  })
+
+  it('should abbreviate numbers in the tens of thousands with "k" and a single decimal point', () => {
+    expect(formatStarCount(1003)).toBe('1.0k')
+    expect(formatStarCount(1280)).toBe('1.2k')
+    expect(formatStarCount(15630)).toBe('15.6k')
+  })
+
+  it('should abbreviate numbers in the hundreds of thousands with "k" and no decimal point', () => {
+    expect(formatStarCount(100000)).toBe('100k')
+    expect(formatStarCount(156783)).toBe('156k')
+  })
+})

package/src/subnav/partials/CtaLinks/github-stars-link/parseGithubUrl/index.test.js

@@ -1,25 +1,25 @@
-import parseGithubUrl from './index.js'
-
-describe('<Subnav /> - parseGithubUrl', () => {
-  it('should gracefully handle an invalid URL', () => {
-    //  Suppress console.warn for this test, we expect warnings
-    jest.spyOn(console, 'warn')
-    global.console.warn.mockImplementation(() => {})
-    expect(parseGithubUrl(undefined)).toBe(false)
-    expect(parseGithubUrl('blah-blah')).toBe(false)
-    //  Restore console.warn for further tests
-    global.console.warn.mockRestore()
-  })
-
-  it('should handle a non-GitHub URL', () => {
-    expect(parseGithubUrl('https://www.example.com/dbosoft/maxback')).toBe(
-      false
-    )
-  })
-
-  it('should parse the org and repo from a GitHub URL', () => {
-    const testInput = 'https://www.github.com/dbosoft/maxback'
-    expect(parseGithubUrl(testInput).repo).toBe('maxback')
-    expect(parseGithubUrl(testInput).org).toBe('dbosoft')
-  })
-})
+import parseGithubUrl from './index.js'
+
+describe('<Subnav /> - parseGithubUrl', () => {
+  it('should gracefully handle an invalid URL', () => {
+    //  Suppress console.warn for this test, we expect warnings
+    jest.spyOn(console, 'warn')
+    global.console.warn.mockImplementation(() => {})
+    expect(parseGithubUrl(undefined)).toBe(false)
+    expect(parseGithubUrl('blah-blah')).toBe(false)
+    //  Restore console.warn for further tests
+    global.console.warn.mockRestore()
+  })
+
+  it('should handle a non-GitHub URL', () => {
+    expect(parseGithubUrl('https://www.example.com/dbosoft/maxback')).toBe(
+      false
+    )
+  })
+
+  it('should parse the org and repo from a GitHub URL', () => {
+    const testInput = 'https://www.github.com/dbosoft/maxback'
+    expect(parseGithubUrl(testInput).repo).toBe('maxback')
+    expect(parseGithubUrl(testInput).org).toBe('dbosoft')
+  })
+})

package/src/subnav/partials/CtaLinks/icons/github.svg

@@ -1,4 +1,4 @@
-<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
-    <title>GitHub</title>
-    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
+<svg role="img" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+    <title>GitHub</title>
+    <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12" />
 </svg>

package/src/subnav/partials/MenuItemsDefault/style.module.scss

@@ -1,71 +1,71 @@
-.root {
-  display: flex;
-  padding: 0 32px;
-  margin: 0 auto;
-  align-items: center;
-  list-style: none;
-
-  &.alignRight {
-    margin-right: 0;
-    padding-right: 16px;
-  }
-}
-
-.listItem {
-  position: relative;
-  white-space: nowrap;
-  margin: 0;
-  padding: 0;
-}
-
-.navLink {
-  composes: g-type-body-small-strong from global;
-  position: relative;
-  padding: 0 16px;
-  line-height: 2.5rem;
-  display: flex;
-  align-items: center;
-  white-space: nowrap;
-}
-
-.submenuItem {
-  composes: g-type-body-small-strong from global;
-  color: var(--black);
-}
-
-.submenuModal {
-  border-radius: 4px;
-  box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
-  background: var(--white);
-  z-index: 1;
-  display: block;
-  position: absolute;
-  top: 100%;
-  margin: 8px 0 0 0;
-  padding: 24px;
-  left: 50%;
-  transform: translateX(-50%);
-  list-style: none;
-
-  & li {
-    & a:hover .text {
-      text-decoration: underline;
-    }
-
-    & + li {
-      margin-top: 6px;
-    }
-  }
-
-  &.isCollapsed {
-    display: none;
-  }
-}
-
-.verticalDivider {
-  background: var(--gray-5);
-  height: 1.75rem;
-  width: 1px;
-  margin: 0 8px;
-  display: block;
-}
+.root {
+  display: flex;
+  padding: 0 32px;
+  margin: 0 auto;
+  align-items: center;
+  list-style: none;
+
+  &.alignRight {
+    margin-right: 0;
+    padding-right: 16px;
+  }
+}
+
+.listItem {
+  position: relative;
+  white-space: nowrap;
+  margin: 0;
+  padding: 0;
+}
+
+.navLink {
+  composes: g-type-body-small-strong from global;
+  position: relative;
+  padding: 0 16px;
+  line-height: 2.5rem;
+  display: flex;
+  align-items: center;
+  white-space: nowrap;
+}
+
+.submenuItem {
+  composes: g-type-body-small-strong from global;
+  color: var(--black);
+}
+
+.submenuModal {
+  border-radius: 4px;
+  box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
+  background: var(--white);
+  z-index: 1;
+  display: block;
+  position: absolute;
+  top: 100%;
+  margin: 8px 0 0 0;
+  padding: 24px;
+  left: 50%;
+  transform: translateX(-50%);
+  list-style: none;
+
+  & li {
+    & a:hover .text {
+      text-decoration: underline;
+    }
+
+    & + li {
+      margin-top: 6px;
+    }
+  }
+
+  &.isCollapsed {
+    display: none;
+  }
+}
+
+.verticalDivider {
+  background: var(--gray-5);
+  height: 1.75rem;
+  width: 1px;
+  margin: 0 8px;
+  display: block;
+}

package/src/subnav/partials/MenuItemsOverflow/style.module.scss

@@ -1,51 +1,51 @@
-.root {
-  position: relative;
-  margin-left: auto;
-}
-
-.dropdown {
-  background: var(--white);
-  border-radius: 4px;
-  box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
-  margin-top: 8px;
-  max-height: calc(100vh - 300%);
-  overflow-y: auto;
-  padding: 12px 24px 0 24px;
-  position: absolute;
-  right: 0;
-  top: 100%;
-  width: 256px;
-  z-index: 1;
-
-  &.isCollapsed {
-    display: none;
-  }
-}
-
-.ulElem {
-  padding: 0;
-  margin: 0;
-  list-style: none;
-}
-
-.submenuTitle {
-  composes: g-type-label from global;
-  margin: 12px 0 8px 0;
-  color: var(--gray-3);
-}
-
-.divider {
-  margin: 12px 0;
-  border: 0;
-  padding: 0;
-  height: 1px;
-  background: var(--gray-5);
-}
-
-.submenuItem {
-  composes: g-type-body-small-strong from global;
-  display: block;
-  padding: 4px 0;
-  line-height: 1.6em;
-  color: var(--black);
-}
+.root {
+  position: relative;
+  margin-left: auto;
+}
+
+.dropdown {
+  background: var(--white);
+  border-radius: 4px;
+  box-shadow: 0 8px 12px rgba(37, 38, 45, 0.08);
+  margin-top: 8px;
+  max-height: calc(100vh - 300%);
+  overflow-y: auto;
+  padding: 12px 24px 0 24px;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  width: 256px;
+  z-index: 1;
+
+  &.isCollapsed {
+    display: none;
+  }
+}
+
+.ulElem {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+.submenuTitle {
+  composes: g-type-label from global;
+  margin: 12px 0 8px 0;
+  color: var(--gray-3);
+}
+
+.divider {
+  margin: 12px 0;
+  border: 0;
+  padding: 0;
+  height: 1px;
+  background: var(--gray-5);
+}
+
+.submenuItem {
+  composes: g-type-body-small-strong from global;
+  display: block;
+  padding: 4px 0;
+  line-height: 1.6em;
+  color: var(--black);
+}

package/src/subnav/partials/nav-item-text/style.module.scss

@@ -1,19 +1,19 @@
-.root {
-  color: var(--black);
-  position: relative;
-
-  &::after {
-    content: '';
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    height: 2px;
-    background: var(--black);
-    opacity: 0;
-  }
-
-  &.isActive::after {
-    opacity: 1;
-  }
-}
+.root {
+  color: var(--black);
+  position: relative;
+
+  &::after {
+    content: '';
+    position: absolute;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    height: 2px;
+    background: var(--black);
+    opacity: 0;
+  }
+
+  &.isActive::after {
+    opacity: 1;
+  }
+}

package/src/subnav/style.module.scss

@@ -1,13 +1,13 @@
-.root {
-  --gray-6-transparent: rgba(174, 176, 183, 0.45);
-  position: sticky;
-  top: -1px;
-  z-index: 800;
-  border-top: 1px solid var(--gray-6-transparent);
-  border-bottom: 1px solid transparent;
-  transition: border-bottom-color 0.8s;
-
-  &.isSticky {
-    border-bottom-color: var(--gray-6-transparent);
-  }
-}
+.root {
+  --gray-6-transparent: rgba(174, 176, 183, 0.45);
+  position: sticky;
+  top: -1px;
+  z-index: 800;
+  border-top: 1px solid var(--gray-6-transparent);
+  border-bottom: 1px solid transparent;
+  transition: border-bottom-color 0.8s;
+
+  &.isSticky {
+    border-bottom-color: var(--gray-6-transparent);
+  }
+}

package/src/tabs/TabsClient.tsx

@@ -40,7 +40,7 @@ export const TabLink = forwardRef<HTMLAnchorElement, React.PropsWithChildren<{
   const searchParams = useSearchParams()
 
   return <Link prefetch={false} role="tab" {...props} className={clsx(`data-[selected]:border-secondary data-[selected]:text-link-light dark:data-[selected]:text-sky-300`,
-    `border-transparent text-content-secondary hover:border-secondary hover:text-sky-600 dark:hover:text-sky-200 `,
+    `border-transparent text-on-secondary hover:border-secondary hover:text-sky-600 dark:hover:text-sky-200 `,
     `whitespace-nowrap border-b-2 mx-3 px-2 py-2 text-base font-semibold`)} ref={ref} href={createNavUrl(props.index, props.tabs, pathname, searchParams)}
   >
     {props.children}
@@ -63,7 +63,7 @@ const TabsClient: FC<{
     const searchParams = useSearchParams();
     const [selectedTab, setSelectedTab] = useState(initialTab);
 
-    return <TabGroup className="text-content-primary" manual selectedIndex={selectedTab}
+    return <TabGroup className="text-on-primary" manual selectedIndex={selectedTab}
       defaultIndex={initialTab} onChange={(index) => {
         router.push(createNavUrl(index, tabs, pathname, searchParams));
         setSelectedTab(index);

package/tsconfig.json

@@ -1,8 +1,8 @@
-{
-    "extends": "@dbosoft/typescript-config/nextjs.json",
-    "compilerOptions": {
-      "outDir": "dist"
-    },
-    "include": ["src"],
-    "exclude": ["node_modules", "dist"]
+{
+    "extends": "@dbosoft/typescript-config/nextjs.json",
+    "compilerOptions": {
+      "outDir": "dist"
+    },
+    "include": ["src"],
+    "exclude": ["node_modules", "dist"]
   }