From b4cdd08c06d2ff5af14b94b952778dd29bdf5eb0 Mon Sep 17 00:00:00 2001 From: Julian Skinner Date: Fri, 6 Sep 2024 10:45:36 -0500 Subject: [PATCH] style: update templating to wrap 050 values in single-quotes --- .../app/sage_tokens/sage_dictionary.rb | 112 +++++----- .../lib/stylesheets/dictionary/_tokens.scss | 202 +++++++++--------- .../lib/configs/dictionary/tokens.js | 112 +++++----- style-dictionary/bin/templating.js | 7 + .../templates/presets/jsx/tokens.hbs | 6 +- style-dictionary/tokens/color/base.json | 42 ++-- 6 files changed, 244 insertions(+), 237 deletions(-) diff --git a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb index 574fc3d05d..89be719d7e 100644 --- a/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb +++ b/docs/lib/sage_rails/app/sage_tokens/sage_dictionary.rb @@ -21,9 +21,6 @@ module SageDictionary # # Static vars for COLOR BASE # - SD_SAGE_COLOR_BASE_BLUE_50_HEX = "#fafcff" - SD_SAGE_COLOR_BASE_BLUE_50_CODE = "blue-50" - SD_SAGE_COLOR_BASE_BLUE_50_CLASSNAME = "t-sage--color-blue-50" SD_SAGE_COLOR_BASE_BLUE_100_HEX = "#eff6ff" SD_SAGE_COLOR_BASE_BLUE_100_CODE = "blue-100" SD_SAGE_COLOR_BASE_BLUE_100_CLASSNAME = "t-sage--color-blue-100" @@ -57,9 +54,9 @@ module SageDictionary SD_SAGE_COLOR_BASE_BLUE_950_HEX = "#172554" SD_SAGE_COLOR_BASE_BLUE_950_CODE = "blue-950" SD_SAGE_COLOR_BASE_BLUE_950_CLASSNAME = "t-sage--color-blue-950" - SD_SAGE_COLOR_BASE_GREEN_50_HEX = "#fbfefc" - SD_SAGE_COLOR_BASE_GREEN_50_CODE = "green-50" - SD_SAGE_COLOR_BASE_GREEN_50_CLASSNAME = "t-sage--color-green-50" + SD_SAGE_COLOR_BASE_BLUE_050_HEX = "#fafcff" + SD_SAGE_COLOR_BASE_BLUE_050_CODE = "blue-050" + SD_SAGE_COLOR_BASE_BLUE_050_CLASSNAME = "t-sage--color-blue-050" SD_SAGE_COLOR_BASE_GREEN_100_HEX = "#edfcf2" SD_SAGE_COLOR_BASE_GREEN_100_CODE = "green-100" SD_SAGE_COLOR_BASE_GREEN_100_CLASSNAME = "t-sage--color-green-100" @@ -93,9 +90,9 @@ module SageDictionary SD_SAGE_COLOR_BASE_GREEN_950_HEX = "#052e1c" SD_SAGE_COLOR_BASE_GREEN_950_CODE = "green-950" SD_SAGE_COLOR_BASE_GREEN_950_CLASSNAME = "t-sage--color-green-950" - SD_SAGE_COLOR_BASE_MERCURY_50_HEX = "#fffcfa" - SD_SAGE_COLOR_BASE_MERCURY_50_CODE = "mercury-50" - SD_SAGE_COLOR_BASE_MERCURY_50_CLASSNAME = "t-sage--color-mercury-50" + SD_SAGE_COLOR_BASE_GREEN_050_HEX = "#fbfefc" + SD_SAGE_COLOR_BASE_GREEN_050_CODE = "green-050" + SD_SAGE_COLOR_BASE_GREEN_050_CLASSNAME = "t-sage--color-green-050" SD_SAGE_COLOR_BASE_MERCURY_100_HEX = "#fff3ed" SD_SAGE_COLOR_BASE_MERCURY_100_CODE = "mercury-100" SD_SAGE_COLOR_BASE_MERCURY_100_CLASSNAME = "t-sage--color-mercury-100" @@ -129,6 +126,9 @@ module SageDictionary SD_SAGE_COLOR_BASE_MERCURY_950_HEX = "#450506" SD_SAGE_COLOR_BASE_MERCURY_950_CODE = "mercury-950" SD_SAGE_COLOR_BASE_MERCURY_950_CLASSNAME = "t-sage--color-mercury-950" + SD_SAGE_COLOR_BASE_MERCURY_050_HEX = "#fffcfa" + SD_SAGE_COLOR_BASE_MERCURY_050_CODE = "mercury-050" + SD_SAGE_COLOR_BASE_MERCURY_050_CLASSNAME = "t-sage--color-mercury-050" SD_SAGE_COLOR_BASE_PRIMARY_100_HEX = "#dbe9fe" SD_SAGE_COLOR_BASE_PRIMARY_100_CODE = "primary-100" SD_SAGE_COLOR_BASE_PRIMARY_100_CLASSNAME = "t-sage--color-primary-100" @@ -159,9 +159,6 @@ module SageDictionary SD_SAGE_COLOR_BASE_SAGE_500_HEX = "#052e1c" SD_SAGE_COLOR_BASE_SAGE_500_CODE = "sage-500" SD_SAGE_COLOR_BASE_SAGE_500_CLASSNAME = "t-sage--color-sage-500" - SD_SAGE_COLOR_BASE_YELLOW_50_HEX = "#fffefa" - SD_SAGE_COLOR_BASE_YELLOW_50_CODE = "yellow-50" - SD_SAGE_COLOR_BASE_YELLOW_50_CLASSNAME = "t-sage--color-yellow-50" SD_SAGE_COLOR_BASE_YELLOW_100_HEX = "#fffbeb" SD_SAGE_COLOR_BASE_YELLOW_100_CODE = "yellow-100" SD_SAGE_COLOR_BASE_YELLOW_100_CLASSNAME = "t-sage--color-yellow-100" @@ -195,9 +192,9 @@ module SageDictionary SD_SAGE_COLOR_BASE_YELLOW_950_HEX = "#451902" SD_SAGE_COLOR_BASE_YELLOW_950_CODE = "yellow-950" SD_SAGE_COLOR_BASE_YELLOW_950_CLASSNAME = "t-sage--color-yellow-950" - SD_SAGE_COLOR_BASE_RED_50_HEX = "#fffafa" - SD_SAGE_COLOR_BASE_RED_50_CODE = "red-50" - SD_SAGE_COLOR_BASE_RED_50_CLASSNAME = "t-sage--color-red-50" + SD_SAGE_COLOR_BASE_YELLOW_050_HEX = "#fffefa" + SD_SAGE_COLOR_BASE_YELLOW_050_CODE = "yellow-050" + SD_SAGE_COLOR_BASE_YELLOW_050_CLASSNAME = "t-sage--color-yellow-050" SD_SAGE_COLOR_BASE_RED_100_HEX = "#fef2f2" SD_SAGE_COLOR_BASE_RED_100_CODE = "red-100" SD_SAGE_COLOR_BASE_RED_100_CLASSNAME = "t-sage--color-red-100" @@ -231,6 +228,9 @@ module SageDictionary SD_SAGE_COLOR_BASE_RED_950_HEX = "#572627" SD_SAGE_COLOR_BASE_RED_950_CODE = "red-950" SD_SAGE_COLOR_BASE_RED_950_CLASSNAME = "t-sage--color-red-950" + SD_SAGE_COLOR_BASE_RED_050_HEX = "#fffafa" + SD_SAGE_COLOR_BASE_RED_050_CODE = "red-050" + SD_SAGE_COLOR_BASE_RED_050_CLASSNAME = "t-sage--color-red-050" SD_SAGE_COLOR_BASE_ORANGE_100_HEX = "#ffe3d4" SD_SAGE_COLOR_BASE_ORANGE_100_CODE = "orange-100" SD_SAGE_COLOR_BASE_ORANGE_100_CLASSNAME = "t-sage--color-orange-100" @@ -246,9 +246,6 @@ module SageDictionary SD_SAGE_COLOR_BASE_ORANGE_500_HEX = "#450506" SD_SAGE_COLOR_BASE_ORANGE_500_CODE = "orange-500" SD_SAGE_COLOR_BASE_ORANGE_500_CLASSNAME = "t-sage--color-orange-500" - SD_SAGE_COLOR_BASE_PURPLE_50_HEX = "#fafbff" - SD_SAGE_COLOR_BASE_PURPLE_50_CODE = "purple-50" - SD_SAGE_COLOR_BASE_PURPLE_50_CLASSNAME = "t-sage--color-purple-50" SD_SAGE_COLOR_BASE_PURPLE_100_HEX = "#edf1ff" SD_SAGE_COLOR_BASE_PURPLE_100_CODE = "purple-100" SD_SAGE_COLOR_BASE_PURPLE_100_CLASSNAME = "t-sage--color-purple-100" @@ -282,6 +279,9 @@ module SageDictionary SD_SAGE_COLOR_BASE_PURPLE_950_HEX = "#221b4b" SD_SAGE_COLOR_BASE_PURPLE_950_CODE = "purple-950" SD_SAGE_COLOR_BASE_PURPLE_950_CLASSNAME = "t-sage--color-purple-950" + SD_SAGE_COLOR_BASE_PURPLE_050_HEX = "#fafbff" + SD_SAGE_COLOR_BASE_PURPLE_050_CODE = "purple-050" + SD_SAGE_COLOR_BASE_PURPLE_050_CLASSNAME = "t-sage--color-purple-050" SD_SAGE_COLOR_BASE_CHARCOAL_100_HEX = "#828180" SD_SAGE_COLOR_BASE_CHARCOAL_100_CODE = "charcoal-100" SD_SAGE_COLOR_BASE_CHARCOAL_100_CLASSNAME = "t-sage--color-charcoal-100" @@ -297,9 +297,6 @@ module SageDictionary SD_SAGE_COLOR_BASE_CHARCOAL_500_HEX = "#1a1a19" SD_SAGE_COLOR_BASE_CHARCOAL_500_CODE = "charcoal-500" SD_SAGE_COLOR_BASE_CHARCOAL_500_CLASSNAME = "t-sage--color-charcoal-500" - SD_SAGE_COLOR_BASE_GREY_50_HEX = "#fcfcfc" - SD_SAGE_COLOR_BASE_GREY_50_CODE = "grey-50" - SD_SAGE_COLOR_BASE_GREY_50_CLASSNAME = "t-sage--color-grey-50" SD_SAGE_COLOR_BASE_GREY_100_HEX = "#f8f8f8" SD_SAGE_COLOR_BASE_GREY_100_CODE = "grey-100" SD_SAGE_COLOR_BASE_GREY_100_CLASSNAME = "t-sage--color-grey-100" @@ -333,6 +330,9 @@ module SageDictionary SD_SAGE_COLOR_BASE_GREY_950_HEX = "#1a1a19" SD_SAGE_COLOR_BASE_GREY_950_CODE = "grey-950" SD_SAGE_COLOR_BASE_GREY_950_CLASSNAME = "t-sage--color-grey-950" + SD_SAGE_COLOR_BASE_GREY_050_HEX = "#fcfcfc" + SD_SAGE_COLOR_BASE_GREY_050_CODE = "grey-050" + SD_SAGE_COLOR_BASE_GREY_050_CLASSNAME = "t-sage--color-grey-050" SD_SAGE_COLOR_BASE_WHITE_100_HEX = "#fff" SD_SAGE_COLOR_BASE_WHITE_100_CODE = "white-100" SD_SAGE_COLOR_BASE_WHITE_100_CLASSNAME = "t-sage--color-white-100" @@ -369,11 +369,6 @@ module SageDictionary # SD_SAGE_COLOR = { "BLUE": { - "50": { - "HEX": SD_SAGE_COLOR_BASE_BLUE_50_HEX, - "CODE": SD_SAGE_COLOR_BASE_BLUE_50_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_50_CLASSNAME, - }, "100": { "HEX": SD_SAGE_COLOR_BASE_BLUE_100_HEX, "CODE": SD_SAGE_COLOR_BASE_BLUE_100_CODE, @@ -429,13 +424,13 @@ module SageDictionary "CODE": SD_SAGE_COLOR_BASE_BLUE_950_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_950_CLASSNAME, }, + "050": { + "HEX": SD_SAGE_COLOR_BASE_BLUE_050_HEX, + "CODE": SD_SAGE_COLOR_BASE_BLUE_050_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_BLUE_050_CLASSNAME, + }, }, "GREEN": { - "50": { - "HEX": SD_SAGE_COLOR_BASE_GREEN_50_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREEN_50_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_50_CLASSNAME, - }, "100": { "HEX": SD_SAGE_COLOR_BASE_GREEN_100_HEX, "CODE": SD_SAGE_COLOR_BASE_GREEN_100_CODE, @@ -491,13 +486,13 @@ module SageDictionary "CODE": SD_SAGE_COLOR_BASE_GREEN_950_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_950_CLASSNAME, }, + "050": { + "HEX": SD_SAGE_COLOR_BASE_GREEN_050_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREEN_050_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREEN_050_CLASSNAME, + }, }, "MERCURY": { - "50": { - "HEX": SD_SAGE_COLOR_BASE_MERCURY_50_HEX, - "CODE": SD_SAGE_COLOR_BASE_MERCURY_50_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_50_CLASSNAME, - }, "100": { "HEX": SD_SAGE_COLOR_BASE_MERCURY_100_HEX, "CODE": SD_SAGE_COLOR_BASE_MERCURY_100_CODE, @@ -553,6 +548,11 @@ module SageDictionary "CODE": SD_SAGE_COLOR_BASE_MERCURY_950_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_950_CLASSNAME, }, + "050": { + "HEX": SD_SAGE_COLOR_BASE_MERCURY_050_HEX, + "CODE": SD_SAGE_COLOR_BASE_MERCURY_050_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_MERCURY_050_CLASSNAME, + }, }, "PRIMARY": { "100": { @@ -609,11 +609,6 @@ module SageDictionary }, }, "YELLOW": { - "50": { - "HEX": SD_SAGE_COLOR_BASE_YELLOW_50_HEX, - "CODE": SD_SAGE_COLOR_BASE_YELLOW_50_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_50_CLASSNAME, - }, "100": { "HEX": SD_SAGE_COLOR_BASE_YELLOW_100_HEX, "CODE": SD_SAGE_COLOR_BASE_YELLOW_100_CODE, @@ -669,13 +664,13 @@ module SageDictionary "CODE": SD_SAGE_COLOR_BASE_YELLOW_950_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_950_CLASSNAME, }, + "050": { + "HEX": SD_SAGE_COLOR_BASE_YELLOW_050_HEX, + "CODE": SD_SAGE_COLOR_BASE_YELLOW_050_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_YELLOW_050_CLASSNAME, + }, }, "RED": { - "50": { - "HEX": SD_SAGE_COLOR_BASE_RED_50_HEX, - "CODE": SD_SAGE_COLOR_BASE_RED_50_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_RED_50_CLASSNAME, - }, "100": { "HEX": SD_SAGE_COLOR_BASE_RED_100_HEX, "CODE": SD_SAGE_COLOR_BASE_RED_100_CODE, @@ -731,6 +726,11 @@ module SageDictionary "CODE": SD_SAGE_COLOR_BASE_RED_950_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_RED_950_CLASSNAME, }, + "050": { + "HEX": SD_SAGE_COLOR_BASE_RED_050_HEX, + "CODE": SD_SAGE_COLOR_BASE_RED_050_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_RED_050_CLASSNAME, + }, }, "ORANGE": { "100": { @@ -760,11 +760,6 @@ module SageDictionary }, }, "PURPLE": { - "50": { - "HEX": SD_SAGE_COLOR_BASE_PURPLE_50_HEX, - "CODE": SD_SAGE_COLOR_BASE_PURPLE_50_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_50_CLASSNAME, - }, "100": { "HEX": SD_SAGE_COLOR_BASE_PURPLE_100_HEX, "CODE": SD_SAGE_COLOR_BASE_PURPLE_100_CODE, @@ -820,6 +815,11 @@ module SageDictionary "CODE": SD_SAGE_COLOR_BASE_PURPLE_950_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_950_CLASSNAME, }, + "050": { + "HEX": SD_SAGE_COLOR_BASE_PURPLE_050_HEX, + "CODE": SD_SAGE_COLOR_BASE_PURPLE_050_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_PURPLE_050_CLASSNAME, + }, }, "CHARCOAL": { "100": { @@ -849,11 +849,6 @@ module SageDictionary }, }, "GREY": { - "50": { - "HEX": SD_SAGE_COLOR_BASE_GREY_50_HEX, - "CODE": SD_SAGE_COLOR_BASE_GREY_50_CODE, - "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_50_CLASSNAME, - }, "100": { "HEX": SD_SAGE_COLOR_BASE_GREY_100_HEX, "CODE": SD_SAGE_COLOR_BASE_GREY_100_CODE, @@ -909,6 +904,11 @@ module SageDictionary "CODE": SD_SAGE_COLOR_BASE_GREY_950_CODE, "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_950_CLASSNAME, }, + "050": { + "HEX": SD_SAGE_COLOR_BASE_GREY_050_HEX, + "CODE": SD_SAGE_COLOR_BASE_GREY_050_CODE, + "CLASSNAME": SD_SAGE_COLOR_BASE_GREY_050_CLASSNAME, + }, }, "WHITE": { "100": { diff --git a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss index 6ec67d894b..f7a726fbb0 100644 --- a/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss +++ b/packages/sage-assets/lib/stylesheets/dictionary/_tokens.scss @@ -22,18 +22,6 @@ // Static vars for color base // /// -/// color color-base-blue-50-hex -/// -$sd-sage-color-base-blue-50-hex: #fafcff; -/// -/// color color-base-blue-50-code -/// -$sd-sage-color-base-blue-50-code: "blue-50"; -/// -/// color color-base-blue-50-classname -/// -$sd-sage-color-base-blue-50-classname: "t-sage--color-blue-50"; -/// /// color color-base-blue-100-hex /// $sd-sage-color-base-blue-100-hex: #eff6ff; @@ -166,17 +154,17 @@ $sd-sage-color-base-blue-950-code: "blue-950"; /// $sd-sage-color-base-blue-950-classname: "t-sage--color-blue-950"; /// -/// color color-base-green-50-hex +/// color color-base-blue-050-hex /// -$sd-sage-color-base-green-50-hex: #fbfefc; +$sd-sage-color-base-blue-050-hex: #fafcff; /// -/// color color-base-green-50-code +/// color color-base-blue-050-code /// -$sd-sage-color-base-green-50-code: "green-50"; +$sd-sage-color-base-blue-050-code: "blue-050"; /// -/// color color-base-green-50-classname +/// color color-base-blue-050-classname /// -$sd-sage-color-base-green-50-classname: "t-sage--color-green-50"; +$sd-sage-color-base-blue-050-classname: "t-sage--color-blue-050"; /// /// color color-base-green-100-hex /// @@ -310,17 +298,17 @@ $sd-sage-color-base-green-950-code: "green-950"; /// $sd-sage-color-base-green-950-classname: "t-sage--color-green-950"; /// -/// color color-base-mercury-50-hex +/// color color-base-green-050-hex /// -$sd-sage-color-base-mercury-50-hex: #fffcfa; +$sd-sage-color-base-green-050-hex: #fbfefc; /// -/// color color-base-mercury-50-code +/// color color-base-green-050-code /// -$sd-sage-color-base-mercury-50-code: "mercury-50"; +$sd-sage-color-base-green-050-code: "green-050"; /// -/// color color-base-mercury-50-classname +/// color color-base-green-050-classname /// -$sd-sage-color-base-mercury-50-classname: "t-sage--color-mercury-50"; +$sd-sage-color-base-green-050-classname: "t-sage--color-green-050"; /// /// color color-base-mercury-100-hex /// @@ -454,6 +442,18 @@ $sd-sage-color-base-mercury-950-code: "mercury-950"; /// $sd-sage-color-base-mercury-950-classname: "t-sage--color-mercury-950"; /// +/// color color-base-mercury-050-hex +/// +$sd-sage-color-base-mercury-050-hex: #fffcfa; +/// +/// color color-base-mercury-050-code +/// +$sd-sage-color-base-mercury-050-code: "mercury-050"; +/// +/// color color-base-mercury-050-classname +/// +$sd-sage-color-base-mercury-050-classname: "t-sage--color-mercury-050"; +/// /// color color-base-primary-100-hex /// $sd-sage-color-base-primary-100-hex: #dbe9fe; @@ -574,18 +574,6 @@ $sd-sage-color-base-sage-500-code: "sage-500"; /// $sd-sage-color-base-sage-500-classname: "t-sage--color-sage-500"; /// -/// color color-base-yellow-50-hex -/// -$sd-sage-color-base-yellow-50-hex: #fffefa; -/// -/// color color-base-yellow-50-code -/// -$sd-sage-color-base-yellow-50-code: "yellow-50"; -/// -/// color color-base-yellow-50-classname -/// -$sd-sage-color-base-yellow-50-classname: "t-sage--color-yellow-50"; -/// /// color color-base-yellow-100-hex /// $sd-sage-color-base-yellow-100-hex: #fffbeb; @@ -718,17 +706,17 @@ $sd-sage-color-base-yellow-950-code: "yellow-950"; /// $sd-sage-color-base-yellow-950-classname: "t-sage--color-yellow-950"; /// -/// color color-base-red-50-hex +/// color color-base-yellow-050-hex /// -$sd-sage-color-base-red-50-hex: #fffafa; +$sd-sage-color-base-yellow-050-hex: #fffefa; /// -/// color color-base-red-50-code +/// color color-base-yellow-050-code /// -$sd-sage-color-base-red-50-code: "red-50"; +$sd-sage-color-base-yellow-050-code: "yellow-050"; /// -/// color color-base-red-50-classname +/// color color-base-yellow-050-classname /// -$sd-sage-color-base-red-50-classname: "t-sage--color-red-50"; +$sd-sage-color-base-yellow-050-classname: "t-sage--color-yellow-050"; /// /// color color-base-red-100-hex /// @@ -862,6 +850,18 @@ $sd-sage-color-base-red-950-code: "red-950"; /// $sd-sage-color-base-red-950-classname: "t-sage--color-red-950"; /// +/// color color-base-red-050-hex +/// +$sd-sage-color-base-red-050-hex: #fffafa; +/// +/// color color-base-red-050-code +/// +$sd-sage-color-base-red-050-code: "red-050"; +/// +/// color color-base-red-050-classname +/// +$sd-sage-color-base-red-050-classname: "t-sage--color-red-050"; +/// /// color color-base-orange-100-hex /// $sd-sage-color-base-orange-100-hex: #ffe3d4; @@ -922,18 +922,6 @@ $sd-sage-color-base-orange-500-code: "orange-500"; /// $sd-sage-color-base-orange-500-classname: "t-sage--color-orange-500"; /// -/// color color-base-purple-50-hex -/// -$sd-sage-color-base-purple-50-hex: #fafbff; -/// -/// color color-base-purple-50-code -/// -$sd-sage-color-base-purple-50-code: "purple-50"; -/// -/// color color-base-purple-50-classname -/// -$sd-sage-color-base-purple-50-classname: "t-sage--color-purple-50"; -/// /// color color-base-purple-100-hex /// $sd-sage-color-base-purple-100-hex: #edf1ff; @@ -1066,6 +1054,18 @@ $sd-sage-color-base-purple-950-code: "purple-950"; /// $sd-sage-color-base-purple-950-classname: "t-sage--color-purple-950"; /// +/// color color-base-purple-050-hex +/// +$sd-sage-color-base-purple-050-hex: #fafbff; +/// +/// color color-base-purple-050-code +/// +$sd-sage-color-base-purple-050-code: "purple-050"; +/// +/// color color-base-purple-050-classname +/// +$sd-sage-color-base-purple-050-classname: "t-sage--color-purple-050"; +/// /// color color-base-charcoal-100-hex /// $sd-sage-color-base-charcoal-100-hex: #828180; @@ -1126,18 +1126,6 @@ $sd-sage-color-base-charcoal-500-code: "charcoal-500"; /// $sd-sage-color-base-charcoal-500-classname: "t-sage--color-charcoal-500"; /// -/// color color-base-grey-50-hex -/// -$sd-sage-color-base-grey-50-hex: #fcfcfc; -/// -/// color color-base-grey-50-code -/// -$sd-sage-color-base-grey-50-code: "grey-50"; -/// -/// color color-base-grey-50-classname -/// -$sd-sage-color-base-grey-50-classname: "t-sage--color-grey-50"; -/// /// color color-base-grey-100-hex /// $sd-sage-color-base-grey-100-hex: #f8f8f8; @@ -1270,6 +1258,18 @@ $sd-sage-color-base-grey-950-code: "grey-950"; /// $sd-sage-color-base-grey-950-classname: "t-sage--color-grey-950"; /// +/// color color-base-grey-050-hex +/// +$sd-sage-color-base-grey-050-hex: #fcfcfc; +/// +/// color color-base-grey-050-code +/// +$sd-sage-color-base-grey-050-code: "grey-050"; +/// +/// color color-base-grey-050-classname +/// +$sd-sage-color-base-grey-050-classname: "t-sage--color-grey-050"; +/// /// color color-base-white-100-hex /// $sd-sage-color-base-white-100-hex: #fff; @@ -1395,11 +1395,6 @@ $sd-sage-color-base-black-500-classname: "t-sage--color-black-500"; /// $sd-sage-color: ( blue: ( - 50: ( - hex: $sd-sage-color-base-blue-50-hex, - code: $sd-sage-color-base-blue-50-code, - classname: $sd-sage-color-base-blue-50-classname, - ), 100: ( hex: $sd-sage-color-base-blue-100-hex, code: $sd-sage-color-base-blue-100-code, @@ -1455,13 +1450,13 @@ $sd-sage-color: ( code: $sd-sage-color-base-blue-950-code, classname: $sd-sage-color-base-blue-950-classname, ), + 050: ( + hex: $sd-sage-color-base-blue-050-hex, + code: $sd-sage-color-base-blue-050-code, + classname: $sd-sage-color-base-blue-050-classname, + ), ), green: ( - 50: ( - hex: $sd-sage-color-base-green-50-hex, - code: $sd-sage-color-base-green-50-code, - classname: $sd-sage-color-base-green-50-classname, - ), 100: ( hex: $sd-sage-color-base-green-100-hex, code: $sd-sage-color-base-green-100-code, @@ -1517,13 +1512,13 @@ $sd-sage-color: ( code: $sd-sage-color-base-green-950-code, classname: $sd-sage-color-base-green-950-classname, ), + 050: ( + hex: $sd-sage-color-base-green-050-hex, + code: $sd-sage-color-base-green-050-code, + classname: $sd-sage-color-base-green-050-classname, + ), ), mercury: ( - 50: ( - hex: $sd-sage-color-base-mercury-50-hex, - code: $sd-sage-color-base-mercury-50-code, - classname: $sd-sage-color-base-mercury-50-classname, - ), 100: ( hex: $sd-sage-color-base-mercury-100-hex, code: $sd-sage-color-base-mercury-100-code, @@ -1579,6 +1574,11 @@ $sd-sage-color: ( code: $sd-sage-color-base-mercury-950-code, classname: $sd-sage-color-base-mercury-950-classname, ), + 050: ( + hex: $sd-sage-color-base-mercury-050-hex, + code: $sd-sage-color-base-mercury-050-code, + classname: $sd-sage-color-base-mercury-050-classname, + ), ), primary: ( 100: ( @@ -1635,11 +1635,6 @@ $sd-sage-color: ( ), ), yellow: ( - 50: ( - hex: $sd-sage-color-base-yellow-50-hex, - code: $sd-sage-color-base-yellow-50-code, - classname: $sd-sage-color-base-yellow-50-classname, - ), 100: ( hex: $sd-sage-color-base-yellow-100-hex, code: $sd-sage-color-base-yellow-100-code, @@ -1695,13 +1690,13 @@ $sd-sage-color: ( code: $sd-sage-color-base-yellow-950-code, classname: $sd-sage-color-base-yellow-950-classname, ), + 050: ( + hex: $sd-sage-color-base-yellow-050-hex, + code: $sd-sage-color-base-yellow-050-code, + classname: $sd-sage-color-base-yellow-050-classname, + ), ), red: ( - 50: ( - hex: $sd-sage-color-base-red-50-hex, - code: $sd-sage-color-base-red-50-code, - classname: $sd-sage-color-base-red-50-classname, - ), 100: ( hex: $sd-sage-color-base-red-100-hex, code: $sd-sage-color-base-red-100-code, @@ -1757,6 +1752,11 @@ $sd-sage-color: ( code: $sd-sage-color-base-red-950-code, classname: $sd-sage-color-base-red-950-classname, ), + 050: ( + hex: $sd-sage-color-base-red-050-hex, + code: $sd-sage-color-base-red-050-code, + classname: $sd-sage-color-base-red-050-classname, + ), ), orange: ( 100: ( @@ -1786,11 +1786,6 @@ $sd-sage-color: ( ), ), purple: ( - 50: ( - hex: $sd-sage-color-base-purple-50-hex, - code: $sd-sage-color-base-purple-50-code, - classname: $sd-sage-color-base-purple-50-classname, - ), 100: ( hex: $sd-sage-color-base-purple-100-hex, code: $sd-sage-color-base-purple-100-code, @@ -1846,6 +1841,11 @@ $sd-sage-color: ( code: $sd-sage-color-base-purple-950-code, classname: $sd-sage-color-base-purple-950-classname, ), + 050: ( + hex: $sd-sage-color-base-purple-050-hex, + code: $sd-sage-color-base-purple-050-code, + classname: $sd-sage-color-base-purple-050-classname, + ), ), charcoal: ( 100: ( @@ -1875,11 +1875,6 @@ $sd-sage-color: ( ), ), grey: ( - 50: ( - hex: $sd-sage-color-base-grey-50-hex, - code: $sd-sage-color-base-grey-50-code, - classname: $sd-sage-color-base-grey-50-classname, - ), 100: ( hex: $sd-sage-color-base-grey-100-hex, code: $sd-sage-color-base-grey-100-code, @@ -1935,6 +1930,11 @@ $sd-sage-color: ( code: $sd-sage-color-base-grey-950-code, classname: $sd-sage-color-base-grey-950-classname, ), + 050: ( + hex: $sd-sage-color-base-grey-050-hex, + code: $sd-sage-color-base-grey-050-code, + classname: $sd-sage-color-base-grey-050-classname, + ), ), white: ( 100: ( diff --git a/packages/sage-react/lib/configs/dictionary/tokens.js b/packages/sage-react/lib/configs/dictionary/tokens.js index c939248904..af0c112b98 100644 --- a/packages/sage-react/lib/configs/dictionary/tokens.js +++ b/packages/sage-react/lib/configs/dictionary/tokens.js @@ -19,9 +19,6 @@ // // Static vars for COLOR BASE // -export const COLOR_BASE_BLUE_50_HEX = '#fafcff'; -export const COLOR_BASE_BLUE_50_CODE = 'blue-50'; -export const COLOR_BASE_BLUE_50_CLASSNAME = 't-sage--color-blue-50'; export const COLOR_BASE_BLUE_100_HEX = '#eff6ff'; export const COLOR_BASE_BLUE_100_CODE = 'blue-100'; export const COLOR_BASE_BLUE_100_CLASSNAME = 't-sage--color-blue-100'; @@ -55,9 +52,9 @@ export const COLOR_BASE_BLUE_900_CLASSNAME = 't-sage--color-blue-900'; export const COLOR_BASE_BLUE_950_HEX = '#172554'; export const COLOR_BASE_BLUE_950_CODE = 'blue-950'; export const COLOR_BASE_BLUE_950_CLASSNAME = 't-sage--color-blue-950'; -export const COLOR_BASE_GREEN_50_HEX = '#fbfefc'; -export const COLOR_BASE_GREEN_50_CODE = 'green-50'; -export const COLOR_BASE_GREEN_50_CLASSNAME = 't-sage--color-green-50'; +export const COLOR_BASE_BLUE_050_HEX = '#fafcff'; +export const COLOR_BASE_BLUE_050_CODE = 'blue-050'; +export const COLOR_BASE_BLUE_050_CLASSNAME = 't-sage--color-blue-050'; export const COLOR_BASE_GREEN_100_HEX = '#edfcf2'; export const COLOR_BASE_GREEN_100_CODE = 'green-100'; export const COLOR_BASE_GREEN_100_CLASSNAME = 't-sage--color-green-100'; @@ -91,9 +88,9 @@ export const COLOR_BASE_GREEN_900_CLASSNAME = 't-sage--color-green-900'; export const COLOR_BASE_GREEN_950_HEX = '#052e1c'; export const COLOR_BASE_GREEN_950_CODE = 'green-950'; export const COLOR_BASE_GREEN_950_CLASSNAME = 't-sage--color-green-950'; -export const COLOR_BASE_MERCURY_50_HEX = '#fffcfa'; -export const COLOR_BASE_MERCURY_50_CODE = 'mercury-50'; -export const COLOR_BASE_MERCURY_50_CLASSNAME = 't-sage--color-mercury-50'; +export const COLOR_BASE_GREEN_050_HEX = '#fbfefc'; +export const COLOR_BASE_GREEN_050_CODE = 'green-050'; +export const COLOR_BASE_GREEN_050_CLASSNAME = 't-sage--color-green-050'; export const COLOR_BASE_MERCURY_100_HEX = '#fff3ed'; export const COLOR_BASE_MERCURY_100_CODE = 'mercury-100'; export const COLOR_BASE_MERCURY_100_CLASSNAME = 't-sage--color-mercury-100'; @@ -127,6 +124,9 @@ export const COLOR_BASE_MERCURY_900_CLASSNAME = 't-sage--color-mercury-900'; export const COLOR_BASE_MERCURY_950_HEX = '#450506'; export const COLOR_BASE_MERCURY_950_CODE = 'mercury-950'; export const COLOR_BASE_MERCURY_950_CLASSNAME = 't-sage--color-mercury-950'; +export const COLOR_BASE_MERCURY_050_HEX = '#fffcfa'; +export const COLOR_BASE_MERCURY_050_CODE = 'mercury-050'; +export const COLOR_BASE_MERCURY_050_CLASSNAME = 't-sage--color-mercury-050'; export const COLOR_BASE_PRIMARY_100_HEX = '#dbe9fe'; export const COLOR_BASE_PRIMARY_100_CODE = 'primary-100'; export const COLOR_BASE_PRIMARY_100_CLASSNAME = 't-sage--color-primary-100'; @@ -157,9 +157,6 @@ export const COLOR_BASE_SAGE_400_CLASSNAME = 't-sage--color-sage-400'; export const COLOR_BASE_SAGE_500_HEX = '#052e1c'; export const COLOR_BASE_SAGE_500_CODE = 'sage-500'; export const COLOR_BASE_SAGE_500_CLASSNAME = 't-sage--color-sage-500'; -export const COLOR_BASE_YELLOW_50_HEX = '#fffefa'; -export const COLOR_BASE_YELLOW_50_CODE = 'yellow-50'; -export const COLOR_BASE_YELLOW_50_CLASSNAME = 't-sage--color-yellow-50'; export const COLOR_BASE_YELLOW_100_HEX = '#fffbeb'; export const COLOR_BASE_YELLOW_100_CODE = 'yellow-100'; export const COLOR_BASE_YELLOW_100_CLASSNAME = 't-sage--color-yellow-100'; @@ -193,9 +190,9 @@ export const COLOR_BASE_YELLOW_900_CLASSNAME = 't-sage--color-yellow-900'; export const COLOR_BASE_YELLOW_950_HEX = '#451902'; export const COLOR_BASE_YELLOW_950_CODE = 'yellow-950'; export const COLOR_BASE_YELLOW_950_CLASSNAME = 't-sage--color-yellow-950'; -export const COLOR_BASE_RED_50_HEX = '#fffafa'; -export const COLOR_BASE_RED_50_CODE = 'red-50'; -export const COLOR_BASE_RED_50_CLASSNAME = 't-sage--color-red-50'; +export const COLOR_BASE_YELLOW_050_HEX = '#fffefa'; +export const COLOR_BASE_YELLOW_050_CODE = 'yellow-050'; +export const COLOR_BASE_YELLOW_050_CLASSNAME = 't-sage--color-yellow-050'; export const COLOR_BASE_RED_100_HEX = '#fef2f2'; export const COLOR_BASE_RED_100_CODE = 'red-100'; export const COLOR_BASE_RED_100_CLASSNAME = 't-sage--color-red-100'; @@ -229,6 +226,9 @@ export const COLOR_BASE_RED_900_CLASSNAME = 't-sage--color-red-900'; export const COLOR_BASE_RED_950_HEX = '#572627'; export const COLOR_BASE_RED_950_CODE = 'red-950'; export const COLOR_BASE_RED_950_CLASSNAME = 't-sage--color-red-950'; +export const COLOR_BASE_RED_050_HEX = '#fffafa'; +export const COLOR_BASE_RED_050_CODE = 'red-050'; +export const COLOR_BASE_RED_050_CLASSNAME = 't-sage--color-red-050'; export const COLOR_BASE_ORANGE_100_HEX = '#ffe3d4'; export const COLOR_BASE_ORANGE_100_CODE = 'orange-100'; export const COLOR_BASE_ORANGE_100_CLASSNAME = 't-sage--color-orange-100'; @@ -244,9 +244,6 @@ export const COLOR_BASE_ORANGE_400_CLASSNAME = 't-sage--color-orange-400'; export const COLOR_BASE_ORANGE_500_HEX = '#450506'; export const COLOR_BASE_ORANGE_500_CODE = 'orange-500'; export const COLOR_BASE_ORANGE_500_CLASSNAME = 't-sage--color-orange-500'; -export const COLOR_BASE_PURPLE_50_HEX = '#fafbff'; -export const COLOR_BASE_PURPLE_50_CODE = 'purple-50'; -export const COLOR_BASE_PURPLE_50_CLASSNAME = 't-sage--color-purple-50'; export const COLOR_BASE_PURPLE_100_HEX = '#edf1ff'; export const COLOR_BASE_PURPLE_100_CODE = 'purple-100'; export const COLOR_BASE_PURPLE_100_CLASSNAME = 't-sage--color-purple-100'; @@ -280,6 +277,9 @@ export const COLOR_BASE_PURPLE_900_CLASSNAME = 't-sage--color-purple-900'; export const COLOR_BASE_PURPLE_950_HEX = '#221b4b'; export const COLOR_BASE_PURPLE_950_CODE = 'purple-950'; export const COLOR_BASE_PURPLE_950_CLASSNAME = 't-sage--color-purple-950'; +export const COLOR_BASE_PURPLE_050_HEX = '#fafbff'; +export const COLOR_BASE_PURPLE_050_CODE = 'purple-050'; +export const COLOR_BASE_PURPLE_050_CLASSNAME = 't-sage--color-purple-050'; export const COLOR_BASE_CHARCOAL_100_HEX = '#828180'; export const COLOR_BASE_CHARCOAL_100_CODE = 'charcoal-100'; export const COLOR_BASE_CHARCOAL_100_CLASSNAME = 't-sage--color-charcoal-100'; @@ -295,9 +295,6 @@ export const COLOR_BASE_CHARCOAL_400_CLASSNAME = 't-sage--color-charcoal-400'; export const COLOR_BASE_CHARCOAL_500_HEX = '#1a1a19'; export const COLOR_BASE_CHARCOAL_500_CODE = 'charcoal-500'; export const COLOR_BASE_CHARCOAL_500_CLASSNAME = 't-sage--color-charcoal-500'; -export const COLOR_BASE_GREY_50_HEX = '#fcfcfc'; -export const COLOR_BASE_GREY_50_CODE = 'grey-50'; -export const COLOR_BASE_GREY_50_CLASSNAME = 't-sage--color-grey-50'; export const COLOR_BASE_GREY_100_HEX = '#f8f8f8'; export const COLOR_BASE_GREY_100_CODE = 'grey-100'; export const COLOR_BASE_GREY_100_CLASSNAME = 't-sage--color-grey-100'; @@ -331,6 +328,9 @@ export const COLOR_BASE_GREY_900_CLASSNAME = 't-sage--color-grey-900'; export const COLOR_BASE_GREY_950_HEX = '#1a1a19'; export const COLOR_BASE_GREY_950_CODE = 'grey-950'; export const COLOR_BASE_GREY_950_CLASSNAME = 't-sage--color-grey-950'; +export const COLOR_BASE_GREY_050_HEX = '#fcfcfc'; +export const COLOR_BASE_GREY_050_CODE = 'grey-050'; +export const COLOR_BASE_GREY_050_CLASSNAME = 't-sage--color-grey-050'; export const COLOR_BASE_WHITE_100_HEX = '#fff'; export const COLOR_BASE_WHITE_100_CODE = 'white-100'; export const COLOR_BASE_WHITE_100_CLASSNAME = 't-sage--color-white-100'; @@ -367,11 +367,6 @@ export const COLOR_BASE_BLACK_500_CLASSNAME = 't-sage--color-black-500'; // export const COLOR = { BLUE: { - 50: { - HEX: COLOR_BASE_BLUE_50_HEX, - CODE: COLOR_BASE_BLUE_50_CODE, - CLASSNAME: COLOR_BASE_BLUE_50_CLASSNAME, - }, 100: { HEX: COLOR_BASE_BLUE_100_HEX, CODE: COLOR_BASE_BLUE_100_CODE, @@ -427,13 +422,13 @@ export const COLOR = { CODE: COLOR_BASE_BLUE_950_CODE, CLASSNAME: COLOR_BASE_BLUE_950_CLASSNAME, }, + '050': { + HEX: COLOR_BASE_BLUE_050_HEX, + CODE: COLOR_BASE_BLUE_050_CODE, + CLASSNAME: COLOR_BASE_BLUE_050_CLASSNAME, + }, }, GREEN: { - 50: { - HEX: COLOR_BASE_GREEN_50_HEX, - CODE: COLOR_BASE_GREEN_50_CODE, - CLASSNAME: COLOR_BASE_GREEN_50_CLASSNAME, - }, 100: { HEX: COLOR_BASE_GREEN_100_HEX, CODE: COLOR_BASE_GREEN_100_CODE, @@ -489,13 +484,13 @@ export const COLOR = { CODE: COLOR_BASE_GREEN_950_CODE, CLASSNAME: COLOR_BASE_GREEN_950_CLASSNAME, }, + '050': { + HEX: COLOR_BASE_GREEN_050_HEX, + CODE: COLOR_BASE_GREEN_050_CODE, + CLASSNAME: COLOR_BASE_GREEN_050_CLASSNAME, + }, }, MERCURY: { - 50: { - HEX: COLOR_BASE_MERCURY_50_HEX, - CODE: COLOR_BASE_MERCURY_50_CODE, - CLASSNAME: COLOR_BASE_MERCURY_50_CLASSNAME, - }, 100: { HEX: COLOR_BASE_MERCURY_100_HEX, CODE: COLOR_BASE_MERCURY_100_CODE, @@ -551,6 +546,11 @@ export const COLOR = { CODE: COLOR_BASE_MERCURY_950_CODE, CLASSNAME: COLOR_BASE_MERCURY_950_CLASSNAME, }, + '050': { + HEX: COLOR_BASE_MERCURY_050_HEX, + CODE: COLOR_BASE_MERCURY_050_CODE, + CLASSNAME: COLOR_BASE_MERCURY_050_CLASSNAME, + }, }, PRIMARY: { 100: { @@ -607,11 +607,6 @@ export const COLOR = { }, }, YELLOW: { - 50: { - HEX: COLOR_BASE_YELLOW_50_HEX, - CODE: COLOR_BASE_YELLOW_50_CODE, - CLASSNAME: COLOR_BASE_YELLOW_50_CLASSNAME, - }, 100: { HEX: COLOR_BASE_YELLOW_100_HEX, CODE: COLOR_BASE_YELLOW_100_CODE, @@ -667,13 +662,13 @@ export const COLOR = { CODE: COLOR_BASE_YELLOW_950_CODE, CLASSNAME: COLOR_BASE_YELLOW_950_CLASSNAME, }, + '050': { + HEX: COLOR_BASE_YELLOW_050_HEX, + CODE: COLOR_BASE_YELLOW_050_CODE, + CLASSNAME: COLOR_BASE_YELLOW_050_CLASSNAME, + }, }, RED: { - 50: { - HEX: COLOR_BASE_RED_50_HEX, - CODE: COLOR_BASE_RED_50_CODE, - CLASSNAME: COLOR_BASE_RED_50_CLASSNAME, - }, 100: { HEX: COLOR_BASE_RED_100_HEX, CODE: COLOR_BASE_RED_100_CODE, @@ -729,6 +724,11 @@ export const COLOR = { CODE: COLOR_BASE_RED_950_CODE, CLASSNAME: COLOR_BASE_RED_950_CLASSNAME, }, + '050': { + HEX: COLOR_BASE_RED_050_HEX, + CODE: COLOR_BASE_RED_050_CODE, + CLASSNAME: COLOR_BASE_RED_050_CLASSNAME, + }, }, ORANGE: { 100: { @@ -758,11 +758,6 @@ export const COLOR = { }, }, PURPLE: { - 50: { - HEX: COLOR_BASE_PURPLE_50_HEX, - CODE: COLOR_BASE_PURPLE_50_CODE, - CLASSNAME: COLOR_BASE_PURPLE_50_CLASSNAME, - }, 100: { HEX: COLOR_BASE_PURPLE_100_HEX, CODE: COLOR_BASE_PURPLE_100_CODE, @@ -818,6 +813,11 @@ export const COLOR = { CODE: COLOR_BASE_PURPLE_950_CODE, CLASSNAME: COLOR_BASE_PURPLE_950_CLASSNAME, }, + '050': { + HEX: COLOR_BASE_PURPLE_050_HEX, + CODE: COLOR_BASE_PURPLE_050_CODE, + CLASSNAME: COLOR_BASE_PURPLE_050_CLASSNAME, + }, }, CHARCOAL: { 100: { @@ -847,11 +847,6 @@ export const COLOR = { }, }, GREY: { - 50: { - HEX: COLOR_BASE_GREY_50_HEX, - CODE: COLOR_BASE_GREY_50_CODE, - CLASSNAME: COLOR_BASE_GREY_50_CLASSNAME, - }, 100: { HEX: COLOR_BASE_GREY_100_HEX, CODE: COLOR_BASE_GREY_100_CODE, @@ -907,6 +902,11 @@ export const COLOR = { CODE: COLOR_BASE_GREY_950_CODE, CLASSNAME: COLOR_BASE_GREY_950_CLASSNAME, }, + '050': { + HEX: COLOR_BASE_GREY_050_HEX, + CODE: COLOR_BASE_GREY_050_CODE, + CLASSNAME: COLOR_BASE_GREY_050_CLASSNAME, + }, }, WHITE: { 100: { diff --git a/style-dictionary/bin/templating.js b/style-dictionary/bin/templating.js index 43243efe3f..da65211e46 100644 --- a/style-dictionary/bin/templating.js +++ b/style-dictionary/bin/templating.js @@ -112,6 +112,13 @@ Handlebars.registerHelper('lowercase', function (value) { }); +Handlebars.registerHelper('startsWithZero', function(value, options) { + if (value && value.toString().startsWith('0')) { + return "'" + value.toString() + "'"; + } + return value; +}); + // // Templates compilation // diff --git a/style-dictionary/templates/presets/jsx/tokens.hbs b/style-dictionary/templates/presets/jsx/tokens.hbs index d7bf41a20c..f265d01ba8 100644 --- a/style-dictionary/templates/presets/jsx/tokens.hbs +++ b/style-dictionary/templates/presets/jsx/tokens.hbs @@ -34,13 +34,13 @@ export const {{constantCase ../category}}{{#if (notBaseType type)}}_{{constantCa {{constantCase item}}: { {{#each subitems}} {{#if (hasAny states)}} - {{constantCase subitem}}: { + {{{ startsWithZero (constantCase subitem) }}}: { {{#each states}} - {{constantCase state}}: {{name}}, + {{{startsWithZero (constantCase state) }}}: {{name}}, {{/each}} }, {{else}} - {{constantCase subitem}}: {{name}}, + {{{startsWithZero (constantCase subitem)}}}: {{name}}, {{/if}} {{/each}} }, diff --git a/style-dictionary/tokens/color/base.json b/style-dictionary/tokens/color/base.json index 26da3031af..bf918421b3 100644 --- a/style-dictionary/tokens/color/base.json +++ b/style-dictionary/tokens/color/base.json @@ -2,10 +2,10 @@ "color": { "base": { "blue": { - "50": { + "050": { "hex": { "value": "#fafcff" }, - "code": { "value": "blue-50" }, - "classname": { "value": "t-sage--color-blue-50" } + "code": { "value": "blue-050" }, + "classname": { "value": "t-sage--color-blue-050" } }, "100": { "hex": { "value": "#eff6ff" }, @@ -64,10 +64,10 @@ } }, "green": { - "50": { + "050": { "hex": { "value": "#fbfefc" }, - "code": { "value": "green-50" }, - "classname": { "value": "t-sage--color-green-50" } + "code": { "value": "green-050" }, + "classname": { "value": "t-sage--color-green-050" } }, "100": { "hex": { "value": "#edfcf2" }, @@ -126,10 +126,10 @@ } }, "mercury": { - "50": { + "050": { "hex": { "value": "#fffcfa" }, - "code": { "value": "mercury-50" }, - "classname": { "value": "t-sage--color-mercury-50" } + "code": { "value": "mercury-050" }, + "classname": { "value": "t-sage--color-mercury-050" } }, "100": { "hex": { "value": "#fff3ed" }, @@ -242,10 +242,10 @@ } }, "yellow": { - "50": { + "050": { "hex": { "value": "#fffefa" }, - "code": { "value": "yellow-50" }, - "classname": { "value": "t-sage--color-yellow-50" } + "code": { "value": "yellow-050" }, + "classname": { "value": "t-sage--color-yellow-050" } }, "100": { "hex": { "value": "#fffbeb" }, @@ -304,10 +304,10 @@ } }, "red": { - "50": { + "050": { "hex": { "value": "#fffafa" }, - "code": { "value": "red-50" }, - "classname": { "value": "t-sage--color-red-50" } + "code": { "value": "red-050" }, + "classname": { "value": "t-sage--color-red-050" } }, "100": { "hex": { "value": "#fef2f2" }, @@ -393,10 +393,10 @@ } }, "purple": { - "50": { + "050": { "hex": { "value": "#fafbff" }, - "code": { "value": "purple-50" }, - "classname": { "value": "t-sage--color-purple-50" } + "code": { "value": "purple-050" }, + "classname": { "value": "t-sage--color-purple-050" } }, "100": { "hex": { "value": "#edf1ff" }, @@ -482,10 +482,10 @@ } }, "grey": { - "50": { + "050": { "hex": { "value": "#fcfcfc" }, - "code": { "value": "grey-50" }, - "classname": { "value": "t-sage--color-grey-50" } + "code": { "value": "grey-050" }, + "classname": { "value": "t-sage--color-grey-050" } }, "100": { "hex": { "value": "#f8f8f8" },