[DRAFT] [DOCS] Migrating custom brand packages to design tokens

[brian-smith-tcril]

Color system

White

paragon/scss/core/_variables.scss

Line 8 in 4a00bb1

$white: #FFFFFF !default;

paragon/tokens/src/themes/light/global/color.json

Line 3 in 0e16dbb

"white": { "value": "#FFFFFF", "type": "color", "source": "$white", "description": "White color." },

Gray

paragon/scss/core/_variables.scss

Lines 9 to 17 in 4a00bb1

	$gray-100: #EBEBEB !default;
	$gray-200: #CCCCCC !default;
	$gray-300: #ADADAD !default;
	$gray-400: #8F8F8F !default;
	$gray-500: #707070 !default;
	$gray-600: #5C5C5C !default;
	$gray-700: #454545 !default;
	$gray-800: #333333 !default;
	$gray-900: #212529 !default;

paragon/scss/core/_variables.scss

Lines 20 to 34 in 4a00bb1

	$grays: () !default;
	$grays: map-merge(
	(
	"100": $gray-100,
	"200": $gray-200,
	"300": $gray-300,
	"400": $gray-400,
	"500": $gray-500,
	"600": $gray-600,
	"700": $gray-700,
	"800": $gray-800,
	"900": $gray-900
	),
	$grays
	);

paragon/tokens/src/themes/light/global/color.json

Lines 30 to 121 in 0e16dbb

	"gray": {
	"base": {
	"value": "#707070",
	"type": "color",
	"source": "$gray",
	"description": "Basic gray color.",
	"actions": {
	"default": "{color.action.default.gray.base}"
	}
	},
	"100": {
	"value": "#EBEBEB",
	"type": "color",
	"source": "$gray-100",
	"description": "Gray color of level 100.",
	"actions": {
	"default": "{color.action.default.gray.100}"
	}
	},
	"200": {
	"value": "#CCCCCC",
	"type": "color",
	"source": "$gray-200",
	"description": "Gray color of level 200.",
	"actions": {
	"default": "{color.action.default.gray.200}"
	}
	},
	"300": {
	"value": "#ADADAD",
	"type": "color",
	"source": "$gray-300",
	"description": "Gray color of level 300.",
	"actions": {
	"default": "{color.action.default.gray.300}"
	}
	},
	"400": {
	"value": "#8F8F8F",
	"type": "color",
	"source": "$gray-400",
	"description": "Gray color of level 400.",
	"actions": {
	"default": "{color.action.default.gray.400}"
	}
	},
	"500": {
	"value": "{color.gray.base}",
	"type": "color",
	"source": "$gray-500",
	"description": "Gray color of level 500.",
	"actions": {
	"default": "{color.action.default.gray.500}"
	}
	},
	"600": {
	"value": "#5C5C5C",
	"type": "color",
	"source": "$gray-600",
	"description": "Gray color of level 600.",
	"actions": {
	"default": "{color.action.default.gray.600}"
	}
	},
	"700": {
	"value": "#454545",
	"type": "color",
	"source": "$gray-700",
	"description": "Gray color of level 700.",
	"actions": {
	"default": "{color.action.default.gray.700}"
	}
	},
	"800": {
	"value": "#333333",
	"type": "color",
	"source": "$gray-800",
	"description": "Gray color of level 800.",
	"actions": {
	"default": "{color.action.default.gray.800}"
	}
	},
	"900": {
	"value": "#212529",
	"type": "color",
	"source": "$gray-900",
	"description": "Gray color of level 900.",
	"actions": {
	"default": "{color.action.default.gray.900}"
	}
	}
	},

Black

paragon/scss/core/_variables.scss

Line 18 in 4a00bb1

$black: #000000 !default;

paragon/tokens/src/themes/light/global/color.json

Line 4 in 0e16dbb

"black": { "value": "#000000", "type": "color", "source": "$black", "description": "Black color." },

[PKulkoRaccoonGang]

Some thoughts on the functionality of the migration command

This command should do the following:

1. Create the necessary directories for token design
   For example, after paragon brand-migrate, the script creates the following structure automatically
   
2. Based on SCSS variables, create the necessary files and design tokens for them.

paragon/_variables.scss

$tooltip-color-light: $primary !default;

tokens/src/themes/light/components/Tooltip.json

{
  "color": {
    "tooltip": {
      "light": { "value": "{color.primary.base}" }
    }
  }
}