@sanity/ui 3.0.0-static.10 → 3.0.0-static.11

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sanity/ui",
-  "version": "3.0.0-static.10",
+  "version": "3.0.0-static.11",
   "keywords": [
     "sanity",
     "ui",

package/src/css/_resp.ts

@@ -1,4 +1,3 @@
-// import {scopeClassName as _} from './scopeClassName'
 import {ResponsiveProp} from './types'
 
 function _(className: string) {

package/src/css/aspects/font/font.style.ts

@@ -1,10 +1,8 @@
-// import {responsiveRules} from '../../responsiveRules'
 import {_responsiveRule} from '../../_responsiveRule'
 import {Style, StyleRules} from '../../types'
 
-export const rules: StyleRules = {
+export const primitive: StyleRules = {
   '.font': {
-    // 'position': 'relative',
     'fontFamily': 'var(--font-family)',
     'fontFeatureSettings': 'var(--font-feature-settings)',
     'fontSize': 'var(--font-size)',
@@ -71,81 +69,24 @@ export const rules: StyleRules = {
   },
 }
 
-// align
-
-_responsiveRule(rules, `text-align-initial`, {
+_responsiveRule(primitive, `text-align-initial`, {
   textAlign: 'initial',
 })
 
-_responsiveRule(rules, `text-align-left`, {
+_responsiveRule(primitive, `text-align-left`, {
   textAlign: 'left',
 })
 
-_responsiveRule(rules, `text-align-center`, {
+_responsiveRule(primitive, `text-align-center`, {
   textAlign: 'center',
 })
 
-_responsiveRule(rules, `text-align-right`, {
+_responsiveRule(primitive, `text-align-right`, {
   textAlign: 'right',
 })
 
-_responsiveRule(rules, `text-align-justify`, {
+_responsiveRule(primitive, `text-align-justify`, {
   textAlign: 'justify',
 })
 
-export const fontStyle: Style = {layers: {primitive: rules}}
-
-// .font {
-//   position: relative;
-//   font-family: var(--font-family);
-//   font-size: var(--font-size);
-//   line-height: var(--font-line-height);
-//   letter-spacing: var(--font-letter-spacing);
-//   font-weight: var(--font-weight);
-//   transform: translateY(var(--font-descender-height));
-//   padding: 1px 0;
-//   margin: 0;
-
-//   --font-negative-height: calc(var(--font-ascender-height) + var(--font-descender-height));
-//   --font-cap-height: calc(var(--font-line-height) - var(--font-negative-height));
-//   --font-icon-offset: calc((var(--font-cap-height) - var(--font-icon-size)) / 2);
-//   --font-custom-icon-size: calc((var(--font-size) * 1.125) / 2) * 2 + 1;
-//   --font-custom-icon-offset: calc((var(--font-cap-height) - var(--font-custom-icon-size)) / 2);
-
-//   &:before {
-//     content: '';
-//     display: block;
-//     height: 0;
-//     margin-top: calc(0px - var(--font-negative-height) - 1px);
-//   }
-
-//   &:after {
-//     content: '';
-//     display: block;
-//     height: 0;
-//     margin-bottom: -1px;
-//   }
-
-//   & > code,
-//   & > span {
-//     display: block;
-//   }
-
-//   &:not([hidden]) {
-//     display: block;
-//   }
-
-//   & svg:not([data-sanity-icon]) {
-//     /* todo */
-//     font-size: var(--font-custom-icon-size);
-//     /* font-size: calc(var(--font-custom-icon-size) / 16 * 1rem); */
-//     margin: var(--font-custom-icon-offset);
-//   }
-
-//   & [data-sanity-icon] {
-//     /* todo */
-//     font-size: var(--font-icon-size);
-//     /* font-size: calc(var(--font-icon-size) / 16 * 1rem); */
-//     margin: var(--font-icon-offset);
-//   }
-// }
+export const fontStyle: Style = {layers: {primitive}}

package/src/css/aspects/shadow/shadow.style.ts

@@ -1,49 +1,24 @@
+import {SHADOW} from '@sanity/ui/theme'
+
 import {_responsiveRule} from '../../_responsiveRule'
 import type {Style, StyleRules} from '../../types'
 import {vars} from '../../vars'
 
 const util: StyleRules = {}
 
-_responsiveRule(util, 'shadow-0', {boxShadow: 'none'})
-_responsiveRule(util, 'shadow-1', {
-  boxShadow: [
-    `var(--shadow-outline) ${vars.color.shadow.outline}`,
-    `var(--shadow-1-umbra) ${vars.color.shadow.umbra}`,
-    `var(--shadow-1-penumbra) ${vars.color.shadow.penumbra}`,
-    `var(--shadow-1-ambient) ${vars.color.shadow.ambient}`,
-  ].join(', '),
-})
-_responsiveRule(util, 'shadow-2', {
-  boxShadow: [
-    `var(--shadow-outline) ${vars.color.shadow.outline}`,
-    `var(--shadow-2-umbra) ${vars.color.shadow.umbra}`,
-    `var(--shadow-2-penumbra) ${vars.color.shadow.penumbra}`,
-    `var(--shadow-2-ambient) ${vars.color.shadow.ambient}`,
-  ].join(', '),
-})
-_responsiveRule(util, 'shadow-3', {
-  boxShadow: [
-    `var(--shadow-outline) ${vars.color.shadow.outline}`,
-    `var(--shadow-3-umbra) ${vars.color.shadow.umbra}`,
-    `var(--shadow-3-penumbra) ${vars.color.shadow.penumbra}`,
-    `var(--shadow-3-ambient) ${vars.color.shadow.ambient}`,
-  ].join(', '),
-})
-_responsiveRule(util, 'shadow-4', {
-  boxShadow: [
-    `var(--shadow-outline) ${vars.color.shadow.outline}`,
-    `var(--shadow-4-umbra) ${vars.color.shadow.umbra}`,
-    `var(--shadow-4-penumbra) ${vars.color.shadow.penumbra}`,
-    `var(--shadow-4-ambient) ${vars.color.shadow.ambient}`,
-  ].join(', '),
-})
-_responsiveRule(util, 'shadow-5', {
-  boxShadow: [
-    `var(--shadow-outline) ${vars.color.shadow.outline}`,
-    `var(--shadow-5-umbra) ${vars.color.shadow.umbra}`,
-    `var(--shadow-5-penumbra) ${vars.color.shadow.penumbra}`,
-    `var(--shadow-5-ambient) ${vars.color.shadow.ambient}`,
-  ].join(', '),
-})
+for (const shadow of SHADOW) {
+  if (shadow === 0) {
+    _responsiveRule(util, 'shadow-0', {boxShadow: 'none'})
+  } else {
+    _responsiveRule(util, `shadow-${shadow}`, {
+      boxShadow: [
+        `0 0 0 ${vars.card.shadow.outline} ${vars.color.shadow.outline}`,
+        `${vars.shadow[shadow].umbra} ${vars.color.shadow.umbra}`,
+        `${vars.shadow[shadow].penumbra} ${vars.color.shadow.penumbra}`,
+        `${vars.shadow[shadow].ambient} ${vars.color.shadow.ambient}`,
+      ].join(', '),
+    })
+  }
+}
 
 export const shadowStyle: Style = {layers: {util}}

package/src/css/compile/compilePalette.ts

@@ -1,14 +1,15 @@
 import {color} from '@sanity/color'
 import {HUES, TINTS} from '@sanity/ui/theme'
 
+import {varNames} from '../varNames'
 import {compileRule} from './compileRule'
 
 export function compilePalette(): string {
   const props: Record<string, string> = {
     ...compileHues(),
 
-    '--black': color.black.hex,
-    '--white': color.white.hex,
+    [varNames.black]: color.black.hex,
+    [varNames.white]: color.white.hex,
   }
 
   return compileRule(':root', props, {keyframes: {}, media: {}})
@@ -19,7 +20,7 @@ function compileHues() {
 
   for (const hue of HUES) {
     for (const tint of TINTS) {
-      rules[`--${hue}-${tint}`] = color[hue][tint].hex
+      rules[varNames[hue][tint]] = color[hue][tint].hex
     }
   }
 

package/src/css/compile/compileSystem.ts

@@ -1,10 +1,7 @@
-// import {rules} from '../rules'
 import {systemStyle} from '../system.style'
 import {compileStyle} from './compileStyle'
-// import {compileRules} from './compileRules'
 
 /** @public */
 export function compileSystem(): string {
-  // return compileRules(rules)
   return compileStyle(systemStyle)
 }