Unify dasherizing of custom property names & class names:

- Negative index custom properties are indicated by
  a dash before the number, e.g. `var(--space-1)`
- Positive index custom properties have no dash,
  e.g. var(--space1)
- Color scales now have no dash before the number,
  e.g. var(--red200) to avoid confusion

v7/lib/scales.mjs

@@ -132,7 +132,7 @@ export function generateScaleProperties({
 
   clampSteps.forEach(step => {
     const [[k, v]] = Object.entries(step)
-    css += `\n  --${prefix}-${k}: ${v};`
+    css += `\n  --${prefix}${k}: ${v};`
   })
 
   return css

v7/properties/border-radius.mjs

@@ -10,7 +10,7 @@ export default function borderRadius(state = {}) {
 
     radii.forEach((r, i) => {
       output += '\n'
-      output += `  --borderRadius-${i}: ${typeof r === 'number' ? r += 'px' : r};`
+      output += `  --borderRadius${i}: ${typeof r === 'number' ? r += 'px' : r};`
     })
 
     output += '\n}'

v7/properties/border-widths.mjs

@@ -10,7 +10,7 @@ export default function borderRadius(state = {}) {
 
     widths.forEach((w, i) => {
       output += '\n'
-      output += `  --borderWidth-${i}: ${typeof w === 'number' ? w += 'px' : w};`
+      output += `  --borderWidth${i}: ${typeof w === 'number' ? w += 'px' : w};`
     })
 
     output += '\n}'

v7/properties/color-scales.mjs

@@ -5,15 +5,15 @@ function getColorScale(hslBaseColor, name) {
   const saturation = hslBaseColor.s
   const luminance = hslBaseColor.l
 
-  return `  --${name}-100: hsl(${hue}, ${saturation}%, ${Math.floor(luminance + 40)}%);
-  --${name}-200: hsl(${hue}, ${saturation}%, ${Math.floor(luminance + 30)}%);
-  --${name}-300: hsl(${hue}, ${saturation}%, ${Math.floor(luminance + 20)}%);
-  --${name}-400: hsl(${hue}, ${saturation}%, ${Math.floor(luminance + 10)}%);
-  --${name}-500: hsl(${hue}, ${saturation}%, ${luminance}%);
-  --${name}-600: hsl(${hue}, ${saturation}%, ${Math.floor(luminance - 10)}%);
-  --${name}-700: hsl(${hue}, ${saturation}%, ${Math.floor(luminance - 20)}%);
-  --${name}-800: hsl(${hue}, ${saturation}%, ${Math.floor(luminance - 30)}%);
-  --${name}-900: hsl(${hue}, ${saturation}%, ${Math.floor(luminance - 40)}%);`
+  return `  --${name}100: hsl(${hue}, ${saturation}%, ${Math.floor(luminance + 40)}%);
+  --${name}200: hsl(${hue}, ${saturation}%, ${Math.floor(luminance + 30)}%);
+  --${name}300: hsl(${hue}, ${saturation}%, ${Math.floor(luminance + 20)}%);
+  --${name}400: hsl(${hue}, ${saturation}%, ${Math.floor(luminance + 10)}%);
+  --${name}500: hsl(${hue}, ${saturation}%, ${luminance}%);
+  --${name}600: hsl(${hue}, ${saturation}%, ${Math.floor(luminance - 10)}%);
+  --${name}700: hsl(${hue}, ${saturation}%, ${Math.floor(luminance - 20)}%);
+  --${name}800: hsl(${hue}, ${saturation}%, ${Math.floor(luminance - 30)}%);
+  --${name}900: hsl(${hue}, ${saturation}%, ${Math.floor(luminance - 40)}%);`
 }
 
 export default function colorScales(state = {}) {

v7/test/lib/getCustomProperties.test.js

@@ -7,7 +7,7 @@ test('getCustomProperties', t => {
   const radii = getCustomProperties(borderRadius({ config }))
   t.deepEqual(
     radii,
-    ['--borderRadius-0', '--borderRadius-1'],
+    ['--borderRadius0', '--borderRadius1'],
     'returns the expected array of custom property names'
   )
   t.end()

v7/test/lib/scales.test.js

@@ -70,11 +70,11 @@ test('generateScaleProperties', t => {
   })
 
   // Expected output via https://fluid-design-system.netlify.app/generate/320/16/minor-third/1500/20/perfect-fourth
-  const expected = `--test--2: clamp(0.69rem, 0.69rem + 0.01vw, 0.7rem);
---test--1: clamp(0.83rem, 0.8rem + 0.14vw, 0.94rem);
---test-0: clamp(1rem, 0.93rem + 0.34vw, 1.25rem);
---test-1: clamp(1.2rem, 1.07rem + 0.63vw, 1.67rem);
---test-2: clamp(1.44rem, 1.23rem + 1.06vw, 2.22rem);`
+  const expected = `--test-2: clamp(0.69rem, 0.69rem + 0.01vw, 0.7rem);
+--test-1: clamp(0.83rem, 0.8rem + 0.14vw, 0.94rem);
+--test0: clamp(1rem, 0.93rem + 0.34vw, 1.25rem);
+--test1: clamp(1.2rem, 1.07rem + 0.63vw, 1.67rem);
+--test2: clamp(1.44rem, 1.23rem + 1.06vw, 2.22rem);`
 
   t.equal(
     result.replaceAll(' ', '').replaceAll('\n', ''),
@@ -88,8 +88,8 @@ test('generateTypeScaleProperties', t => {
   const steps = 4
   const properties = generateTypeScaleProperties({ steps })
   const propertyNames = getCustomProperties(properties)
-  const negatives = propertyNames.filter(p => p.includes('text--'))
-  const basePlusPositives = propertyNames.filter(p => !p.includes('text--'))
+  const negatives = propertyNames.filter(p => p.includes('text-'))
+  const basePlusPositives = propertyNames.filter(p => !p.includes('text-'))
 
   t.equal(propertyNames.length, steps + 2, 'produces the expected number of custom properties')
   t.equal(negatives.length, 2, 'includes two negative intervals')
@@ -104,8 +104,8 @@ test('generateSpaceScaleProperties', t => {
 
   const expectedPropertiesLength = steps * 2 - 1 // One base interval plus a symmetrical set of negative and positive intervals
 
-  const negatives = propertyNames.filter(p => p.includes('space--'))
-  const positives = propertyNames.filter(p => !p.includes('space--') && !p.includes('0'))
+  const negatives = propertyNames.filter(p => p.includes('space-'))
+  const positives = propertyNames.filter(p => !p.includes('space-') && !p.includes('0'))
   const isSymmetrical = [
     negatives.length,
     positives.length,

v7/test/properties/border-radius.test.js

@@ -7,7 +7,7 @@ test('config.borders.radii', t => {
     borderRadius({ config })
       .replaceAll(' ', '')
       .replaceAll('\n', '')
-      .includes(':root{--borderRadius-0:2px;--borderRadius-1:9999em;}'),
+      .includes(':root{--borderRadius0:2px;--borderRadius1:9999em;}'),
     'produces the expected border radii'
   )
   t.end()

v7/test/properties/border-widths.test.js

@@ -7,7 +7,7 @@ test('config.borders.widths', t => {
     borderWidths({ config })
       .replaceAll(' ', '')
       .replaceAll('\n', '')
-      .includes(':root{--borderWidth-0:0.125em;--borderWidth-1:2px;}'),
+      .includes(':root{--borderWidth0:0.125em;--borderWidth1:2px;}'),
     'produces the expected border widths'
   )
   t.end()

v7/test/properties/color-scales.test.js

@@ -4,15 +4,15 @@ import config from '../fixtures/styleguide.mjs'
 
 const expectedMinified = `
 :root {
-  --red-100: hsl(0, 100%, 90%);
-  --red-200: hsl(0, 100%, 80%);
-  --red-300: hsl(0, 100%, 70%);
-  --red-400: hsl(0, 100%, 60%);
-  --red-500: hsl(0, 100%, 50%);
-  --red-600: hsl(0, 100%, 40%);
-  --red-700: hsl(0, 100%, 30%);
-  --red-800: hsl(0, 100%, 20%);
-  --red-900: hsl(0, 100%, 10%);
+  --red100: hsl(0, 100%, 90%);
+  --red200: hsl(0, 100%, 80%);
+  --red300: hsl(0, 100%, 70%);
+  --red400: hsl(0, 100%, 60%);
+  --red500: hsl(0, 100%, 50%);
+  --red600: hsl(0, 100%, 40%);
+  --red700: hsl(0, 100%, 30%);
+  --red800: hsl(0, 100%, 20%);
+  --red900: hsl(0, 100%, 10%);
 }`.replaceAll(' ', '').replaceAll('\n', '')
 
 test('config.color.scales', t => {