@sanity/ui 3.0.0-static.1 → 3.0.0-static.2

package/src/css/primitives/switch/rules.ts

@@ -3,7 +3,7 @@ import {Rules} from '../../types'
 export const switchRules: Rules = {
   'switch': {},
 
-  'switch-input': {
+  'switch-element': {
     position: 'absolute',
     top: 0,
     right: 0,
@@ -21,41 +21,70 @@ export const switchRules: Rules = {
   },
 
   'switch-presentation': {
+    '--switch-bg-color': 'var(--color-tinted-default-border-2)',
+    // '--switch-border-color': 'var(--color-tinted-default-border-1)',
+    '--switch-fg-color': 'var(--color-tinted-default-bg-0)',
     // --switch-bg-color: ${color.input.default.enabled.border};
     // --switch-fg-color: ${color.input.default.enabled.bg};
-    // --switch-box-shadow: none;
+    '--switch-thumb-offset': '0',
+    '--switch-thumb-size': 'calc(var(--input-switch-height) - var(--input-switch-padding) * 2)',
+    'display': 'block',
     // &:not([hidden]) {
     //   display: block;
     // }
-    // position: relative;
-    // width: ${rem(input.switch.width)};
-    // height: ${rem(input.switch.height)};
-    // border-radius: ${rem(input.switch.height / 2)};
-    // /* Make sure it’s not possible to interact with the wrapper element */
-    // pointer-events: none;
-    // &:after {
-    //   content: '';
-    //   display: block;
-    //   position: absolute;
-    //   top: 0;
-    //   left: 0;
-    //   right: 0;
-    //   bottom: 0;
-    //   z-index: 1;
-    //   box-shadow: var(--switch-box-shadow);
-    //   border-radius: inherit;
-    // }
-    // /* Focus styles */
-    // input:focus + && {
-    //   --switch-box-shadow: ${focusRingStyle({focusRing: input.switch.focusRing})};
-    // }
-    // input:focus:not(:focus-visible) + && {
-    //   --switch-box-shadow: none;
-    // }
-    // input:checked + && {
-    //   --switch-bg-color: ${color.input.default.enabled.fg};
-    //   --switch-fg-color: ${color.input.default.enabled.bg};
-    // }
+    'position': 'relative',
+    'width': 'var(--input-switch-width)',
+    'height': 'var(--input-switch-height)',
+    'borderRadius': 'calc(var(--input-switch-height) / 2)',
+    'outlineOffset': 'var(--input-switch-focus-ring-offset)',
+
+    // Make sure it’s not possible to interact with the presentation element
+    'pointerEvents': 'none',
+
+    '@nest': {
+      // '&::after': {
+      //   content: '""',
+      //   display: 'block',
+      //   position: 'absolute',
+      //   top: 0,
+      //   left: 0,
+      //   right: 0,
+      //   bottom: 0,
+      //   zIndex: 1,
+      //   // boxShadow: 'var(--switch-box-shadow)',
+      //   borderRadius: 'inherit',
+      // },
+      '.switch-element:focus + &': {
+        // --switch-box-shadow: ${focusRingStyle({focusRing: input.switch.focusRing})};
+        outline: 'var(--input-switch-focus-ring-width) solid var(--color-focus-ring)',
+      },
+      'input:focus:not(:focus-visible) + &': {
+        outline: 'none',
+      },
+      'input:checked + &': {
+        '--switch-bg-color': 'var(--color-solid-default-bg-0)',
+        // '--switch-border-color': 'var(--color-solid-default-bg-0)',
+        '--switch-fg-color': 'var(--color-solid-default-fg-0)',
+      },
+      // input:not([data-read-only]):disabled + && {
+      //   --switch-bg-color: ${color.input.default.disabled.border};
+      //   --switch-fg-color: ${color.input.default.disabled.bg};
+      // }
+      // input[data-read-only]:disabled + && {
+      //   --switch-bg-color: ${color.input.default.readOnly.border};
+      //   --switch-fg-color: ${color.input.default.readOnly.bg};
+      // }
+      // input:checked[data-read-only]:disabled + && {
+      //   --switch-bg-color: ${color.input.default.readOnly.fg};
+      //   --switch-fg-color: ${color.input.default.readOnly.bg};
+      // }
+
+      '.switch-element:checked + &': {
+        '--switch-thumb-offset':
+          'calc(var(--input-switch-width) - (var(--input-switch-padding) * 2) - var(--switch-thumb-size))',
+      },
+    },
+
     // @media (hover: hover) {
     //   input:not(:disabled):hover + && {
     //     --switch-bg-color: ${color.input.default.hovered.border};
@@ -66,34 +95,42 @@ export const switchRules: Rules = {
     //     --switch-fg-color: ${color.input.default.enabled.bg};
     //   }
     // }
-    // input:not([data-read-only]):disabled + && {
-    //   --switch-bg-color: ${color.input.default.disabled.border};
-    //   --switch-fg-color: ${color.input.default.disabled.bg};
-    // }
-    // input[data-read-only]:disabled + && {
-    //   --switch-bg-color: ${color.input.default.readOnly.border};
-    //   --switch-fg-color: ${color.input.default.readOnly.bg};
-    // }
-    // input:checked[data-read-only]:disabled + && {
-    //   --switch-bg-color: ${color.input.default.readOnly.fg};
-    //   --switch-fg-color: ${color.input.default.readOnly.bg};
-    // }
   },
 
   'switch-track': {
-    // &:not([hidden]) {
-    //   display: block;
-    // }
-    // background-color: var(--switch-bg-color);
-    // position: absolute;
-    // left: 0;
-    // top: 0;
-    // width: ${rem(input.switch.width)};
-    // height: ${rem(input.switch.height)};
-    // border-radius: ${rem(input.switch.height / 2)};
+    display: 'block',
+    backgroundColor: 'var(--switch-bg-color)',
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    right: 0,
+    bottom: 0,
+    borderRadius: 'inherit',
+    // boxShadow: 'inset 0 0 0 1px var(--switch-border-color)',
+
+    transition:
+      'box-shadow, background-color var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)',
   },
 
   'switch-thumb': {
+    // '--switch-thumb-offset': '0',
+
+    display: 'block',
+    position: 'absolute',
+    left: 'var(--input-switch-padding)',
+    top: 'var(--input-switch-padding)',
+    width: 'var(--switch-thumb-size)',
+    height: 'var(--switch-thumb-size)',
+    backgroundColor: 'var(--switch-fg-color)',
+    borderRadius: '9999px',
+    boxShadow: '0 0 0 0.5px var(--color-shadow-umbra), 0 0.5px 2px 0.5px var(--color-shadow-umbra)',
+    transform: 'translate3d(var(--switch-thumb-offset), 0, 0)',
+    transition:
+      'transform var(--input-switch-transition-duration-ms) var(--input-switch-transition-timing-function)',
+    //     transition-property: transform;
+    // transition-duration: ${input.switch.transitionDurationMs}ms;
+    // transition-timing-function: ${input.switch.transitionTimingFunction};
+
     // const {$indeterminate} = props
     // const {input} = getTheme_v2(props.theme)
     // const trackWidth = input.switch.width
@@ -104,9 +141,7 @@ export const switchRules: Rules = {
     // const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding
     // const checked = $indeterminate !== true && props.$checked === true
     // return css`
-    //   &:not([hidden]) {
-    //     display: block;
-    //   }
+
     //   position: absolute;
     //   left: ${rem(trackPadding)};
     //   top: ${rem(trackPadding)};
@@ -130,3 +165,176 @@ export const switchRules: Rules = {
     // `
   },
 }
+
+// import {getTheme_v2} from '@sanity/ui/theme'
+// import {rem, ThemeProps} from '../../_compat'
+// import {focusRingStyle} from '../../_compat/styles/internal'
+// import {css} from '../../lib/styled'
+
+// /* Root */
+// // export function switchBaseStyles(): ReturnType<typeof css> {
+// //   return css`
+// //     position: relative;
+// //     &:not([hidden]) {
+// //       display: inline-block;
+// //     }
+// //   `
+// // }
+
+// /* Input */
+// export function switchInputStyles(): ReturnType<typeof css> {
+//   // Visually hide the input element while keeping it interactive
+//   return css`
+//     position: absolute;
+//     top: 0;
+//     right: 0;
+//     bottom: 0;
+//     left: 0;
+//     opacity: 0;
+//     height: 100%;
+//     width: 100%;
+//     outline: none;
+//     padding: 0;
+//     margin: 0;
+
+//     /* Place the input element above the representation element */
+//     z-index: 1;
+//   `
+// }
+
+// /* Representation */
+// export function switchRepresentationStyles(props: ThemeProps): ReturnType<typeof css> {
+//   const {color, input} = getTheme_v2(props.theme)
+
+//   return css`
+//     --switch-bg-color: ${color.input.default.enabled.border};
+//     --switch-fg-color: ${color.input.default.enabled.bg};
+//     --switch-box-shadow: none;
+
+//     &:not([hidden]) {
+//       display: block;
+//     }
+//     position: relative;
+//     width: ${rem(input.switch.width)};
+//     height: ${rem(input.switch.height)};
+//     border-radius: ${rem(input.switch.height / 2)};
+
+//     /* Make sure it’s not possible to interact with the wrapper element */
+//     pointer-events: none;
+
+//     &:after {
+//       content: '';
+//       display: block;
+//       position: absolute;
+//       top: 0;
+//       left: 0;
+//       right: 0;
+//       bottom: 0;
+//       z-index: 1;
+//       box-shadow: var(--switch-box-shadow);
+//       border-radius: inherit;
+//     }
+
+//     /* Focus styles */
+//     input:focus + && {
+//       --switch-box-shadow: ${focusRingStyle({focusRing: input.switch.focusRing})};
+//     }
+
+//     input:focus:not(:focus-visible) + && {
+//       --switch-box-shadow: none;
+//     }
+
+//     input:checked + && {
+//       --switch-bg-color: ${color.input.default.enabled.fg};
+//       --switch-fg-color: ${color.input.default.enabled.bg};
+//     }
+
+//     @media (hover: hover) {
+//       input:not(:disabled):hover + && {
+//         --switch-bg-color: ${color.input.default.hovered.border};
+//         --switch-fg-color: ${color.input.default.hovered.bg};
+//       }
+
+//       input:not(:disabled):checked:hover + && {
+//         --switch-bg-color: ${color.input.default.enabled.fg};
+//         --switch-fg-color: ${color.input.default.enabled.bg};
+//       }
+//     }
+
+//     input:not([data-read-only]):disabled + && {
+//       --switch-bg-color: ${color.input.default.disabled.border};
+//       --switch-fg-color: ${color.input.default.disabled.bg};
+//     }
+
+//     input[data-read-only]:disabled + && {
+//       --switch-bg-color: ${color.input.default.readOnly.border};
+//       --switch-fg-color: ${color.input.default.readOnly.bg};
+//     }
+
+//     input:checked[data-read-only]:disabled + && {
+//       --switch-bg-color: ${color.input.default.readOnly.fg};
+//       --switch-fg-color: ${color.input.default.readOnly.bg};
+//     }
+//   `
+// }
+
+// /* Track */
+// export function switchTrackStyles(props: ThemeProps): ReturnType<typeof css> {
+//   const {input} = getTheme_v2(props.theme)
+
+//   return css`
+//     &:not([hidden]) {
+//       display: block;
+//     }
+//     background-color: var(--switch-bg-color);
+//     position: absolute;
+//     left: 0;
+//     top: 0;
+//     width: ${rem(input.switch.width)};
+//     height: ${rem(input.switch.height)};
+//     border-radius: ${rem(input.switch.height / 2)};
+//   `
+// }
+
+// /* Thumb */
+// export function switchThumbStyles(
+//   props: {$checked?: boolean; $indeterminate?: boolean} & ThemeProps,
+// ): ReturnType<typeof css> {
+//   const {$indeterminate} = props
+//   const {input} = getTheme_v2(props.theme)
+//   const trackWidth = input.switch.width
+//   const trackHeight = input.switch.height
+//   const trackPadding = input.switch.padding
+//   const size = trackHeight - input.switch.padding * 2
+//   const checkedOffset = trackWidth - trackPadding * 2 - size
+//   const indeterminateOffset = trackWidth / 2 - size / 2 - trackPadding
+//   const checked = $indeterminate !== true && props.$checked === true
+
+//   return css`
+//     &:not([hidden]) {
+//       display: block;
+//     }
+//     position: absolute;
+//     left: ${rem(trackPadding)};
+//     top: ${rem(trackPadding)};
+//     height: ${rem(size)};
+//     width: ${rem(size)};
+//     border-radius: ${rem(size / 2)};
+//     transition-property: transform;
+//     transition-duration: ${input.switch.transitionDurationMs}ms;
+//     transition-timing-function: ${input.switch.transitionTimingFunction};
+//     background: var(--switch-fg-color);
+//     transform: translate3d(0, 0, 0);
+//     box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.05);
+
+//     ${checked &&
+//     css`
+//       transform: translate3d(${checkedOffset}px, 0, 0);
+//     `}
+
+//     ${$indeterminate &&
+//     css`
+//       transform: translate3d(${indeterminateOffset}px, 0, 0);
+//     `}
+//   `
+// }

package/src/css/primitives/switch/switch.ts

@@ -1,5 +1,21 @@
 import {composeClassNames} from '../../composeClassNames'
 
-export function _switch(): string {
+export function _switch(): string | undefined {
   return composeClassNames('switch')
 }
+
+export function _switchElement(): string | undefined {
+  return composeClassNames('switch-element')
+}
+
+export function _switchPresentation(): string | undefined {
+  return composeClassNames('switch-presentation')
+}
+
+export function _switchThumb(): string | undefined {
+  return composeClassNames('switch-thumb')
+}
+
+export function _switchTrack(): string | undefined {
+  return composeClassNames('switch-track')
+}

package/src/css/primitives/text/rules.ts

@@ -9,6 +9,7 @@ export const textRules: Rules = {
     '--font-weight-bold': `var(--font-text-weight-bold)`,
 
     '--font-family': `var(--font-text-family)`,
+    '--font-feature-settings': `var(--font-text-feature-settings)`,
 
     'color': 'var(--color-fg)',
 
@@ -17,15 +18,24 @@ export const textRules: Rules = {
         color: 'var(--color-link-fg)',
         textDecoration: 'none',
       },
+
+      '& a:hover': {
+        color: 'var(--color-fg)',
+      },
+
+      // '& svg': {
+      //   color: 'var(--color-icon)',
+      // },
     },
   },
 
-  'text-accent': {
-    '--fg-color': 'var(--color-accent-fg)',
-  },
+  // 'text-accent': {
+  //   '--color-fg': 'var(--color-accent-fg)',
+  // },
 
   'text-muted': {
-    '--fg-color': 'var(--color-muted-fg)',
+    color: 'var(--color-muted-fg)',
+    // '--color-fg': 'var(--color-tinted-default-fg-4)',
   },
 
   ...responsiveRules('text-0', {
@@ -35,6 +45,7 @@ export const textRules: Rules = {
     '--font-icon-size': 'var(--font-text-0-icon-size)',
     '--font-ascender-height': 'var(--font-text-0-ascender-height)',
     '--font-descender-height': 'var(--font-text-0-descender-height)',
+    // '--font-cap-height': 'var(--font-text-0-cap-height)',
   }),
 
   ...responsiveRules('text-1', {
@@ -44,6 +55,7 @@ export const textRules: Rules = {
     '--font-icon-size': 'var(--font-text-1-icon-size)',
     '--font-ascender-height': 'var(--font-text-1-ascender-height)',
     '--font-descender-height': 'var(--font-text-1-descender-height)',
+    // '--font-cap-height': 'var(--font-text-1-cap-height)',
   }),
 
   ...responsiveRules('text-2', {
@@ -53,6 +65,7 @@ export const textRules: Rules = {
     '--font-icon-size': 'var(--font-text-2-icon-size)',
     '--font-ascender-height': 'var(--font-text-2-ascender-height)',
     '--font-descender-height': 'var(--font-text-2-descender-height)',
+    // '--font-cap-height': 'var(--font-text-2-cap-height)',
   }),
 
   ...responsiveRules('text-3', {
@@ -62,6 +75,7 @@ export const textRules: Rules = {
     '--font-icon-size': 'var(--font-text-3-icon-size)',
     '--font-ascender-height': 'var(--font-text-3-ascender-height)',
     '--font-descender-height': 'var(--font-text-3-descender-height)',
+    // '--font-cap-height': 'var(--font-text-3-cap-height)',
   }),
 
   ...responsiveRules('text-4', {
@@ -71,5 +85,80 @@ export const textRules: Rules = {
     '--font-icon-size': 'var(--font-text-4-icon-size)',
     '--font-ascender-height': 'var(--font-text-4-ascender-height)',
     '--font-descender-height': 'var(--font-text-4-descender-height)',
+    // '--font-cap-height': 'var(--font-text-4-cap-height)',
   }),
 }
+
+// import {getTheme_v2} from '@sanity/ui/theme'
+// import {ThemeProps} from '../../_compat'
+// import {css} from '../../lib/styled'
+
+// export function textBaseStyle(
+//   props: {$accent?: boolean; $muted?: boolean} & ThemeProps,
+// ): ReturnType<typeof css> {
+//   const {$accent, $muted} = props
+//   const {font} = getTheme_v2(props.theme)
+
+//   return css`
+//     color: var(--card-fg-color);
+
+//     ${$accent &&
+//     css`
+//       color: var(--card-accent-fg-color);
+//     `}
+
+//     ${$muted &&
+//     css`
+//       color: var(--card-muted-fg-color);
+//     `}
+
+//     & code {
+//       font-family: ${font.code.family};
+//       border-radius: 1px;
+//       background-color: var(--card-code-bg-color);
+//       color: var(--card-code-fg-color);
+//     }
+
+//     & a {
+//       text-decoration: none;
+//       border-radius: 1px;
+//       color: var(--card-link-color);
+//       outline: none;
+
+//       @media (hover: hover) {
+//         &:hover {
+//           text-decoration: underline;
+//         }
+//       }
+
+//       &:focus {
+//         box-shadow:
+//           0 0 0 1px var(--card-bg-color),
+//           0 0 0 3px var(--card-focus-ring-color);
+//       }
+
+//       &:focus:not(:focus-visible) {
+//         box-shadow: none;
+//       }
+//     }
+
+//     & strong {
+//       font-weight: ${font.text.weights.bold};
+//     }
+
+//     & svg {
+//       /* Certain popular CSS libraries changes the defaults for SVG display */
+//       /* Make sure SVGs are rendered as inline elements */
+//       display: inline;
+//     }
+
+//     & [data-sanity-icon] {
+//       vertical-align: baseline;
+//       color: var(--card-icon-color);
+
+//       & path {
+//         vector-effect: non-scaling-stroke !important;
+//       }
+//     }
+//   `
+// }

package/src/css/primitives/text/text.ts

@@ -1,13 +1,14 @@
 import {_resp} from '../../_resp'
 import {composeClassNames} from '../../composeClassNames'
-import {font} from '../../styles/font'
+import {flexItem, font} from '../../styles'
 import {TextStyleProps} from './types'
 
 /** @public */
-export function text(props: TextStyleProps): string {
+export function text(props: TextStyleProps): string | undefined {
   return composeClassNames(
     'text',
     'block',
+    flexItem(props),
     font(props),
     props.accent && 'text-accent',
     props.muted && 'text-muted',

package/src/css/primitives/text/types.ts

@@ -1,10 +1,10 @@
-import {FontStyleProps} from '@sanity/ui/css'
+import {FlexItemStyleProps, FontStyleProps} from '../../styles'
 import {ResponsiveProp} from '../../types'
 
 export type TextSize = number
 
 /** @public */
-export interface TextStyleProps extends FontStyleProps {
+export interface TextStyleProps extends FlexItemStyleProps, FontStyleProps {
   accent?: boolean
   muted?: boolean
   size?: ResponsiveProp<TextSize>

package/src/css/primitives/textArea/index.ts

@@ -1 +1,2 @@
 export * from './textArea'
+export * from './types'

package/src/css/primitives/textArea/rules.ts

@@ -1,5 +1,7 @@
 import {Rules} from '../../types'
 
 export const textAreaRules: Rules = {
-  //
+  'text-area': {
+    //
+  },
 }

package/src/css/primitives/textArea/textArea.ts

@@ -1,5 +1,7 @@
 import {composeClassNames} from '../../composeClassNames'
+import {_input} from '../_input'
+import {TextAreaStyleProps} from './types'
 
-export function textArea(): string {
-  return composeClassNames('text-area')
+export function textArea(props: TextAreaStyleProps): string | undefined {
+  return composeClassNames('text-area', _input(props))
 }

package/src/css/primitives/textArea/types.ts

@@ -0,0 +1,5 @@
+import {InputStyleProps} from '../_input'
+
+/** @public */
+// eslint-disable-next-line @typescript-eslint/no-empty-object-type
+export interface TextAreaStyleProps extends InputStyleProps {}