feat: ring defaults

allows to define the default offset width and offset color for the ring utilities

```js
setup({
  theme: {
    extend: {
      ringOffsetColor: {
        DEFAULT: 'black',
      },
      ringOffsetWidth: {
        DEFAULT: '4px'
      }
    },
  },
})
```

This will allow to write `ring-2` instead of `ring-2 ring-offset-black ring-offset-4`.

TODO.md

@@ -2,10 +2,8 @@ Link to https://nerdcave.com/tailwind-cheat-sheet
 
 pre-commit hook to format files
 
-transform reset properties
 tailwind compat: compare generated CSS rule
 
-https://github.com/tailwindlabs/tailwindcss/pull/2951/files
 https://github.com/tailwindlabs/tailwindcss-aspect-ratio
 https://tailwindcss.com/docs/container
 

packages/core/src/context.ts

@@ -9,6 +9,8 @@ import type {
   SelectorDecorator,
   ThemeResolver,
   Theme,
+  ThemeSectionValueType,
+  Falsy,
 } from './types'
 
 import * as is from './is'
@@ -204,13 +206,17 @@ export const createContext = (config?: ConfigurationOptions | ConfigurationOptio
   setup(config)
 
   return {
-    t: (section, keypath, optional) => {
+    t: <Section extends keyof Theme>(
+      section: Section,
+      keypath: string | string[],
+      defaultValue?: Falsy | NonNullable<ThemeSectionValueType<Theme[Section]>>,
+    ) => {
       const parts = is.array(keypath) ? keypath : [keypath]
 
       const value = activeTheme(section, join(parts) || 'DEFAULT')
 
       return value == null
-        ? (mode.unknown(section, parts, optional, activeTheme) as undefined)
+        ? defaultValue || (mode.unknown(section, parts, defaultValue != null, activeTheme) as undefined)
         : value
     },
 

packages/core/src/plugins.ts

@@ -240,22 +240,34 @@ export const utilities: Record<string, Plugin> = {
     }
 
     // Either width or color
-    return (_ = theme('ringWidth', tail(parts), true /* Optional */))
+    return (_ = theme('ringWidth', tail(parts), '' /* Optional */))
       ? {
           // A width
           [`--${tag('ring-offset-shadow')}`]: `var(--${tag(
             'ring-inset',
-          )},/*!*/ /*!*/) 0 0 0 var(--${tag('ring-offset-width')},0px) var(--${tag(
-            'ring-offset-color',
-          )},#fff)`,
+          )},/*!*/ /*!*/) 0 0 0 var(--${tag('ring-offset-width')},${theme(
+            'ringOffsetWidth',
+            '',
+            '0px',
+          )}) var(--${tag('ring-offset-color')},${theme('ringOffsetColor', '', '#fff')})`,
+
           [`--${tag('ring-shadow')}`]: `var(--${tag(
             'ring-inset',
-          )},/*!*/ /*!*/) 0 0 0 calc(${_} + var(--${tag('ring-offset-width')},0px)) var(--${tag(
-            'ring-color',
-          )},rgba(59,130,246,0.5))`,
-          'box-shadow': `var(--${tag('ring-offset-shadow')}),var(--${tag(
-            'ring-shadow',
-          )}),var(--${tag('shadow')},0 0 transparent)`,
+          )},/*!*/ /*!*/) 0 0 0 calc(${_} + var(--${tag('ring-offset-width')},${theme(
+            'ringOffsetWidth',
+            '',
+            '0px',
+          )})) var(--${tag('ring-color')},${theme(
+            'ringColor',
+            '',
+            asRGBA(
+              theme('ringColor', '', '#93c5fd'),
+              tag('ring-opacity'),
+              theme('ringOpacity', '', '0.5'),
+            ),
+          )})`,
+
+          'box-shadow': boxShadow(tag),
         }
       : {
           // A color

packages/core/src/process.ts

@@ -8,6 +8,7 @@ import type {
   InjectKeyframes,
   PluginResult,
   SelectorDecorator,
+  Falsy,
 } from './types'
 import type { Context } from './context'
 
@@ -25,9 +26,9 @@ const classNames: string[] = []
 const theme: ThemeValueResolver = <Section extends keyof Theme>(
   section: Section,
   key: string | string[],
-  optional?: boolean,
-): ThemeSectionValueType<Theme[Section]> | undefined => {
-  const value = currentContext.t(section, key, optional)
+  defaultValue?: Falsy | NonNullable<ThemeSectionValueType<Theme[Section]>>,
+) => {
+  const value = currentContext.t(section, key, defaultValue as Falsy)
 
   return negate && value && is.string(value)
     ? (`calc(${value} * -1)` as ThemeSectionValueType<Theme[Section]>)

packages/core/src/theme.ts

@@ -251,16 +251,10 @@ export const theme = createThemeResolver(
     padding: (theme) => theme('spacing'),
     placeholderColor: (theme) => theme('colors'),
     placeholderOpacity: (theme) => theme('opacity'),
-    ringColor: (theme) => ({
-      DEFAULT: '#3b82f6',
-      ...theme('colors'),
-    }),
+    ringColor: (theme) => theme('colors'),
     ringOffsetColor: (theme) => theme('colors'),
     ringOffsetWidth: {},
-    ringOpacity: (theme) => ({
-      DEFAULT: '0.5',
-      ...theme('opacity'),
-    }),
+    ringOpacity: (theme) => theme('opacity'),
     ringWidth: {
       DEFAULT: '3px',
     },

packages/preset-system/src/theme.ts

@@ -227,7 +227,7 @@ export const theme = ({ colors, shades }: Options = {}): ThemeConfiguration => (
     },
 
     ringColor: {
-      DEFAULT: 'currentColor',
+      DEFAULT: (theme: ThemeResolver): string | undefined => theme('colors', 'primary'),
     },
 
     ringOffsetWidth: {

packages/types/src/theme.ts

@@ -1,4 +1,5 @@
 import type { Declarations } from './common'
+import type { Falsy } from './util'
 
 export type ThemeExtend = {
   [K in keyof Theme]?: ThemeSectionRecord<ThemeSectionValueType<Theme[K]>>
@@ -11,9 +12,15 @@ export interface PartialTheme extends Partial<Theme> {
 export type ThemeConfiguration = PartialTheme | ((theme: ThemeResolver) => PartialTheme)
 
 export interface ThemeValueResolver {
-  <Section extends keyof Theme>(section: Section, key: string | string[], optional?: boolean):
+  <Section extends keyof Theme>(section: Section, key: string | string[], defaultValue?: Falsy):
     | ThemeSectionValueType<Theme[Section]>
     | undefined
+
+  <Section extends keyof Theme>(
+    section: Section,
+    key: string | string[],
+    defaultValue?: NonNullable<ThemeSectionValueType<Theme[Section]>>,
+  ): NonNullable<ThemeSectionValueType<Theme[Section]>>
 }
 
 export interface ThemeResolver {