@lifesg/react-design-system 3.4.0-canary.5 → 3.4.0-canary.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/badge/badge.style.d.ts +3 -3
- package/badge/badge.style.js +8 -8
- package/badge/badge.style.js.map +1 -1
- package/badge/types.d.ts +1 -1
- package/cjs/badge/badge.style.js +11 -11
- package/cjs/badge/badge.style.js.map +1 -1
- package/cjs/date-input/date-input.js +1 -1
- package/cjs/date-input/date-input.js.map +1 -1
- package/cjs/filter/filter-badge.js +2 -0
- package/cjs/filter/filter-badge.js.map +1 -0
- package/cjs/filter/filter-modal.js +1 -1
- package/cjs/filter/filter-modal.js.map +1 -1
- package/cjs/filter/filter-modal.styles.js +20 -12
- package/cjs/filter/filter-modal.styles.js.map +1 -1
- package/cjs/filter/filter-sidebar.js +1 -1
- package/cjs/filter/filter-sidebar.js.map +1 -1
- package/cjs/filter/filter-sidebar.styles.js +19 -14
- package/cjs/filter/filter-sidebar.styles.js.map +1 -1
- package/cjs/form/form-wrapper.js +1 -1
- package/cjs/form/form-wrapper.js.map +1 -1
- package/cjs/index.js +1 -1
- package/cjs/shared/standalone-date-input/standalone-date-input.js +1 -1
- package/cjs/shared/standalone-date-input/standalone-date-input.js.map +1 -1
- package/cjs/shared/standalone-date-input/standalone-date-input.style.js +19 -16
- package/cjs/shared/standalone-date-input/standalone-date-input.style.js.map +1 -1
- package/cjs/theme/colour-primitive/specs/careercompass-colour-set.js +2 -0
- package/cjs/theme/colour-primitive/specs/careercompass-colour-set.js.map +1 -0
- package/cjs/theme/colour-primitive/theme-helper.js +1 -1
- package/cjs/theme/colour-primitive/theme-helper.js.map +1 -1
- package/cjs/theme/colour-semantic/specs/a11yplayground-semantic-tokens.js +1 -1
- package/cjs/theme/colour-semantic/specs/a11yplayground-semantic-tokens.js.map +1 -1
- package/cjs/theme/colour-semantic/specs/lifesg-semantic-tokens.js +1 -1
- package/cjs/theme/colour-semantic/specs/lifesg-semantic-tokens.js.map +1 -1
- package/cjs/theme/colour-semantic/specs/pa-semantic-tokens.js +1 -1
- package/cjs/theme/colour-semantic/specs/pa-semantic-tokens.js.map +1 -1
- package/cjs/theme/colour-semantic/specs/sgwdigitallobby-tokens.js +1 -1
- package/cjs/theme/colour-semantic/specs/sgwdigitallobby-tokens.js.map +1 -1
- package/cjs/theme/colour-semantic/theme-helper.js +1 -1
- package/cjs/theme/colour-semantic/theme-helper.js.map +1 -1
- package/cjs/theme/index.js +1 -1
- package/cjs/theme/index.js.map +1 -1
- package/cjs/timepicker/timepicker.js +1 -1
- package/cjs/timepicker/timepicker.js.map +1 -1
- package/cjs/timepicker/timepicker.styles.js +4 -3
- package/cjs/timepicker/timepicker.styles.js.map +1 -1
- package/date-input/date-input.js +1 -1
- package/date-input/date-input.js.map +1 -1
- package/filter/filter-badge.d.ts +5 -0
- package/filter/filter-badge.js +2 -0
- package/filter/filter-badge.js.map +1 -0
- package/filter/filter-modal.d.ts +1 -1
- package/filter/filter-modal.js +1 -1
- package/filter/filter-modal.js.map +1 -1
- package/filter/filter-modal.styles.d.ts +2 -0
- package/filter/filter-modal.styles.js +24 -16
- package/filter/filter-modal.styles.js.map +1 -1
- package/filter/filter-sidebar.d.ts +1 -1
- package/filter/filter-sidebar.js +1 -1
- package/filter/filter-sidebar.js.map +1 -1
- package/filter/filter-sidebar.styles.d.ts +1 -0
- package/filter/filter-sidebar.styles.js +19 -14
- package/filter/filter-sidebar.styles.js.map +1 -1
- package/filter/filter.d.ts +2 -2
- package/filter/types.d.ts +1 -0
- package/form/form-wrapper.js +1 -1
- package/form/form-wrapper.js.map +1 -1
- package/index.js +1 -1
- package/package.json +1 -1
- package/shared/standalone-date-input/standalone-date-input.js +1 -1
- package/shared/standalone-date-input/standalone-date-input.js.map +1 -1
- package/shared/standalone-date-input/standalone-date-input.style.d.ts +2 -1
- package/shared/standalone-date-input/standalone-date-input.style.js +20 -17
- package/shared/standalone-date-input/standalone-date-input.style.js.map +1 -1
- package/theme/colour-primitive/specs/careercompass-colour-set.d.ts +3 -0
- package/theme/colour-primitive/specs/careercompass-colour-set.js +2 -0
- package/theme/colour-primitive/specs/careercompass-colour-set.js.map +1 -0
- package/theme/colour-primitive/theme-helper.js +1 -1
- package/theme/colour-primitive/theme-helper.js.map +1 -1
- package/theme/colour-semantic/specs/a11yplayground-semantic-tokens.js +1 -1
- package/theme/colour-semantic/specs/a11yplayground-semantic-tokens.js.map +1 -1
- package/theme/colour-semantic/specs/lifesg-semantic-tokens.js +1 -1
- package/theme/colour-semantic/specs/lifesg-semantic-tokens.js.map +1 -1
- package/theme/colour-semantic/specs/pa-semantic-tokens.js +1 -1
- package/theme/colour-semantic/specs/pa-semantic-tokens.js.map +1 -1
- package/theme/colour-semantic/specs/sgwdigitallobby-tokens.js +1 -1
- package/theme/colour-semantic/specs/sgwdigitallobby-tokens.js.map +1 -1
- package/theme/colour-semantic/theme-helper.js +1 -1
- package/theme/colour-semantic/theme-helper.js.map +1 -1
- package/theme/colour-semantic/types.d.ts +8 -0
- package/theme/index.d.ts +27 -0
- package/theme/index.js +1 -1
- package/theme/index.js.map +1 -1
- package/theme/types.d.ts +2 -2
- package/timepicker/timepicker.js +1 -1
- package/timepicker/timepicker.js.map +1 -1
- package/timepicker/timepicker.styles.d.ts +6 -2
- package/timepicker/timepicker.styles.js +3 -2
- package/timepicker/timepicker.styles.js.map +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"theme-helper.js","sources":["../../../src/theme/colour-semantic/theme-helper.ts"],"sourcesContent":["import { StyledComponentProps, getCollection, getValue } from \"../helpers\";\nimport { ThemeCollectionSpec } from \"../internal-types\";\nimport { ColourScheme, SemanticColourSet } from \"../types\";\nimport {\n LifeSGColourSet,\n LifeSGDarkColourSet,\n} from \"./specs/lifesg-semantic-tokens\";\nimport { PAColourSet } from \"./specs/pa-semantic-tokens\";\nimport {\n A11yPlaygroundColourSet,\n A11yPlaygroundDarkColourSet,\n} from \"./specs/a11yplayground-semantic-tokens\";\nimport { SemanticColourCollectionMap } from \"./types\";\nimport {\n SGWDigitalLobbyColourSet,\n SGWDigitalLobbyDarkColourSet,\n} from \"./specs/sgwdigitallobby-tokens\";\n\nexport const ColourSpec: ThemeCollectionSpec<\n SemanticColourCollectionMap,\n ColourScheme\n> = {\n collections: {\n lifesg: LifeSGColourSet,\n bookingsg: LifeSGColourSet,\n rbs: LifeSGColourSet,\n mylegacy: LifeSGColourSet,\n ccube: LifeSGColourSet,\n oneservice: LifeSGColourSet,\n pa: PAColourSet,\n a11yplayground: A11yPlaygroundColourSet,\n supportgowhere: LifeSGColourSet,\n sgwdigitallobby: SGWDigitalLobbyColourSet,\n imda: LifeSGColourSet,\n spf: LifeSGColourSet,\n smgs: LifeSGColourSet,\n },\n defaultValue: \"lifesg\",\n};\n\nexport const DarkColourSpec: ThemeCollectionSpec<\n SemanticColourCollectionMap,\n ColourScheme\n> = {\n collections: {\n lifesg: LifeSGDarkColourSet,\n bookingsg: LifeSGDarkColourSet,\n rbs: LifeSGDarkColourSet,\n mylegacy: LifeSGDarkColourSet,\n ccube: LifeSGDarkColourSet,\n oneservice: LifeSGDarkColourSet,\n pa: LifeSGDarkColourSet,\n a11yplayground: A11yPlaygroundDarkColourSet,\n supportgowhere: LifeSGDarkColourSet,\n sgwdigitallobby: SGWDigitalLobbyDarkColourSet,\n imda: LifeSGDarkColourSet,\n spf: LifeSGDarkColourSet,\n smgs: LifeSGDarkColourSet,\n },\n defaultValue: \"lifesg\",\n};\n\nexport const getSemanticColour = (key: keyof SemanticColourSet) => {\n return (props: StyledComponentProps): string => {\n const theme = props.theme;\n const isDarkMode = theme?.colourMode === \"dark\";\n\n // Select the appropriate color spec based on theme mode\n const spec = isDarkMode ? DarkColourSpec : ColourSpec;\n const colorSet: SemanticColourSet = getCollection(\n spec,\n theme?.colourScheme\n );\n\n // Check for mode-specific overrides first,\n // then fallback to general overrides\n const overrideKey = isDarkMode\n ? \"semanticColourDark\"\n : \"semanticColour\";\n const overrides = theme?.overrides?.[overrideKey];\n\n const colorValue = overrides\n ? getValue(colorSet, key, overrides)\n : colorSet[key];\n\n // If function, resolve with props\n if (typeof colorValue === \"function\") {\n return (colorValue as (props: any) => string)(props);\n }\n\n return colorValue as string;\n };\n};\n\nexport const ColourSemantic: {\n [key in keyof SemanticColourSet]: (props: StyledComponentProps) => string;\n} = {\n // text\n text: getSemanticColour(\"text\"),\n \"text-subtle\": getSemanticColour(\"text-subtle\"),\n \"text-subtler\": getSemanticColour(\"text-subtler\"),\n \"text-subtlest\": getSemanticColour(\"text-subtlest\"),\n \"text-primary\": getSemanticColour(\"text-primary\"),\n \"text-primary-strongest\": getSemanticColour(\"text-primary-strongest\"),\n\n \"text-hover\": getSemanticColour(\"text-hover\"),\n \"text-selected\": getSemanticColour(\"text-selected\"),\n \"text-selected-hover\": getSemanticColour(\"text-selected-hover\"),\n\n \"text-disabled\": getSemanticColour(\"text-disabled\"),\n \"text-disabled-subtle\": getSemanticColour(\"text-disabled-subtle\"),\n \"text-disabled-subtlest\": getSemanticColour(\"text-disabled-subtlest\"),\n \"text-selected-disabled\": getSemanticColour(\"text-selected-disabled\"),\n\n \"text-success\": getSemanticColour(\"text-success\"),\n \"text-warning\": getSemanticColour(\"text-warning\"),\n \"text-error\": getSemanticColour(\"text-error\"),\n \"text-info\": getSemanticColour(\"text-info\"),\n \"text-inverse\": getSemanticColour(\"text-inverse\"),\n\n // icon\n icon: getSemanticColour(\"icon\"),\n \"icon-subtle\": getSemanticColour(\"icon-subtle\"),\n \"icon-strongest\": getSemanticColour(\"icon-strongest\"),\n \"icon-primary\": getSemanticColour(\"icon-primary\"),\n \"icon-primary-subtle\": getSemanticColour(\"icon-primary-subtle\"),\n \"icon-primary-subtlest\": getSemanticColour(\"icon-primary-subtlest\"),\n\n \"icon-hover\": getSemanticColour(\"icon-hover\"),\n \"icon-selected\": getSemanticColour(\"icon-selected\"),\n \"icon-selected-hover\": getSemanticColour(\"icon-selected-hover\"),\n\n \"icon-disabled\": getSemanticColour(\"icon-disabled\"),\n \"icon-disabled-subtle\": getSemanticColour(\"icon-disabled-subtle\"),\n \"icon-selected-disabled\": getSemanticColour(\"icon-selected-disabled\"),\n\n \"icon-success\": getSemanticColour(\"icon-success\"),\n \"icon-warning\": getSemanticColour(\"icon-warning\"),\n \"icon-error\": getSemanticColour(\"icon-error\"),\n \"icon-error-strong\": getSemanticColour(\"icon-error-strong\"),\n \"icon-info\": getSemanticColour(\"icon-info\"),\n \"icon-inverse\": getSemanticColour(\"icon-inverse\"),\n \"icon-primary-inverse\": getSemanticColour(\"icon-primary-inverse\"),\n\n // border\n border: getSemanticColour(\"border\"),\n \"border-strong\": getSemanticColour(\"border-strong\"),\n \"border-stronger\": getSemanticColour(\"border-stronger\"),\n \"border-primary\": getSemanticColour(\"border-primary\"),\n \"border-primary-subtle\": getSemanticColour(\"border-primary-subtle\"),\n\n \"border-hover\": getSemanticColour(\"border-hover\"),\n \"border-hover-strong\": getSemanticColour(\"border-hover-strong\"),\n\n \"border-selected\": getSemanticColour(\"border-selected\"),\n \"border-selected-subtle\": getSemanticColour(\"border-selected-subtle\"),\n \"border-selected-subtlest\": getSemanticColour(\"border-selected-subtlest\"),\n \"border-selected-hover\": getSemanticColour(\"border-selected-hover\"),\n\n \"border-focus\": getSemanticColour(\"border-focus\"),\n \"border-focus-strong\": getSemanticColour(\"border-focus-strong\"),\n\n \"border-disabled\": getSemanticColour(\"border-disabled\"),\n \"border-selected-disabled\": getSemanticColour(\"border-selected-disabled\"),\n\n \"border-success\": getSemanticColour(\"border-success\"),\n \"border-warning\": getSemanticColour(\"border-warning\"),\n \"border-error\": getSemanticColour(\"border-error\"),\n \"border-error-focus\": getSemanticColour(\"border-error-focus\"),\n \"border-error-focus-strong\": getSemanticColour(\"border-error-focus-strong\"),\n \"border-error-strong\": getSemanticColour(\"border-error-strong\"),\n \"border-info\": getSemanticColour(\"border-info\"),\n\n // background\n bg: getSemanticColour(\"bg\"),\n \"bg-strong\": getSemanticColour(\"bg-strong\"),\n \"bg-stronger\": getSemanticColour(\"bg-stronger\"),\n \"bg-strongest\": getSemanticColour(\"bg-strongest\"),\n\n \"bg-hover\": getSemanticColour(\"bg-hover\"),\n \"bg-hover-strong\": getSemanticColour(\"bg-hover-strong\"),\n \"bg-hover-subtle\": getSemanticColour(\"bg-hover-subtle\"),\n \"bg-hover-neutral\": getSemanticColour(\"bg-hover-neutral\"),\n \"bg-hover-neutral-strong\": getSemanticColour(\"bg-hover-neutral-strong\"),\n\n \"bg-selected\": getSemanticColour(\"bg-selected\"),\n \"bg-selected-hover\": getSemanticColour(\"bg-selected-hover\"),\n \"bg-selected-strong\": getSemanticColour(\"bg-selected-strong\"),\n \"bg-selected-stronger\": getSemanticColour(\"bg-selected-stronger\"),\n \"bg-selected-strongest\": getSemanticColour(\"bg-selected-strongest\"),\n \"bg-selected-strongest-hover\": getSemanticColour(\n \"bg-selected-strongest-hover\"\n ),\n\n \"bg-disabled\": getSemanticColour(\"bg-disabled\"),\n \"bg-selected-disabled\": getSemanticColour(\"bg-selected-disabled\"),\n \"bg-selected-stronger-disabled\": getSemanticColour(\n \"bg-selected-stronger-disabled\"\n ),\n\n \"bg-success\": getSemanticColour(\"bg-success\"),\n \"bg-success-hover\": getSemanticColour(\"bg-success-hover\"),\n \"bg-success-strong\": getSemanticColour(\"bg-success-strong\"),\n \"bg-success-strong-hover\": getSemanticColour(\"bg-success-strong-hover\"),\n \"bg-warning\": getSemanticColour(\"bg-warning\"),\n \"bg-warning-hover\": getSemanticColour(\"bg-warning-hover\"),\n \"bg-warning-strong\": getSemanticColour(\"bg-warning-strong\"),\n \"bg-warning-strong-hover\": getSemanticColour(\"bg-warning-strong-hover\"),\n \"bg-info\": getSemanticColour(\"bg-info\"),\n \"bg-info-hover\": getSemanticColour(\"bg-info-hover\"),\n \"bg-info-strong\": getSemanticColour(\"bg-info-strong\"),\n \"bg-info-strong-hover\": getSemanticColour(\"bg-info-strong-hover\"),\n \"bg-error\": getSemanticColour(\"bg-error\"),\n \"bg-error-hover\": getSemanticColour(\"bg-error-hover\"),\n \"bg-error-strong\": getSemanticColour(\"bg-error-strong\"),\n \"bg-error-strong-hover\": getSemanticColour(\"bg-error-strong-hover\"),\n\n \"bg-inverse\": getSemanticColour(\"bg-inverse\"),\n \"bg-inverse-subtle\": getSemanticColour(\"bg-inverse-subtle\"),\n \"bg-inverse-subtler\": getSemanticColour(\"bg-inverse-subtler\"),\n \"bg-inverse-subtlest\": getSemanticColour(\"bg-inverse-subtlest\"),\n \"bg-inverse-hover\": getSemanticColour(\"bg-inverse-hover\"),\n\n \"bg-primary\": getSemanticColour(\"bg-primary\"),\n \"bg-primary-subtle\": getSemanticColour(\"bg-primary-subtle\"),\n \"bg-primary-subtler\": getSemanticColour(\"bg-primary-subtler\"),\n \"bg-primary-subtlest\": getSemanticColour(\"bg-primary-subtlest\"),\n \"bg-available\": getSemanticColour(\"bg-available\"),\n\n \"bg-primary-hover\": getSemanticColour(\"bg-primary-hover\"),\n \"bg-primary-subtlest-hover\": getSemanticColour(\"bg-primary-subtlest-hover\"),\n \"bg-primary-subtlest-selected\": getSemanticColour(\n \"bg-primary-subtlest-selected\"\n ),\n\n // overlay\n \"overlay-strong\": getSemanticColour(\"overlay-strong\"),\n \"overlay-subtle\": getSemanticColour(\"overlay-subtle\"),\n\n // hyperlink\n hyperlink: getSemanticColour(\"hyperlink\"),\n \"hyperlink-hover\": getSemanticColour(\"hyperlink-hover\"),\n \"hyperlink-visited\": getSemanticColour(\"hyperlink-visited\"),\n \"hyperlink-inverse\": getSemanticColour(\"hyperlink-inverse\"),\n\n // focus ring\n \"focus-ring\": getSemanticColour(\"focus-ring\"),\n \"focus-ring-inverse\": getSemanticColour(\"focus-ring-inverse\"),\n};\n"],"names":["ColourSpec","collections","lifesg","LifeSGColourSet","bookingsg","rbs","mylegacy","ccube","oneservice","pa","PAColourSet","a11yplayground","A11yPlaygroundColourSet","supportgowhere","sgwdigitallobby","SGWDigitalLobbyColourSet","imda","spf","smgs","defaultValue","DarkColourSpec","LifeSGDarkColourSet","A11yPlaygroundDarkColourSet","SGWDigitalLobbyDarkColourSet","getSemanticColour","key","props","theme","isDarkMode","colourMode","colorSet","getCollection","colourScheme","overrideKey","overrides","_a","colorValue","getValue","ColourSemantic","text","icon","border","bg","hyperlink"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"theme-helper.js","sources":["../../../src/theme/colour-semantic/theme-helper.ts"],"sourcesContent":["import { StyledComponentProps, getCollection, getValue } from \"../helpers\";\nimport { ThemeCollectionSpec } from \"../internal-types\";\nimport { ColourScheme, SemanticColourSet } from \"../types\";\nimport {\n LifeSGColourSet,\n LifeSGDarkColourSet,\n} from \"./specs/lifesg-semantic-tokens\";\nimport { PAColourSet } from \"./specs/pa-semantic-tokens\";\nimport {\n A11yPlaygroundColourSet,\n A11yPlaygroundDarkColourSet,\n} from \"./specs/a11yplayground-semantic-tokens\";\nimport { SemanticColourCollectionMap } from \"./types\";\nimport {\n SGWDigitalLobbyColourSet,\n SGWDigitalLobbyDarkColourSet,\n} from \"./specs/sgwdigitallobby-tokens\";\n\nexport const ColourSpec: ThemeCollectionSpec<\n SemanticColourCollectionMap,\n ColourScheme\n> = {\n collections: {\n lifesg: LifeSGColourSet,\n bookingsg: LifeSGColourSet,\n rbs: LifeSGColourSet,\n mylegacy: LifeSGColourSet,\n ccube: LifeSGColourSet,\n oneservice: LifeSGColourSet,\n pa: PAColourSet,\n a11yplayground: A11yPlaygroundColourSet,\n supportgowhere: LifeSGColourSet,\n sgwdigitallobby: SGWDigitalLobbyColourSet,\n imda: LifeSGColourSet,\n spf: LifeSGColourSet,\n smgs: LifeSGColourSet,\n careercompass: LifeSGColourSet,\n },\n defaultValue: \"lifesg\",\n};\n\nexport const DarkColourSpec: ThemeCollectionSpec<\n SemanticColourCollectionMap,\n ColourScheme\n> = {\n collections: {\n lifesg: LifeSGDarkColourSet,\n bookingsg: LifeSGDarkColourSet,\n rbs: LifeSGDarkColourSet,\n mylegacy: LifeSGDarkColourSet,\n ccube: LifeSGDarkColourSet,\n oneservice: LifeSGDarkColourSet,\n pa: LifeSGDarkColourSet,\n a11yplayground: A11yPlaygroundDarkColourSet,\n supportgowhere: LifeSGDarkColourSet,\n sgwdigitallobby: SGWDigitalLobbyDarkColourSet,\n imda: LifeSGDarkColourSet,\n spf: LifeSGDarkColourSet,\n smgs: LifeSGDarkColourSet,\n careercompass: LifeSGDarkColourSet,\n },\n defaultValue: \"lifesg\",\n};\n\nexport const getSemanticColour = (key: keyof SemanticColourSet) => {\n return (props: StyledComponentProps): string => {\n const theme = props.theme;\n const isDarkMode = theme?.colourMode === \"dark\";\n\n // Select the appropriate color spec based on theme mode\n const spec = isDarkMode ? DarkColourSpec : ColourSpec;\n const colorSet: SemanticColourSet = getCollection(\n spec,\n theme?.colourScheme\n );\n\n // Check for mode-specific overrides first,\n // then fallback to general overrides\n const overrideKey = isDarkMode\n ? \"semanticColourDark\"\n : \"semanticColour\";\n const overrides = theme?.overrides?.[overrideKey];\n\n const colorValue = overrides\n ? getValue(colorSet, key, overrides)\n : colorSet[key];\n\n // If function, resolve with props\n if (typeof colorValue === \"function\") {\n return (colorValue as (props: any) => string)(props);\n }\n\n return colorValue as string;\n };\n};\n\nexport const ColourSemantic: {\n [key in keyof SemanticColourSet]: (props: StyledComponentProps) => string;\n} = {\n // text\n text: getSemanticColour(\"text\"),\n \"text-subtle\": getSemanticColour(\"text-subtle\"),\n \"text-subtler\": getSemanticColour(\"text-subtler\"),\n \"text-subtlest\": getSemanticColour(\"text-subtlest\"),\n \"text-primary\": getSemanticColour(\"text-primary\"),\n \"text-primary-strongest\": getSemanticColour(\"text-primary-strongest\"),\n \"text-secondary\": getSemanticColour(\"text-secondary\"),\n \"text-secondary-subtle\": getSemanticColour(\"text-secondary-subtle\"),\n\n \"text-hover\": getSemanticColour(\"text-hover\"),\n \"text-selected\": getSemanticColour(\"text-selected\"),\n \"text-selected-hover\": getSemanticColour(\"text-selected-hover\"),\n\n \"text-disabled\": getSemanticColour(\"text-disabled\"),\n \"text-disabled-subtle\": getSemanticColour(\"text-disabled-subtle\"),\n \"text-disabled-subtlest\": getSemanticColour(\"text-disabled-subtlest\"),\n \"text-selected-disabled\": getSemanticColour(\"text-selected-disabled\"),\n\n \"text-success\": getSemanticColour(\"text-success\"),\n \"text-warning\": getSemanticColour(\"text-warning\"),\n \"text-error\": getSemanticColour(\"text-error\"),\n \"text-info\": getSemanticColour(\"text-info\"),\n \"text-inverse\": getSemanticColour(\"text-inverse\"),\n\n // icon\n icon: getSemanticColour(\"icon\"),\n \"icon-subtle\": getSemanticColour(\"icon-subtle\"),\n \"icon-strongest\": getSemanticColour(\"icon-strongest\"),\n \"icon-primary\": getSemanticColour(\"icon-primary\"),\n \"icon-primary-subtle\": getSemanticColour(\"icon-primary-subtle\"),\n \"icon-primary-subtlest\": getSemanticColour(\"icon-primary-subtlest\"),\n \"icon-secondary\": getSemanticColour(\"icon-secondary\"),\n \"icon-secondary-subtle\": getSemanticColour(\"icon-secondary-subtle\"),\n\n \"icon-hover\": getSemanticColour(\"icon-hover\"),\n \"icon-selected\": getSemanticColour(\"icon-selected\"),\n \"icon-selected-hover\": getSemanticColour(\"icon-selected-hover\"),\n\n \"icon-disabled\": getSemanticColour(\"icon-disabled\"),\n \"icon-disabled-subtle\": getSemanticColour(\"icon-disabled-subtle\"),\n \"icon-selected-disabled\": getSemanticColour(\"icon-selected-disabled\"),\n\n \"icon-success\": getSemanticColour(\"icon-success\"),\n \"icon-warning\": getSemanticColour(\"icon-warning\"),\n \"icon-error\": getSemanticColour(\"icon-error\"),\n \"icon-error-strong\": getSemanticColour(\"icon-error-strong\"),\n \"icon-info\": getSemanticColour(\"icon-info\"),\n \"icon-inverse\": getSemanticColour(\"icon-inverse\"),\n \"icon-primary-inverse\": getSemanticColour(\"icon-primary-inverse\"),\n\n // border\n border: getSemanticColour(\"border\"),\n \"border-strong\": getSemanticColour(\"border-strong\"),\n \"border-stronger\": getSemanticColour(\"border-stronger\"),\n \"border-primary\": getSemanticColour(\"border-primary\"),\n \"border-primary-subtle\": getSemanticColour(\"border-primary-subtle\"),\n\n \"border-hover\": getSemanticColour(\"border-hover\"),\n \"border-hover-strong\": getSemanticColour(\"border-hover-strong\"),\n\n \"border-selected\": getSemanticColour(\"border-selected\"),\n \"border-selected-subtle\": getSemanticColour(\"border-selected-subtle\"),\n \"border-selected-subtlest\": getSemanticColour(\"border-selected-subtlest\"),\n \"border-selected-hover\": getSemanticColour(\"border-selected-hover\"),\n\n \"border-focus\": getSemanticColour(\"border-focus\"),\n \"border-focus-strong\": getSemanticColour(\"border-focus-strong\"),\n\n \"border-disabled\": getSemanticColour(\"border-disabled\"),\n \"border-selected-disabled\": getSemanticColour(\"border-selected-disabled\"),\n\n \"border-success\": getSemanticColour(\"border-success\"),\n \"border-warning\": getSemanticColour(\"border-warning\"),\n \"border-error\": getSemanticColour(\"border-error\"),\n \"border-error-focus\": getSemanticColour(\"border-error-focus\"),\n \"border-error-focus-strong\": getSemanticColour(\"border-error-focus-strong\"),\n \"border-error-strong\": getSemanticColour(\"border-error-strong\"),\n \"border-info\": getSemanticColour(\"border-info\"),\n\n // background\n bg: getSemanticColour(\"bg\"),\n \"bg-strong\": getSemanticColour(\"bg-strong\"),\n \"bg-stronger\": getSemanticColour(\"bg-stronger\"),\n \"bg-strongest\": getSemanticColour(\"bg-strongest\"),\n\n \"bg-hover\": getSemanticColour(\"bg-hover\"),\n \"bg-hover-strong\": getSemanticColour(\"bg-hover-strong\"),\n \"bg-hover-subtle\": getSemanticColour(\"bg-hover-subtle\"),\n \"bg-hover-neutral\": getSemanticColour(\"bg-hover-neutral\"),\n \"bg-hover-neutral-strong\": getSemanticColour(\"bg-hover-neutral-strong\"),\n\n \"bg-selected\": getSemanticColour(\"bg-selected\"),\n \"bg-selected-hover\": getSemanticColour(\"bg-selected-hover\"),\n \"bg-selected-strong\": getSemanticColour(\"bg-selected-strong\"),\n \"bg-selected-stronger\": getSemanticColour(\"bg-selected-stronger\"),\n \"bg-selected-strongest\": getSemanticColour(\"bg-selected-strongest\"),\n \"bg-selected-strongest-hover\": getSemanticColour(\n \"bg-selected-strongest-hover\"\n ),\n\n \"bg-disabled\": getSemanticColour(\"bg-disabled\"),\n \"bg-selected-disabled\": getSemanticColour(\"bg-selected-disabled\"),\n \"bg-selected-stronger-disabled\": getSemanticColour(\n \"bg-selected-stronger-disabled\"\n ),\n\n \"bg-success\": getSemanticColour(\"bg-success\"),\n \"bg-success-hover\": getSemanticColour(\"bg-success-hover\"),\n \"bg-success-strong\": getSemanticColour(\"bg-success-strong\"),\n \"bg-success-strong-hover\": getSemanticColour(\"bg-success-strong-hover\"),\n \"bg-warning\": getSemanticColour(\"bg-warning\"),\n \"bg-warning-hover\": getSemanticColour(\"bg-warning-hover\"),\n \"bg-warning-strong\": getSemanticColour(\"bg-warning-strong\"),\n \"bg-warning-strong-hover\": getSemanticColour(\"bg-warning-strong-hover\"),\n \"bg-info\": getSemanticColour(\"bg-info\"),\n \"bg-info-hover\": getSemanticColour(\"bg-info-hover\"),\n \"bg-info-strong\": getSemanticColour(\"bg-info-strong\"),\n \"bg-info-strong-hover\": getSemanticColour(\"bg-info-strong-hover\"),\n \"bg-error\": getSemanticColour(\"bg-error\"),\n \"bg-error-hover\": getSemanticColour(\"bg-error-hover\"),\n \"bg-error-strong\": getSemanticColour(\"bg-error-strong\"),\n \"bg-error-strong-hover\": getSemanticColour(\"bg-error-strong-hover\"),\n\n \"bg-inverse\": getSemanticColour(\"bg-inverse\"),\n \"bg-inverse-subtle\": getSemanticColour(\"bg-inverse-subtle\"),\n \"bg-inverse-subtler\": getSemanticColour(\"bg-inverse-subtler\"),\n \"bg-inverse-subtlest\": getSemanticColour(\"bg-inverse-subtlest\"),\n \"bg-inverse-hover\": getSemanticColour(\"bg-inverse-hover\"),\n\n \"bg-primary\": getSemanticColour(\"bg-primary\"),\n \"bg-primary-subtle\": getSemanticColour(\"bg-primary-subtle\"),\n \"bg-primary-subtler\": getSemanticColour(\"bg-primary-subtler\"),\n \"bg-primary-subtlest\": getSemanticColour(\"bg-primary-subtlest\"),\n \"bg-available\": getSemanticColour(\"bg-available\"),\n\n \"bg-secondary\": getSemanticColour(\"bg-secondary\"),\n \"bg-secondary-subtle\": getSemanticColour(\"bg-secondary-subtle\"),\n \"bg-secondary-subtler\": getSemanticColour(\"bg-secondary-subtler\"),\n \"bg-secondary-subtlest\": getSemanticColour(\"bg-secondary-subtlest\"),\n\n \"bg-primary-hover\": getSemanticColour(\"bg-primary-hover\"),\n \"bg-primary-subtlest-hover\": getSemanticColour(\"bg-primary-subtlest-hover\"),\n \"bg-primary-subtlest-selected\": getSemanticColour(\n \"bg-primary-subtlest-selected\"\n ),\n\n // overlay\n \"overlay-strong\": getSemanticColour(\"overlay-strong\"),\n \"overlay-subtle\": getSemanticColour(\"overlay-subtle\"),\n\n // hyperlink\n hyperlink: getSemanticColour(\"hyperlink\"),\n \"hyperlink-hover\": getSemanticColour(\"hyperlink-hover\"),\n \"hyperlink-visited\": getSemanticColour(\"hyperlink-visited\"),\n \"hyperlink-inverse\": getSemanticColour(\"hyperlink-inverse\"),\n\n // focus ring\n \"focus-ring\": getSemanticColour(\"focus-ring\"),\n \"focus-ring-inverse\": getSemanticColour(\"focus-ring-inverse\"),\n};\n"],"names":["ColourSpec","collections","lifesg","LifeSGColourSet","bookingsg","rbs","mylegacy","ccube","oneservice","pa","PAColourSet","a11yplayground","A11yPlaygroundColourSet","supportgowhere","sgwdigitallobby","SGWDigitalLobbyColourSet","imda","spf","smgs","careercompass","defaultValue","DarkColourSpec","LifeSGDarkColourSet","A11yPlaygroundDarkColourSet","SGWDigitalLobbyDarkColourSet","getSemanticColour","key","props","theme","isDarkMode","colourMode","colorSet","getCollection","colourScheme","overrideKey","overrides","_a","colorValue","getValue","ColourSemantic","text","icon","border","bg","hyperlink"],"mappings":"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"}
|
|
@@ -11,6 +11,8 @@ export type SemanticColourSet = {
|
|
|
11
11
|
"text-subtlest": SemanticColourValue;
|
|
12
12
|
"text-primary": SemanticColourValue;
|
|
13
13
|
"text-primary-strongest": SemanticColourValue;
|
|
14
|
+
"text-secondary": SemanticColourValue;
|
|
15
|
+
"text-secondary-subtle": SemanticColourValue;
|
|
14
16
|
"text-hover": SemanticColourValue;
|
|
15
17
|
"text-selected": SemanticColourValue;
|
|
16
18
|
"text-selected-hover": SemanticColourValue;
|
|
@@ -29,6 +31,8 @@ export type SemanticColourSet = {
|
|
|
29
31
|
"icon-primary": SemanticColourValue;
|
|
30
32
|
"icon-primary-subtle": SemanticColourValue;
|
|
31
33
|
"icon-primary-subtlest": SemanticColourValue;
|
|
34
|
+
"icon-secondary": SemanticColourValue;
|
|
35
|
+
"icon-secondary-subtle": SemanticColourValue;
|
|
32
36
|
"icon-hover": SemanticColourValue;
|
|
33
37
|
"icon-selected": SemanticColourValue;
|
|
34
38
|
"icon-selected-hover": SemanticColourValue;
|
|
@@ -108,6 +112,10 @@ export type SemanticColourSet = {
|
|
|
108
112
|
"bg-primary-subtler": SemanticColourValue;
|
|
109
113
|
"bg-primary-subtlest": SemanticColourValue;
|
|
110
114
|
"bg-available": SemanticColourValue;
|
|
115
|
+
"bg-secondary": SemanticColourValue;
|
|
116
|
+
"bg-secondary-subtle": SemanticColourValue;
|
|
117
|
+
"bg-secondary-subtler": SemanticColourValue;
|
|
118
|
+
"bg-secondary-subtlest": SemanticColourValue;
|
|
111
119
|
"bg-primary-hover": SemanticColourValue;
|
|
112
120
|
"bg-primary-subtlest-hover": SemanticColourValue;
|
|
113
121
|
"bg-primary-subtlest-selected": SemanticColourValue;
|
package/theme/index.d.ts
CHANGED
|
@@ -102,6 +102,8 @@ export declare const Colour: {
|
|
|
102
102
|
"text-subtlest": (props: import("./helpers").StyledComponentProps) => string;
|
|
103
103
|
"text-primary": (props: import("./helpers").StyledComponentProps) => string;
|
|
104
104
|
"text-primary-strongest": (props: import("./helpers").StyledComponentProps) => string;
|
|
105
|
+
"text-secondary": (props: import("./helpers").StyledComponentProps) => string;
|
|
106
|
+
"text-secondary-subtle": (props: import("./helpers").StyledComponentProps) => string;
|
|
105
107
|
"text-hover": (props: import("./helpers").StyledComponentProps) => string;
|
|
106
108
|
"text-selected": (props: import("./helpers").StyledComponentProps) => string;
|
|
107
109
|
"text-selected-hover": (props: import("./helpers").StyledComponentProps) => string;
|
|
@@ -120,6 +122,8 @@ export declare const Colour: {
|
|
|
120
122
|
"icon-primary": (props: import("./helpers").StyledComponentProps) => string;
|
|
121
123
|
"icon-primary-subtle": (props: import("./helpers").StyledComponentProps) => string;
|
|
122
124
|
"icon-primary-subtlest": (props: import("./helpers").StyledComponentProps) => string;
|
|
125
|
+
"icon-secondary": (props: import("./helpers").StyledComponentProps) => string;
|
|
126
|
+
"icon-secondary-subtle": (props: import("./helpers").StyledComponentProps) => string;
|
|
123
127
|
"icon-hover": (props: import("./helpers").StyledComponentProps) => string;
|
|
124
128
|
"icon-selected": (props: import("./helpers").StyledComponentProps) => string;
|
|
125
129
|
"icon-selected-hover": (props: import("./helpers").StyledComponentProps) => string;
|
|
@@ -199,6 +203,10 @@ export declare const Colour: {
|
|
|
199
203
|
"bg-primary-subtler": (props: import("./helpers").StyledComponentProps) => string;
|
|
200
204
|
"bg-primary-subtlest": (props: import("./helpers").StyledComponentProps) => string;
|
|
201
205
|
"bg-available": (props: import("./helpers").StyledComponentProps) => string;
|
|
206
|
+
"bg-secondary": (props: import("./helpers").StyledComponentProps) => string;
|
|
207
|
+
"bg-secondary-subtle": (props: import("./helpers").StyledComponentProps) => string;
|
|
208
|
+
"bg-secondary-subtler": (props: import("./helpers").StyledComponentProps) => string;
|
|
209
|
+
"bg-secondary-subtlest": (props: import("./helpers").StyledComponentProps) => string;
|
|
202
210
|
"bg-primary-hover": (props: import("./helpers").StyledComponentProps) => string;
|
|
203
211
|
"bg-primary-subtlest-hover": (props: import("./helpers").StyledComponentProps) => string;
|
|
204
212
|
"bg-primary-subtlest-selected": (props: import("./helpers").StyledComponentProps) => string;
|
|
@@ -503,6 +511,25 @@ export declare const CCubeTheme: {
|
|
|
503
511
|
maxColumns?: any;
|
|
504
512
|
_v2?: import("..").V2_ThemeSpec;
|
|
505
513
|
};
|
|
514
|
+
export declare const CareerCompassTheme: {
|
|
515
|
+
light: ThemeSpec;
|
|
516
|
+
dark: ThemeSpec;
|
|
517
|
+
colourScheme: import("./types").ColourScheme;
|
|
518
|
+
colourMode?: import("./types").ColourMode | undefined;
|
|
519
|
+
fontScheme: import("./types").FontScheme;
|
|
520
|
+
motionScheme: import("./types").MotionScheme;
|
|
521
|
+
borderScheme: import("./types").BorderScheme;
|
|
522
|
+
spacingScheme: import("./types").SpacingScheme;
|
|
523
|
+
radiusScheme: import("./types").RadiusScheme;
|
|
524
|
+
shadowScheme: import("./types").ShadowScheme;
|
|
525
|
+
breakpointScheme: import("./types").BreakpointScheme;
|
|
526
|
+
resourceScheme: import("./types").ResourceScheme;
|
|
527
|
+
componentScheme?: import("./types").ComponentScheme | undefined;
|
|
528
|
+
componentOverrides?: import("./components/types").ComponentOverrideOptions | undefined;
|
|
529
|
+
overrides?: import("./types").ThemeSpecOptions | undefined;
|
|
530
|
+
maxColumns?: any;
|
|
531
|
+
_v2?: import("..").V2_ThemeSpec;
|
|
532
|
+
};
|
|
506
533
|
export declare const MyLegacyTheme: {
|
|
507
534
|
light: ThemeSpec;
|
|
508
535
|
dark: ThemeSpec;
|
package/theme/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{BorderUtilValues as e}from"./border-util/theme-helper.js";import{BorderValues as c}from"./border/theme-helper.js";import{MediaQuery as t}from"./breakpoint/media-query-helper.js";import{BreakpointValues as
|
|
1
|
+
import{BorderUtilValues as e}from"./border-util/theme-helper.js";import{BorderValues as c}from"./border/theme-helper.js";import{MediaQuery as t}from"./breakpoint/media-query-helper.js";import{BreakpointValues as a}from"./breakpoint/theme-helper.js";import{PrimitiveColour as o}from"./colour-primitive/theme-helper.js";import{ColourSemantic as m}from"./colour-semantic/theme-helper.js";import{ThemeNavbar as h,ThemeButton as r}from"./components/theme-helper.js";import{FontSpecValues as s}from"./font-spec/theme-helper.js";import{FontValues as d}from"./font/theme-helper.js";import{MotionValues as l}from"./motion/theme-helper.js";import{RadiusValues as i}from"./radius/theme-helper.js";import{ShadowValues as S}from"./shadow/theme-helper.js";import{SpacingValues as u}from"./spacing/theme-helper.js";import{createThemeWithColourMode as n}from"./use-theme-mode.js";export{getSystemColourMode,useDSTheme}from"./use-theme-mode.js";export{DSThemeProvider}from"./ds-theme-provider.js";const f=Object.assign(Object.assign({},m),{Primitive:o}),g=Object.assign(Object.assign({},d),{Spec:s}),b=l,p=Object.assign(Object.assign({},c),{Util:e}),k=u,j=i,O=S,y=a,w=t,v={Button:r,Navbar:h},x={colourScheme:"lifesg",fontScheme:"default",motionScheme:"default",borderScheme:"default",spacingScheme:"default",radiusScheme:"default",shadowScheme:"default",breakpointScheme:"default",resourceScheme:"lifesg",componentScheme:"lifesg",_v2:{colorScheme:"base",textStyleScheme:"base",designTokenScheme:"base",resourceScheme:"base"}},T={colourScheme:"bookingsg",fontScheme:"bookingsg",motionScheme:"default",borderScheme:"default",spacingScheme:"default",radiusScheme:"default",shadowScheme:"default",breakpointScheme:"default",resourceScheme:"bookingsg",_v2:{colorScheme:"bookingsg",textStyleScheme:"base",designTokenScheme:"base",resourceScheme:"bookingsg"}},_={colourScheme:"ccube",fontScheme:"default",motionScheme:"default",borderScheme:"default",spacingScheme:"default",radiusScheme:"default",shadowScheme:"default",breakpointScheme:"default",resourceScheme:"ccube",_v2:{colorScheme:"ccube",textStyleScheme:"base",designTokenScheme:"base",resourceScheme:"ccube"}},D={colourScheme:"careercompass",fontScheme:"bookingsg",motionScheme:"default",borderScheme:"default",spacingScheme:"default",radiusScheme:"default",shadowScheme:"default",breakpointScheme:"default",resourceScheme:"careercompass",componentScheme:"default"},M={colourScheme:"mylegacy",fontScheme:"mylegacy",motionScheme:"default",borderScheme:"default",spacingScheme:"default",radiusScheme:"default",shadowScheme:"default",breakpointScheme:"default",resourceScheme:"mylegacy",_v2:{colorScheme:"mylegacy",textStyleScheme:"base",designTokenScheme:"base",resourceScheme:"mylegacy"}},P={colourScheme:"rbs",fontScheme:"default",motionScheme:"default",borderScheme:"default",spacingScheme:"default",radiusScheme:"default",shadowScheme:"default",breakpointScheme:"default",resourceScheme:"rbs",_v2:{colorScheme:"rbs",textStyleScheme:"base",designTokenScheme:"rbs",resourceScheme:"rbs"}},q={colourScheme:"oneservice",fontScheme:"oneservice",motionScheme:"default",borderScheme:"default",spacingScheme:"default",radiusScheme:"default",shadowScheme:"default",breakpointScheme:"default",resourceScheme:"oneservice"},B={colourScheme:"pa",fontScheme:"pa",motionScheme:"default",borderScheme:"default",spacingScheme:"default",radiusScheme:"default",shadowScheme:"default",breakpointScheme:"default",resourceScheme:"pa",componentScheme:"pa"},C={colourScheme:"a11yplayground",fontScheme:"a11yplayground",motionScheme:"default",borderScheme:"default",spacingScheme:"default",radiusScheme:"default",shadowScheme:"default",breakpointScheme:"default",resourceScheme:"a11yplayground",componentScheme:"a11yplayground"},N={colourScheme:"supportgowhere",fontScheme:"supportgowhere",motionScheme:"default",borderScheme:"default",spacingScheme:"default",radiusScheme:"default",shadowScheme:"default",breakpointScheme:"default",resourceScheme:"supportgowhere",componentScheme:"default"},Q={colourScheme:"sgwdigitallobby",fontScheme:"sgwdigitallobby",motionScheme:"default",borderScheme:"default",spacingScheme:"default",radiusScheme:"default",shadowScheme:"default",breakpointScheme:"default",resourceScheme:"supportgowhere",componentScheme:"default"},U={colourScheme:"imda",fontScheme:"imda",motionScheme:"default",borderScheme:"default",spacingScheme:"default",radiusScheme:"default",shadowScheme:"default",breakpointScheme:"default",resourceScheme:"imda",componentScheme:"default"},z={colourScheme:"spf",fontScheme:"spf",motionScheme:"default",borderScheme:"default",spacingScheme:"default",radiusScheme:"spf",shadowScheme:"default",breakpointScheme:"default",resourceScheme:"spf",componentScheme:"spf"},A={colourScheme:"smgs",fontScheme:"bookingsg",motionScheme:"default",borderScheme:"default",spacingScheme:"default",radiusScheme:"default",shadowScheme:"default",breakpointScheme:"default",resourceScheme:"smgs",componentScheme:"smgs"},E=Object.assign(Object.assign({},x),{light:n(x,"light"),dark:n(x,"dark")}),F=Object.assign(Object.assign({},T),{light:n(T,"light"),dark:n(T,"dark")}),G=Object.assign(Object.assign({},_),{light:n(_,"light"),dark:n(_,"dark")}),H=Object.assign(Object.assign({},D),{light:n(D,"light"),dark:n(D,"dark")}),I=Object.assign(Object.assign({},M),{light:n(M,"light"),dark:n(M,"dark")}),J=Object.assign(Object.assign({},P),{light:n(P,"light"),dark:n(P,"dark")}),K=Object.assign(Object.assign({},q),{light:n(q,"light"),dark:n(q,"dark")}),L=Object.assign(Object.assign({},B),{light:n(B,"light"),dark:n(B,"dark")}),R=Object.assign(Object.assign({},C),{light:n(C,"light"),dark:n(C,"dark")}),V=Object.assign(Object.assign({},N),{light:n(N,"light"),dark:n(N,"dark")}),W=Object.assign(Object.assign({},Q),{light:n(Q,"light"),dark:n(Q,"dark")}),X=Object.assign(Object.assign({},U),{light:n(U,"light"),dark:n(U,"dark")}),Y=Object.assign(Object.assign({},z),{light:n(z,"light"),dark:n(z,"dark")}),Z=Object.assign(Object.assign({},A),{light:n(A,"light"),dark:n(A,"dark")});export{R as A11yPlaygroundTheme,F as BookingSGTheme,p as Border,y as Breakpoint,G as CCubeTheme,H as CareerCompassTheme,f as Colour,g as Font,X as IMDATheme,E as LifeSGTheme,w as MediaQuery,b as Motion,I as MyLegacyTheme,K as OneServiceTheme,L as PATheme,J as RBSTheme,j as Radius,W as SGWDigitalLobbyTheme,Q as SGWDigitalLobbyThemeBase,Z as SMGSTheme,Y as SPFTheme,O as Shadow,k as Spacing,V as SupportGoWhereTheme,N as SupportGoWhereThemeBase,v as ThemeComponent,n as createThemeWithColourMode};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/theme/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/theme/index.ts"],"sourcesContent":["import { BorderUtilValues } from \"./border-util/theme-helper\";\nimport { BorderValues } from \"./border/theme-helper\";\nimport { MediaQuery as MediaQueryValues } from \"./breakpoint/media-query-helper\";\nimport { BreakpointValues } from \"./breakpoint/theme-helper\";\nimport { PrimitiveColour } from \"./colour-primitive/theme-helper\";\nimport { ColourSemantic } from \"./colour-semantic/theme-helper\";\nimport { ThemeButton, ThemeNavbar } from \"./components/theme-helper\";\nimport { FontSpecValues } from \"./font-spec/theme-helper\";\nimport { FontValues } from \"./font/theme-helper\";\nimport { MotionValues } from \"./motion/theme-helper\";\nimport { RadiusValues } from \"./radius/theme-helper\";\nimport { ShadowValues } from \"./shadow/theme-helper\";\nimport { SpacingValues } from \"./spacing/theme-helper\";\nimport { ThemeSpec } from \"./types\";\nimport { createThemeWithColourMode } from \"./use-theme-mode\";\n\nexport * from \"./types\";\nexport * from \"./ds-theme-provider\";\nexport * from \"./use-theme-mode\";\n\n// =============================================================================\n// TOKENS\n// =============================================================================\n\nexport const Colour = {\n ...ColourSemantic,\n Primitive: PrimitiveColour,\n};\n\nexport const Font = {\n ...FontValues,\n Spec: FontSpecValues,\n};\n\nexport const Motion = MotionValues;\n\nexport const Border = {\n ...BorderValues,\n Util: BorderUtilValues,\n};\n\nexport const Spacing = SpacingValues;\n\nexport const Radius = RadiusValues;\n\nexport const Shadow = ShadowValues;\n\nexport const Breakpoint = BreakpointValues;\n\nexport const MediaQuery = MediaQueryValues;\n\nexport const ThemeComponent = {\n Button: ThemeButton,\n Navbar: ThemeNavbar,\n};\n\n// =============================================================================\n// THEME PRESETS\n// =============================================================================\n\n// Theme definitions\nconst LifeSGThemeBase: ThemeSpec = {\n colourScheme: \"lifesg\",\n fontScheme: \"default\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"lifesg\",\n componentScheme: \"lifesg\",\n _v2: {\n colorScheme: \"base\",\n textStyleScheme: \"base\",\n designTokenScheme: \"base\",\n resourceScheme: \"base\",\n },\n};\n\nconst BookingSGThemeBase: ThemeSpec = {\n colourScheme: \"bookingsg\",\n fontScheme: \"bookingsg\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"bookingsg\",\n _v2: {\n colorScheme: \"bookingsg\",\n textStyleScheme: \"base\",\n designTokenScheme: \"base\",\n resourceScheme: \"bookingsg\",\n },\n};\n\nconst CCubeThemeBase: ThemeSpec = {\n colourScheme: \"ccube\",\n fontScheme: \"default\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"ccube\",\n _v2: {\n colorScheme: \"ccube\",\n textStyleScheme: \"base\",\n designTokenScheme: \"base\",\n resourceScheme: \"ccube\",\n },\n};\n\nconst MyLegacyThemeBase: ThemeSpec = {\n colourScheme: \"mylegacy\",\n fontScheme: \"mylegacy\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"mylegacy\",\n _v2: {\n colorScheme: \"mylegacy\",\n textStyleScheme: \"base\",\n designTokenScheme: \"base\",\n resourceScheme: \"mylegacy\",\n },\n};\n\nconst RBSThemeBase: ThemeSpec = {\n colourScheme: \"rbs\",\n fontScheme: \"default\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"rbs\",\n _v2: {\n colorScheme: \"rbs\",\n textStyleScheme: \"base\",\n designTokenScheme: \"rbs\",\n resourceScheme: \"rbs\",\n },\n};\n\nconst OneServiceThemeBase: ThemeSpec = {\n colourScheme: \"oneservice\",\n fontScheme: \"oneservice\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"oneservice\",\n};\n\nconst PAThemeBase: ThemeSpec = {\n colourScheme: \"pa\",\n fontScheme: \"pa\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"pa\",\n componentScheme: \"pa\",\n};\n\nconst A11yPlaygroundThemeBase: ThemeSpec = {\n colourScheme: \"a11yplayground\",\n fontScheme: \"a11yplayground\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"a11yplayground\",\n componentScheme: \"a11yplayground\",\n};\n\nexport const SupportGoWhereThemeBase: ThemeSpec = {\n colourScheme: \"supportgowhere\",\n fontScheme: \"supportgowhere\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"supportgowhere\",\n componentScheme: \"default\",\n};\n\nexport const SGWDigitalLobbyThemeBase: ThemeSpec = {\n colourScheme: \"sgwdigitallobby\",\n fontScheme: \"sgwdigitallobby\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"supportgowhere\",\n componentScheme: \"default\",\n};\n\nconst IMDAThemeBase: ThemeSpec = {\n colourScheme: \"imda\",\n fontScheme: \"imda\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"imda\",\n componentScheme: \"default\",\n};\n\nconst SPFThemeBase: ThemeSpec = {\n colourScheme: \"spf\",\n fontScheme: \"spf\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"spf\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"spf\",\n componentScheme: \"spf\",\n};\n\nconst SMGSThemeBase: ThemeSpec = {\n colourScheme: \"smgs\",\n fontScheme: \"bookingsg\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"smgs\",\n componentScheme: \"smgs\",\n};\n\n// =============================================================================\n// THEME COLLECTIONS\n// =============================================================================\n\n// Theme presets with backward compatibility and light/dark variants\nexport const LifeSGTheme = {\n ...LifeSGThemeBase,\n light: createThemeWithColourMode(LifeSGThemeBase, \"light\"),\n dark: createThemeWithColourMode(LifeSGThemeBase, \"dark\"),\n};\n\nexport const BookingSGTheme = {\n ...BookingSGThemeBase,\n light: createThemeWithColourMode(BookingSGThemeBase, \"light\"),\n dark: createThemeWithColourMode(BookingSGThemeBase, \"dark\"),\n};\n\nexport const CCubeTheme = {\n ...CCubeThemeBase,\n light: createThemeWithColourMode(CCubeThemeBase, \"light\"),\n dark: createThemeWithColourMode(CCubeThemeBase, \"dark\"),\n};\n\nexport const MyLegacyTheme = {\n ...MyLegacyThemeBase,\n light: createThemeWithColourMode(MyLegacyThemeBase, \"light\"),\n dark: createThemeWithColourMode(MyLegacyThemeBase, \"dark\"),\n};\n\nexport const RBSTheme = {\n ...RBSThemeBase,\n light: createThemeWithColourMode(RBSThemeBase, \"light\"),\n dark: createThemeWithColourMode(RBSThemeBase, \"dark\"),\n};\n\nexport const OneServiceTheme = {\n ...OneServiceThemeBase,\n light: createThemeWithColourMode(OneServiceThemeBase, \"light\"),\n dark: createThemeWithColourMode(OneServiceThemeBase, \"dark\"),\n};\n\nexport const PATheme = {\n ...PAThemeBase,\n light: createThemeWithColourMode(PAThemeBase, \"light\"),\n dark: createThemeWithColourMode(PAThemeBase, \"dark\"),\n};\n\nexport const A11yPlaygroundTheme = {\n ...A11yPlaygroundThemeBase,\n light: createThemeWithColourMode(A11yPlaygroundThemeBase, \"light\"),\n dark: createThemeWithColourMode(A11yPlaygroundThemeBase, \"dark\"),\n};\n\nexport const SupportGoWhereTheme = {\n ...SupportGoWhereThemeBase,\n light: createThemeWithColourMode(SupportGoWhereThemeBase, \"light\"),\n dark: createThemeWithColourMode(SupportGoWhereThemeBase, \"dark\"),\n};\n\nexport const SGWDigitalLobbyTheme = {\n ...SGWDigitalLobbyThemeBase,\n light: createThemeWithColourMode(SGWDigitalLobbyThemeBase, \"light\"),\n dark: createThemeWithColourMode(SGWDigitalLobbyThemeBase, \"dark\"),\n};\n\nexport const IMDATheme = {\n ...IMDAThemeBase,\n light: createThemeWithColourMode(IMDAThemeBase, \"light\"),\n dark: createThemeWithColourMode(IMDAThemeBase, \"dark\"),\n};\n\nexport const SPFTheme = {\n ...SPFThemeBase,\n light: createThemeWithColourMode(SPFThemeBase, \"light\"),\n dark: createThemeWithColourMode(SPFThemeBase, \"dark\"),\n};\n\nexport const SMGSTheme = {\n ...SMGSThemeBase,\n light: createThemeWithColourMode(SMGSThemeBase, \"light\"),\n dark: createThemeWithColourMode(SMGSThemeBase, \"dark\"),\n};\n"],"names":["Colour","Object","assign","ColourSemantic","Primitive","PrimitiveColour","Font","FontValues","Spec","FontSpecValues","Motion","MotionValues","Border","BorderValues","Util","BorderUtilValues","Spacing","SpacingValues","Radius","RadiusValues","Shadow","ShadowValues","Breakpoint","BreakpointValues","MediaQuery","MediaQueryValues","ThemeComponent","Button","ThemeButton","Navbar","ThemeNavbar","LifeSGThemeBase","colourScheme","fontScheme","motionScheme","borderScheme","spacingScheme","radiusScheme","shadowScheme","breakpointScheme","resourceScheme","componentScheme","_v2","colorScheme","textStyleScheme","designTokenScheme","BookingSGThemeBase","CCubeThemeBase","MyLegacyThemeBase","RBSThemeBase","OneServiceThemeBase","PAThemeBase","A11yPlaygroundThemeBase","SupportGoWhereThemeBase","SGWDigitalLobbyThemeBase","IMDAThemeBase","SPFThemeBase","SMGSThemeBase","LifeSGTheme","light","createThemeWithColourMode","dark","BookingSGTheme","CCubeTheme","MyLegacyTheme","RBSTheme","OneServiceTheme","PATheme","A11yPlaygroundTheme","SupportGoWhereTheme","SGWDigitalLobbyTheme","IMDATheme","SPFTheme","SMGSTheme"],"mappings":"o9BAwBO,MAAMA,EAAMC,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACZC,IACHC,UAAWC,IAGFC,EAAIL,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACVK,IACHC,KAAMC,IAGGC,EAASC,EAETC,EAAMX,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACZW,IACHC,KAAMC,IAGGC,EAAUC,EAEVC,EAASC,EAETC,EAASC,EAETC,EAAaC,EAEbC,EAAaC,EAEbC,EAAiB,CAC1BC,OAAQC,EACRC,OAAQC,GAQNC,EAA6B,CAC/BC,aAAc,SACdC,WAAY,UACZC,aAAc,UACdC,aAAc,UACdC,cAAe,UACfC,aAAc,UACdC,aAAc,UACdC,iBAAkB,UAClBC,eAAgB,SAChBC,gBAAiB,SACjBC,IAAK,CACDC,YAAa,OACbC,gBAAiB,OACjBC,kBAAmB,OACnBL,eAAgB,SAIlBM,EAAgC,CAClCd,aAAc,YACdC,WAAY,YACZC,aAAc,UACdC,aAAc,UACdC,cAAe,UACfC,aAAc,UACdC,aAAc,UACdC,iBAAkB,UAClBC,eAAgB,YAChBE,IAAK,CACDC,YAAa,YACbC,gBAAiB,OACjBC,kBAAmB,OACnBL,eAAgB,cAIlBO,EAA4B,CAC9Bf,aAAc,QACdC,WAAY,UACZC,aAAc,UACdC,aAAc,UACdC,cAAe,UACfC,aAAc,UACdC,aAAc,UACdC,iBAAkB,UAClBC,eAAgB,QAChBE,IAAK,CACDC,YAAa,QACbC,gBAAiB,OACjBC,kBAAmB,OACnBL,eAAgB,UAIlBQ,EAA+B,CACjChB,aAAc,WACdC,WAAY,WACZC,aAAc,UACdC,aAAc,UACdC,cAAe,UACfC,aAAc,UACdC,aAAc,UACdC,iBAAkB,UAClBC,eAAgB,WAChBE,IAAK,CACDC,YAAa,WACbC,gBAAiB,OACjBC,kBAAmB,OACnBL,eAAgB,aAIlBS,EAA0B,CAC5BjB,aAAc,MACdC,WAAY,UACZC,aAAc,UACdC,aAAc,UACdC,cAAe,UACfC,aAAc,UACdC,aAAc,UACdC,iBAAkB,UAClBC,eAAgB,MAChBE,IAAK,CACDC,YAAa,MACbC,gBAAiB,OACjBC,kBAAmB,MACnBL,eAAgB,QAIlBU,EAAiC,CACnClB,aAAc,aACdC,WAAY,aACZC,aAAc,UACdC,aAAc,UACdC,cAAe,UACfC,aAAc,UACdC,aAAc,UACdC,iBAAkB,UAClBC,eAAgB,cAGdW,EAAyB,CAC3BnB,aAAc,KACdC,WAAY,KACZC,aAAc,UACdC,aAAc,UACdC,cAAe,UACfC,aAAc,UACdC,aAAc,UACdC,iBAAkB,UAClBC,eAAgB,KAChBC,gBAAiB,MAGfW,EAAqC,CACvCpB,aAAc,iBACdC,WAAY,iBACZC,aAAc,UACdC,aAAc,UACdC,cAAe,UACfC,aAAc,UACdC,aAAc,UACdC,iBAAkB,UAClBC,eAAgB,iBAChBC,gBAAiB,kBAGRY,EAAqC,CAC9CrB,aAAc,iBACdC,WAAY,iBACZC,aAAc,UACdC,aAAc,UACdC,cAAe,UACfC,aAAc,UACdC,aAAc,UACdC,iBAAkB,UAClBC,eAAgB,iBAChBC,gBAAiB,WAGRa,EAAsC,CAC/CtB,aAAc,kBACdC,WAAY,kBACZC,aAAc,UACdC,aAAc,UACdC,cAAe,UACfC,aAAc,UACdC,aAAc,UACdC,iBAAkB,UAClBC,eAAgB,iBAChBC,gBAAiB,WAGfc,EAA2B,CAC7BvB,aAAc,OACdC,WAAY,OACZC,aAAc,UACdC,aAAc,UACdC,cAAe,UACfC,aAAc,UACdC,aAAc,UACdC,iBAAkB,UAClBC,eAAgB,OAChBC,gBAAiB,WAGfe,EAA0B,CAC5BxB,aAAc,MACdC,WAAY,MACZC,aAAc,UACdC,aAAc,UACdC,cAAe,UACfC,aAAc,MACdC,aAAc,UACdC,iBAAkB,UAClBC,eAAgB,MAChBC,gBAAiB,OAGfgB,EAA2B,CAC7BzB,aAAc,OACdC,WAAY,YACZC,aAAc,UACdC,aAAc,UACdC,cAAe,UACfC,aAAc,UACdC,aAAc,UACdC,iBAAkB,UAClBC,eAAgB,OAChBC,gBAAiB,QAQRiB,EAAWzD,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACjB6B,IACH4B,MAAOC,EAA0B7B,EAAiB,SAClD8B,KAAMD,EAA0B7B,EAAiB,UAGxC+B,EAAc7D,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACpB4C,IACHa,MAAOC,EAA0Bd,EAAoB,SACrDe,KAAMD,EAA0Bd,EAAoB,UAG3CiB,EAAU9D,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAChB6C,IACHY,MAAOC,EAA0Bb,EAAgB,SACjDc,KAAMD,EAA0Bb,EAAgB,UAGvCiB,EAAa/D,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACnB8C,IACHW,MAAOC,EAA0BZ,EAAmB,SACpDa,KAAMD,EAA0BZ,EAAmB,UAG1CiB,EAAQhE,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACd+C,IACHU,MAAOC,EAA0BX,EAAc,SAC/CY,KAAMD,EAA0BX,EAAc,UAGrCiB,EAAejE,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACrBgD,IACHS,MAAOC,EAA0BV,EAAqB,SACtDW,KAAMD,EAA0BV,EAAqB,UAG5CiB,EAAOlE,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACbiD,IACHQ,MAAOC,EAA0BT,EAAa,SAC9CU,KAAMD,EAA0BT,EAAa,UAGpCiB,EAAmBnE,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACzBkD,IACHO,MAAOC,EAA0BR,EAAyB,SAC1DS,KAAMD,EAA0BR,EAAyB,UAGhDiB,EAAmBpE,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACzBmD,IACHM,MAAOC,EAA0BP,EAAyB,SAC1DQ,KAAMD,EAA0BP,EAAyB,UAGhDiB,EAAoBrE,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EAC1BoD,IACHK,MAAOC,EAA0BN,EAA0B,SAC3DO,KAAMD,EAA0BN,EAA0B,UAGjDiB,EAAStE,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACfqD,IACHI,MAAOC,EAA0BL,EAAe,SAChDM,KAAMD,EAA0BL,EAAe,UAGtCiB,EAAQvE,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACdsD,IACHG,MAAOC,EAA0BJ,EAAc,SAC/CK,KAAMD,EAA0BJ,EAAc,UAGrCiB,EAASxE,OAAAC,OAAAD,OAAAC,OAAA,CAAA,EACfuD,IACHE,MAAOC,EAA0BH,EAAe,SAChDI,KAAMD,EAA0BH,EAAe"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/theme/index.ts"],"sourcesContent":["import { BorderUtilValues } from \"./border-util/theme-helper\";\nimport { BorderValues } from \"./border/theme-helper\";\nimport { MediaQuery as MediaQueryValues } from \"./breakpoint/media-query-helper\";\nimport { BreakpointValues } from \"./breakpoint/theme-helper\";\nimport { PrimitiveColour } from \"./colour-primitive/theme-helper\";\nimport { ColourSemantic } from \"./colour-semantic/theme-helper\";\nimport { ThemeButton, ThemeNavbar } from \"./components/theme-helper\";\nimport { FontSpecValues } from \"./font-spec/theme-helper\";\nimport { FontValues } from \"./font/theme-helper\";\nimport { MotionValues } from \"./motion/theme-helper\";\nimport { RadiusValues } from \"./radius/theme-helper\";\nimport { ShadowValues } from \"./shadow/theme-helper\";\nimport { SpacingValues } from \"./spacing/theme-helper\";\nimport { ThemeSpec } from \"./types\";\nimport { createThemeWithColourMode } from \"./use-theme-mode\";\n\nexport * from \"./types\";\nexport * from \"./ds-theme-provider\";\nexport * from \"./use-theme-mode\";\n\n// =============================================================================\n// TOKENS\n// =============================================================================\n\nexport const Colour = {\n ...ColourSemantic,\n Primitive: PrimitiveColour,\n};\n\nexport const Font = {\n ...FontValues,\n Spec: FontSpecValues,\n};\n\nexport const Motion = MotionValues;\n\nexport const Border = {\n ...BorderValues,\n Util: BorderUtilValues,\n};\n\nexport const Spacing = SpacingValues;\n\nexport const Radius = RadiusValues;\n\nexport const Shadow = ShadowValues;\n\nexport const Breakpoint = BreakpointValues;\n\nexport const MediaQuery = MediaQueryValues;\n\nexport const ThemeComponent = {\n Button: ThemeButton,\n Navbar: ThemeNavbar,\n};\n\n// =============================================================================\n// THEME PRESETS\n// =============================================================================\n\n// Theme definitions\nconst LifeSGThemeBase: ThemeSpec = {\n colourScheme: \"lifesg\",\n fontScheme: \"default\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"lifesg\",\n componentScheme: \"lifesg\",\n _v2: {\n colorScheme: \"base\",\n textStyleScheme: \"base\",\n designTokenScheme: \"base\",\n resourceScheme: \"base\",\n },\n};\n\nconst BookingSGThemeBase: ThemeSpec = {\n colourScheme: \"bookingsg\",\n fontScheme: \"bookingsg\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"bookingsg\",\n _v2: {\n colorScheme: \"bookingsg\",\n textStyleScheme: \"base\",\n designTokenScheme: \"base\",\n resourceScheme: \"bookingsg\",\n },\n};\n\nconst CCubeThemeBase: ThemeSpec = {\n colourScheme: \"ccube\",\n fontScheme: \"default\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"ccube\",\n _v2: {\n colorScheme: \"ccube\",\n textStyleScheme: \"base\",\n designTokenScheme: \"base\",\n resourceScheme: \"ccube\",\n },\n};\n\nconst CareerCompassThemeBase: ThemeSpec = {\n colourScheme: \"careercompass\",\n fontScheme: \"bookingsg\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"careercompass\",\n componentScheme: \"default\",\n};\n\nconst MyLegacyThemeBase: ThemeSpec = {\n colourScheme: \"mylegacy\",\n fontScheme: \"mylegacy\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"mylegacy\",\n _v2: {\n colorScheme: \"mylegacy\",\n textStyleScheme: \"base\",\n designTokenScheme: \"base\",\n resourceScheme: \"mylegacy\",\n },\n};\n\nconst RBSThemeBase: ThemeSpec = {\n colourScheme: \"rbs\",\n fontScheme: \"default\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"rbs\",\n _v2: {\n colorScheme: \"rbs\",\n textStyleScheme: \"base\",\n designTokenScheme: \"rbs\",\n resourceScheme: \"rbs\",\n },\n};\n\nconst OneServiceThemeBase: ThemeSpec = {\n colourScheme: \"oneservice\",\n fontScheme: \"oneservice\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"oneservice\",\n};\n\nconst PAThemeBase: ThemeSpec = {\n colourScheme: \"pa\",\n fontScheme: \"pa\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"pa\",\n componentScheme: \"pa\",\n};\n\nconst A11yPlaygroundThemeBase: ThemeSpec = {\n colourScheme: \"a11yplayground\",\n fontScheme: \"a11yplayground\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"a11yplayground\",\n componentScheme: \"a11yplayground\",\n};\n\nexport const SupportGoWhereThemeBase: ThemeSpec = {\n colourScheme: \"supportgowhere\",\n fontScheme: \"supportgowhere\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"supportgowhere\",\n componentScheme: \"default\",\n};\n\nexport const SGWDigitalLobbyThemeBase: ThemeSpec = {\n colourScheme: \"sgwdigitallobby\",\n fontScheme: \"sgwdigitallobby\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"supportgowhere\",\n componentScheme: \"default\",\n};\n\nconst IMDAThemeBase: ThemeSpec = {\n colourScheme: \"imda\",\n fontScheme: \"imda\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"imda\",\n componentScheme: \"default\",\n};\n\nconst SPFThemeBase: ThemeSpec = {\n colourScheme: \"spf\",\n fontScheme: \"spf\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"spf\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"spf\",\n componentScheme: \"spf\",\n};\n\nconst SMGSThemeBase: ThemeSpec = {\n colourScheme: \"smgs\",\n fontScheme: \"bookingsg\",\n motionScheme: \"default\",\n borderScheme: \"default\",\n spacingScheme: \"default\",\n radiusScheme: \"default\",\n shadowScheme: \"default\",\n breakpointScheme: \"default\",\n resourceScheme: \"smgs\",\n componentScheme: \"smgs\",\n};\n\n// =============================================================================\n// THEME COLLECTIONS\n// =============================================================================\n\n// Theme presets with backward compatibility and light/dark variants\nexport const LifeSGTheme = {\n ...LifeSGThemeBase,\n light: createThemeWithColourMode(LifeSGThemeBase, \"light\"),\n dark: createThemeWithColourMode(LifeSGThemeBase, \"dark\"),\n};\n\nexport const BookingSGTheme = {\n ...BookingSGThemeBase,\n light: createThemeWithColourMode(BookingSGThemeBase, \"light\"),\n dark: createThemeWithColourMode(BookingSGThemeBase, \"dark\"),\n};\n\nexport const CCubeTheme = {\n ...CCubeThemeBase,\n light: createThemeWithColourMode(CCubeThemeBase, \"light\"),\n dark: createThemeWithColourMode(CCubeThemeBase, \"dark\"),\n};\n\nexport const CareerCompassTheme = {\n ...CareerCompassThemeBase,\n light: createThemeWithColourMode(CareerCompassThemeBase, \"light\"),\n dark: createThemeWithColourMode(CareerCompassThemeBase, \"dark\"),\n};\n\nexport const MyLegacyTheme = {\n ...MyLegacyThemeBase,\n light: createThemeWithColourMode(MyLegacyThemeBase, \"light\"),\n dark: createThemeWithColourMode(MyLegacyThemeBase, \"dark\"),\n};\n\nexport const RBSTheme = {\n ...RBSThemeBase,\n light: createThemeWithColourMode(RBSThemeBase, \"light\"),\n dark: createThemeWithColourMode(RBSThemeBase, \"dark\"),\n};\n\nexport const OneServiceTheme = {\n ...OneServiceThemeBase,\n light: createThemeWithColourMode(OneServiceThemeBase, \"light\"),\n dark: createThemeWithColourMode(OneServiceThemeBase, \"dark\"),\n};\n\nexport const PATheme = {\n ...PAThemeBase,\n light: createThemeWithColourMode(PAThemeBase, \"light\"),\n dark: createThemeWithColourMode(PAThemeBase, \"dark\"),\n};\n\nexport const A11yPlaygroundTheme = {\n ...A11yPlaygroundThemeBase,\n light: createThemeWithColourMode(A11yPlaygroundThemeBase, \"light\"),\n dark: createThemeWithColourMode(A11yPlaygroundThemeBase, \"dark\"),\n};\n\nexport const SupportGoWhereTheme = {\n ...SupportGoWhereThemeBase,\n light: createThemeWithColourMode(SupportGoWhereThemeBase, \"light\"),\n dark: createThemeWithColourMode(SupportGoWhereThemeBase, \"dark\"),\n};\n\nexport const SGWDigitalLobbyTheme = {\n ...SGWDigitalLobbyThemeBase,\n light: createThemeWithColourMode(SGWDigitalLobbyThemeBase, \"light\"),\n dark: createThemeWithColourMode(SGWDigitalLobbyThemeBase, \"dark\"),\n};\n\nexport const IMDATheme = {\n ...IMDAThemeBase,\n light: createThemeWithColourMode(IMDAThemeBase, \"light\"),\n dark: createThemeWithColourMode(IMDAThemeBase, \"dark\"),\n};\n\nexport const SPFTheme = {\n ...SPFThemeBase,\n light: createThemeWithColourMode(SPFThemeBase, \"light\"),\n dark: createThemeWithColourMode(SPFThemeBase, \"dark\"),\n};\n\nexport const SMGSTheme = {\n ...SMGSThemeBase,\n light: createThemeWithColourMode(SMGSThemeBase, \"light\"),\n dark: createThemeWithColourMode(SMGSThemeBase, \"dark\"),\n};\n"],"names":["Colour","Object","assign","ColourSemantic","Primitive","PrimitiveColour","Font","FontValues","Spec","FontSpecValues","Motion","MotionValues","Border","BorderValues","Util","BorderUtilValues","Spacing","SpacingValues","Radius","RadiusValues","Shadow","ShadowValues","Breakpoint","BreakpointValues","MediaQuery","MediaQueryValues","ThemeComponent","Button","ThemeButton","Navbar","ThemeNavbar","LifeSGThemeBase","colourScheme","fontScheme","motionScheme","borderScheme","spacingScheme","radiusScheme","shadowScheme","breakpointScheme","resourceScheme","componentScheme","_v2","colorScheme","textStyleScheme","designTokenScheme","BookingSGThemeBase","CCubeThemeBase","CareerCompassThemeBase","MyLegacyThemeBase","RBSThemeBase","OneServiceThemeBase","PAThemeBase","A11yPlaygroundThemeBase","SupportGoWhereThemeBase","SGWDigitalLobbyThemeBase","IMDAThemeBase","SPFThemeBase","SMGSThemeBase","LifeSGTheme","light","createThemeWithColourMode","dark","BookingSGTheme","CCubeTheme","CareerCompassTheme","MyLegacyTheme","RBSTheme","OneServiceTheme","PATheme","A11yPlaygroundTheme","SupportGoWhereTheme","SGWDigitalLobbyTheme","IMDATheme","SPFTheme","SMGSTheme"],"mappings":"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"}
|
package/theme/types.d.ts
CHANGED
|
@@ -21,7 +21,7 @@ export type { RadiusSet, RadiusSetOptions } from "./radius/types";
|
|
|
21
21
|
export type { ShadowSet, ShadowSetOptions } from "./shadow/types";
|
|
22
22
|
export type { SpacingSet, SpacingSetOptions } from "./spacing/types";
|
|
23
23
|
export type { BreakpointSet, BreakpointSetOptions } from "./breakpoint/types";
|
|
24
|
-
export type ColourScheme = "lifesg" | "bookingsg" | "rbs" | "mylegacy" | "ccube" | "oneservice" | "pa" | "a11yplayground" | "supportgowhere" | "sgwdigitallobby" | "imda" | "spf" | "smgs";
|
|
24
|
+
export type ColourScheme = "lifesg" | "bookingsg" | "rbs" | "mylegacy" | "ccube" | "oneservice" | "pa" | "a11yplayground" | "supportgowhere" | "sgwdigitallobby" | "imda" | "spf" | "smgs" | "careercompass";
|
|
25
25
|
export type FontScheme = "default" | "bookingsg" | "mylegacy" | "pa" | "a11yplayground" | "supportgowhere" | "sgwdigitallobby" | "imda" | "spf" | "oneservice";
|
|
26
26
|
export type MotionScheme = "default";
|
|
27
27
|
export type BorderScheme = "default";
|
|
@@ -30,7 +30,7 @@ export type RadiusScheme = "default" | "spf";
|
|
|
30
30
|
export type ShadowScheme = "default";
|
|
31
31
|
export type BreakpointScheme = "default";
|
|
32
32
|
export type ComponentScheme = "default" | "pa" | "a11yplayground" | "lifesg" | "spf" | "smgs";
|
|
33
|
-
export type ResourceScheme = "lifesg" | "bookingsg" | "rbs" | "mylegacy" | "ccube" | "oneservice" | "pa" | "a11yplayground" | "supportgowhere" | "imda" | "spf" | "smgs";
|
|
33
|
+
export type ResourceScheme = "lifesg" | "bookingsg" | "rbs" | "mylegacy" | "ccube" | "oneservice" | "pa" | "a11yplayground" | "supportgowhere" | "imda" | "spf" | "smgs" | "careercompass";
|
|
34
34
|
export type ColourMode = "light" | "dark";
|
|
35
35
|
export interface ThemeSpecOptions {
|
|
36
36
|
primitiveColour?: PrimitiveColourSetOptions | undefined;
|
package/timepicker/timepicker.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{useState as o,useRef as a,useCallback as l}from"react";import{ElementWithDropdown as n}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as i}from"../shared/input-wrapper/input-wrapper.js";import{TimepickerDropdown as d}from"../shared/timepicker-dropdown/timepicker-dropdown.js";import{TimeHelper as t}from"../util/time-helper.js";import{InputSelectorElement as s}from"./timepicker.styles.js";const p=p=>{var{id:m,disabled:c=!1,readOnly:u=!1,error:b,value:f,placeholder:y,format:v="24hr",onChange:w,onFocus:h,onBlur:g,alignment:k,dropdownZIndex:j,dropdownRootNode:O,"aria-labelledby":x,"aria-describedby":C}=p,D=e(p,["id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","aria-labelledby","aria-describedby"]);const[F
|
|
1
|
+
import{__rest as e}from"../_virtual/_tslib.js";import{jsx as r}from"react/jsx-runtime";import{useState as o,useRef as a,useCallback as l}from"react";import{ElementWithDropdown as n}from"../shared/dropdown-wrapper/element-with-dropdown.js";import{InputWrapper as i}from"../shared/input-wrapper/input-wrapper.js";import{TimepickerDropdown as d}from"../shared/timepicker-dropdown/timepicker-dropdown.js";import{TimeHelper as t}from"../util/time-helper.js";import{InputSelectorElement as s}from"./timepicker.styles.js";const p=p=>{var{id:m,disabled:c=!1,readOnly:u=!1,error:b,value:f,placeholder:y,format:v="24hr",onChange:w,onFocus:h,onBlur:g,alignment:k,dropdownZIndex:j,dropdownRootNode:O,"aria-labelledby":x,"aria-describedby":C}=p,D=e(p,["id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","aria-labelledby","aria-describedby"]);const[$,F]=o(!1),H=a(null),M=a(null),B=l((()=>"12hr"===v?"HH:MMam":"HH:MM"),[v]),I=()=>{var e;null===(e=M.current)||void 0===e||e.focus({preventScroll:!0})},N=()=>{c||u||F(!0)},R=()=>{F(!1),I()},Z=e=>{null==w||w(e),F(!1),I()},E=()=>{c||null==h||h()},T=e=>{var r;if($||c)return;const o=e.relatedTarget;o&&(null===(r=H.current)||void 0===r?void 0:r.contains(o))||null==g||g()},_=e=>{c||u||"Enter"!==e.key&&" "!==e.key&&"ArrowDown"!==e.key||(e.preventDefault(),N())};return r(n,{enabled:!u&&!c,isOpen:$,renderElement:()=>r(i,Object.assign({ref:H,role:"group",$readOnly:u,$disabled:c,$focused:$,$error:b},D,{children:r(s,{$disabled:c,ref:M,readOnly:!0,placeholder:y||B(),value:t.formatDisplayValue(f,v),role:"combobox","aria-invalid":b||void 0,"aria-disabled":c||void 0,"aria-readonly":u||void 0,"aria-labelledby":x,"aria-describedby":C,"aria-expanded":!c&&!u&&$,"data-testid":m?`${m}-timepicker-selector`:"timepicker-selector",onFocus:E,onClick:N,onKeyDown:_,onBlur:T})})),renderDropdown:({styles:e,setFloatingRef:o,getFloatingProps:a})=>r("div",Object.assign({ref:o,style:e,role:"dialog","aria-label":"Time picker"},a(),{children:r(d,{id:m,show:$,value:f,format:v,onCancel:R,onChange:Z})})),onOpen:N,onClose:()=>{F(!1),null==g||g()},onDismiss:R,offset:8,alignment:k,customZIndex:j,rootNode:O})};export{p as Timepicker};
|
|
2
2
|
//# sourceMappingURL=timepicker.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timepicker.js","sources":["../../src/timepicker/timepicker.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\nimport {\n DropdownRenderProps,\n ElementWithDropdown,\n} from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper/input-wrapper\";\nimport { TimepickerDropdown } from \"../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { InputSelectorElement } from \"./timepicker.styles\";\nimport { TimepickerProps } from \"./types\";\n\nexport const Timepicker = ({\n id,\n disabled = false,\n readOnly = false,\n error,\n value,\n placeholder,\n format = \"24hr\",\n onChange,\n onFocus,\n onBlur,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: TimepickerProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [isOpen, setIsOpen] = useState(false);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLInputElement>(null);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getPlaceholderValue = useCallback(() => {\n switch (format) {\n case \"12hr\":\n return \"HH:MMam\";\n case \"24hr\":\n default:\n return \"HH:MM\";\n }\n }, [format]);\n\n const restoreFocusToSelector = () => {\n selectorRef.current?.focus({ preventScroll: true });\n };\n\n // =============================================================================\n // EVENT LISTENERS\n // =============================================================================\n const handleOpen = () => {\n if (disabled || readOnly) return;\n setIsOpen(true);\n };\n\n const handleClose = () => {\n setIsOpen(false);\n onBlur?.();\n };\n\n const handleDismiss = () => {\n setIsOpen(false);\n restoreFocusToSelector();\n };\n\n const handleChange = (v: string) => {\n onChange?.(v);\n setIsOpen(false);\n restoreFocusToSelector();\n };\n\n const handleFocus = () => {\n onFocus?.();\n };\n\n const handleSelectorBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (isOpen) return;\n\n const next = e.relatedTarget as Node | null;\n if (next && wrapperRef.current?.contains(next)) return;\n\n onBlur?.();\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (disabled || readOnly) {\n return;\n }\n\n if (e.key === \"Enter\" || e.key === \" \" || e.key === \"ArrowDown\") {\n e.preventDefault();\n handleOpen();\n }\n };\n\n // =============================================================================\n // RENDER\n // =============================================================================\n const renderElement = () => (\n <InputWrapper\n ref={wrapperRef}\n role=\"group\"\n $readOnly={readOnly}\n $disabled={disabled}\n $focused={isOpen}\n $error={error}\n {...otherProps}\n >\n <InputSelectorElement\n ref={selectorRef}\n readOnly\n placeholder={placeholder || getPlaceholderValue()}\n value={TimeHelper.formatDisplayValue(value, format)}\n role=\"combobox\"\n aria-invalid={error || undefined}\n aria-disabled={disabled || undefined}\n aria-readonly={readOnly || undefined}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={!disabled && !readOnly ? isOpen : false}\n data-testid={\n id ? `${id}-timepicker-selector` : \"timepicker-selector\"\n }\n onFocus={handleFocus}\n onClick={handleOpen}\n onKeyDown={handleKeyDown}\n onBlur={handleSelectorBlur}\n />\n </InputWrapper>\n );\n\n const renderDropdown = ({\n styles,\n setFloatingRef,\n getFloatingProps,\n }: DropdownRenderProps) => (\n <div\n ref={setFloatingRef}\n style={styles}\n role=\"dialog\"\n aria-label=\"Time picker\"\n {...getFloatingProps()}\n >\n <TimepickerDropdown\n id={id}\n show={isOpen}\n value={value}\n format={format}\n onCancel={handleDismiss}\n onChange={handleChange}\n />\n </div>\n );\n\n return (\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={isOpen}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n offset={8}\n alignment={alignment}\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["Timepicker","_a","id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","isOpen","setIsOpen","useState","wrapperRef","useRef","selectorRef","getPlaceholderValue","useCallback","restoreFocusToSelector","current","focus","preventScroll","handleOpen","handleDismiss","handleChange","v","handleFocus","handleSelectorBlur","e","next","relatedTarget","contains","handleKeyDown","key","preventDefault","_jsx","ElementWithDropdown","enabled","renderElement","InputWrapper","Object","assign","ref","role","$readOnly","$disabled","$focused","$error","children","InputSelectorElement","TimeHelper","formatDisplayValue","undefined","onClick","onKeyDown","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onOpen","onClose","onDismiss","offset","customZIndex","rootNode"],"mappings":"mgBAWO,MAAMA,EAAcC,QAAAC,GACvBA,EAAEC,SACFA,GAAW,EAAKC,SAChBA,GAAW,EAAKC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,OACXA,EAAS,OAAMC,SACfA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,UACNA,EAASC,eACTA,EAAcC,iBACdA,EACA,kBAAmBC,EACnB,mBAAoBC,GAAef,EAChCgB,EAAUC,EAAAjB,EAhBU,wLAqBvB,MAAOkB,EAAQC,GAAaC,GAAS,GAC/BC,EAAaC,EAAuB,MACpCC,EAAcD,EAAyB,MAKvCE,EAAsBC,GAAY,IAE3B,SADDlB,EAEO,UAGA,SAEhB,CAACA,IAEEmB,EAAyB,WACR,QAAnB1B,EAAAuB,EAAYI,eAAO,IAAA3B,GAAAA,EAAE4B,MAAM,CAAEC,eAAe,GAAO,EAMjDC,EAAa,KACX5B,GAAYC,GAChBgB,GAAU,EAAK,EAQbY,EAAgB,KAClBZ,GAAU,GACVO,GAAwB,EAGtBM,EAAgBC,IAClBzB,SAAAA,EAAWyB,GACXd,GAAU,GACVO,GAAwB,EAGtBQ,EAAc,
|
|
1
|
+
{"version":3,"file":"timepicker.js","sources":["../../src/timepicker/timepicker.tsx"],"sourcesContent":["import { useCallback, useRef, useState } from \"react\";\nimport {\n DropdownRenderProps,\n ElementWithDropdown,\n} from \"../shared/dropdown-wrapper\";\nimport { InputWrapper } from \"../shared/input-wrapper/input-wrapper\";\nimport { TimepickerDropdown } from \"../shared/timepicker-dropdown/timepicker-dropdown\";\nimport { TimeHelper } from \"../util/time-helper\";\nimport { InputSelectorElement } from \"./timepicker.styles\";\nimport { TimepickerProps } from \"./types\";\n\nexport const Timepicker = ({\n id,\n disabled = false,\n readOnly = false,\n error,\n value,\n placeholder,\n format = \"24hr\",\n onChange,\n onFocus,\n onBlur,\n alignment,\n dropdownZIndex,\n dropdownRootNode,\n \"aria-labelledby\": ariaLabelledBy,\n \"aria-describedby\": ariaDescribedBy,\n ...otherProps\n}: TimepickerProps) => {\n // =============================================================================\n // CONST, STATE, REF\n // =============================================================================\n const [isOpen, setIsOpen] = useState(false);\n const wrapperRef = useRef<HTMLDivElement>(null);\n const selectorRef = useRef<HTMLInputElement>(null);\n\n // =============================================================================\n // HELPER FUNCTIONS\n // =============================================================================\n const getPlaceholderValue = useCallback(() => {\n switch (format) {\n case \"12hr\":\n return \"HH:MMam\";\n case \"24hr\":\n default:\n return \"HH:MM\";\n }\n }, [format]);\n\n const restoreFocusToSelector = () => {\n selectorRef.current?.focus({ preventScroll: true });\n };\n\n // =============================================================================\n // EVENT LISTENERS\n // =============================================================================\n const handleOpen = () => {\n if (disabled || readOnly) return;\n setIsOpen(true);\n };\n\n const handleClose = () => {\n setIsOpen(false);\n onBlur?.();\n };\n\n const handleDismiss = () => {\n setIsOpen(false);\n restoreFocusToSelector();\n };\n\n const handleChange = (v: string) => {\n onChange?.(v);\n setIsOpen(false);\n restoreFocusToSelector();\n };\n\n const handleFocus = () => {\n if (disabled) return;\n onFocus?.();\n };\n\n const handleSelectorBlur = (e: React.FocusEvent<HTMLInputElement>) => {\n if (isOpen || disabled) return;\n\n const next = e.relatedTarget as Node | null;\n if (next && wrapperRef.current?.contains(next)) return;\n\n onBlur?.();\n };\n\n const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n if (disabled || readOnly) {\n return;\n }\n\n if (e.key === \"Enter\" || e.key === \" \" || e.key === \"ArrowDown\") {\n e.preventDefault();\n handleOpen();\n }\n };\n\n // =============================================================================\n // RENDER\n // =============================================================================\n const renderElement = () => (\n <InputWrapper\n ref={wrapperRef}\n role=\"group\"\n $readOnly={readOnly}\n $disabled={disabled}\n $focused={isOpen}\n $error={error}\n {...otherProps}\n >\n <InputSelectorElement\n $disabled={disabled}\n ref={selectorRef}\n readOnly\n placeholder={placeholder || getPlaceholderValue()}\n value={TimeHelper.formatDisplayValue(value, format)}\n role=\"combobox\"\n aria-invalid={error || undefined}\n aria-disabled={disabled || undefined}\n aria-readonly={readOnly || undefined}\n aria-labelledby={ariaLabelledBy}\n aria-describedby={ariaDescribedBy}\n aria-expanded={!disabled && !readOnly ? isOpen : false}\n data-testid={\n id ? `${id}-timepicker-selector` : \"timepicker-selector\"\n }\n onFocus={handleFocus}\n onClick={handleOpen}\n onKeyDown={handleKeyDown}\n onBlur={handleSelectorBlur}\n />\n </InputWrapper>\n );\n\n const renderDropdown = ({\n styles,\n setFloatingRef,\n getFloatingProps,\n }: DropdownRenderProps) => (\n <div\n ref={setFloatingRef}\n style={styles}\n role=\"dialog\"\n aria-label=\"Time picker\"\n {...getFloatingProps()}\n >\n <TimepickerDropdown\n id={id}\n show={isOpen}\n value={value}\n format={format}\n onCancel={handleDismiss}\n onChange={handleChange}\n />\n </div>\n );\n\n return (\n <ElementWithDropdown\n enabled={!readOnly && !disabled}\n isOpen={isOpen}\n renderElement={renderElement}\n renderDropdown={renderDropdown}\n onOpen={handleOpen}\n onClose={handleClose}\n onDismiss={handleDismiss}\n offset={8}\n alignment={alignment}\n customZIndex={dropdownZIndex}\n rootNode={dropdownRootNode}\n />\n );\n};\n"],"names":["Timepicker","_a","id","disabled","readOnly","error","value","placeholder","format","onChange","onFocus","onBlur","alignment","dropdownZIndex","dropdownRootNode","ariaLabelledBy","ariaDescribedBy","otherProps","__rest","isOpen","setIsOpen","useState","wrapperRef","useRef","selectorRef","getPlaceholderValue","useCallback","restoreFocusToSelector","current","focus","preventScroll","handleOpen","handleDismiss","handleChange","v","handleFocus","handleSelectorBlur","e","next","relatedTarget","contains","handleKeyDown","key","preventDefault","_jsx","ElementWithDropdown","enabled","renderElement","InputWrapper","Object","assign","ref","role","$readOnly","$disabled","$focused","$error","children","InputSelectorElement","TimeHelper","formatDisplayValue","undefined","onClick","onKeyDown","renderDropdown","styles","setFloatingRef","getFloatingProps","style","TimepickerDropdown","show","onCancel","onOpen","onClose","onDismiss","offset","customZIndex","rootNode"],"mappings":"mgBAWO,MAAMA,EAAcC,QAAAC,GACvBA,EAAEC,SACFA,GAAW,EAAKC,SAChBA,GAAW,EAAKC,MAChBA,EAAKC,MACLA,EAAKC,YACLA,EAAWC,OACXA,EAAS,OAAMC,SACfA,EAAQC,QACRA,EAAOC,OACPA,EAAMC,UACNA,EAASC,eACTA,EAAcC,iBACdA,EACA,kBAAmBC,EACnB,mBAAoBC,GAAef,EAChCgB,EAAUC,EAAAjB,EAhBU,wLAqBvB,MAAOkB,EAAQC,GAAaC,GAAS,GAC/BC,EAAaC,EAAuB,MACpCC,EAAcD,EAAyB,MAKvCE,EAAsBC,GAAY,IAE3B,SADDlB,EAEO,UAGA,SAEhB,CAACA,IAEEmB,EAAyB,WACR,QAAnB1B,EAAAuB,EAAYI,eAAO,IAAA3B,GAAAA,EAAE4B,MAAM,CAAEC,eAAe,GAAO,EAMjDC,EAAa,KACX5B,GAAYC,GAChBgB,GAAU,EAAK,EAQbY,EAAgB,KAClBZ,GAAU,GACVO,GAAwB,EAGtBM,EAAgBC,IAClBzB,SAAAA,EAAWyB,GACXd,GAAU,GACVO,GAAwB,EAGtBQ,EAAc,KACZhC,GACJO,SAAAA,GAAW,EAGT0B,EAAsBC,UACxB,GAAIlB,GAAUhB,EAAU,OAExB,MAAMmC,EAAOD,EAAEE,cACXD,IAA0B,QAAlBrC,EAAAqB,EAAWM,eAAO,IAAA3B,OAAA,EAAAA,EAAEuC,SAASF,KAEzC3B,SAAAA,GAAU,EAGR8B,EAAiBJ,IACflC,GAAYC,GAIF,UAAViC,EAAEK,KAA6B,MAAVL,EAAEK,KAAyB,cAAVL,EAAEK,MACxCL,EAAEM,iBACFZ,IACJ,EA+DJ,OACIa,EAACC,EAAmB,CAChBC,SAAU1C,IAAaD,EACvBgB,OAAQA,EACR4B,cA7Dc,IAClBH,EAACI,EAAYC,OAAAC,OAAA,CACTC,IAAK7B,EACL8B,KAAK,QAAOC,UACDjD,EAAQkD,UACRnD,EAAQoD,SACTpC,EAAMqC,OACRnD,GACJY,EAAU,CAAAwC,SAEdb,EAACc,aACcvD,EACXgD,IAAK3B,EACLpB,UAAQ,EACRG,YAAaA,GAAekB,IAC5BnB,MAAOqD,EAAWC,mBAAmBtD,EAAOE,GAC5C4C,KAAK,WAAU,eACD/C,QAASwD,EAAS,gBACjB1D,QAAY0D,EAAS,gBACrBzD,QAAYyD,EAAS,kBACnB9C,EAAc,mBACbC,EAAe,iBACjBb,IAAaC,GAAWe,EAAc,cAElDjB,EAAK,GAAGA,wBAA2B,sBAEvCQ,QAASyB,EACT2B,QAAS/B,EACTgC,UAAWtB,EACX9B,OAAQyB,OAiCZ4B,eA5Be,EACnBC,SACAC,iBACAC,sBAEAvB,EAAA,MAAAK,OAAAC,OAAA,CACIC,IAAKe,EACLE,MAAOH,EACPb,KAAK,SAAQ,aACF,eACPe,IAAkB,CAAAV,SAEtBb,EAACyB,EAAkB,CACfnE,GAAIA,EACJoE,KAAMnD,EACNb,MAAOA,EACPE,OAAQA,EACR+D,SAAUvC,EACVvB,SAAUwB,OAWduC,OAAQzC,EACR0C,QA5GY,KAChBrD,GAAU,GACVT,SAAAA,GAAU,EA2GN+D,UAAW1C,EACX2C,OAAQ,EACR/D,UAAWA,EACXgE,aAAc/D,EACdgE,SAAU/D,GACZ"}
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
export declare const Wrapper: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never> & Partial<Pick<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>>> & string;
|
|
2
|
-
export declare const InputSelectorElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, never>> & {
|
|
2
|
+
export declare const InputSelectorElement: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, never>> & {
|
|
3
3
|
as?: import("styled-components").WebTarget | undefined;
|
|
4
4
|
forwardedAs?: import("styled-components").WebTarget | undefined;
|
|
5
5
|
}, "ref"> & {
|
|
6
6
|
ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
|
|
7
|
-
},
|
|
7
|
+
}, "$disabled"> & {
|
|
8
|
+
$disabled?: boolean | undefined;
|
|
9
|
+
}, never> & Partial<Pick<import("styled-components").FastOmit<Omit<import("styled-components").FastOmit<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, never> & Partial<Pick<import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "$variant"> & import("../shared/input-wrapper").InputStyleProps, never>> & {
|
|
8
10
|
as?: import("styled-components").WebTarget | undefined;
|
|
9
11
|
forwardedAs?: import("styled-components").WebTarget | undefined;
|
|
10
12
|
}, "ref"> & {
|
|
11
13
|
ref?: ((instance: HTMLInputElement | null) => void) | import("react").RefObject<HTMLInputElement> | null | undefined;
|
|
14
|
+
}, "$disabled"> & {
|
|
15
|
+
$disabled?: boolean | undefined;
|
|
12
16
|
}, never>>> & string;
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import
|
|
1
|
+
import r from"styled-components";import{BasicInput as o}from"../shared/input-wrapper/input-wrapper.js";r.div`
|
|
2
2
|
position: relative;
|
|
3
|
-
`;const t=o
|
|
3
|
+
`;const t=r(o)`
|
|
4
4
|
height: calc(3rem - 2px); // exclude top and bottom borders
|
|
5
|
+
cursor: inherit;
|
|
5
6
|
`;export{t as InputSelectorElement};
|
|
6
7
|
//# sourceMappingURL=timepicker.styles.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"timepicker.styles.js","sources":["../../src/timepicker/timepicker.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { BasicInput } from \"../shared/input-wrapper/input-wrapper\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = styled.div`\n position: relative;\n`;\n\nexport const InputSelectorElement = styled(BasicInput)
|
|
1
|
+
{"version":3,"file":"timepicker.styles.js","sources":["../../src/timepicker/timepicker.styles.tsx"],"sourcesContent":["import styled from \"styled-components\";\nimport { BasicInput } from \"../shared/input-wrapper/input-wrapper\";\n\n// =============================================================================\n// STYLING\n// =============================================================================\nexport const Wrapper = styled.div`\n position: relative;\n`;\n\nexport const InputSelectorElement = styled(BasicInput)<{\n $disabled?: boolean | undefined;\n}>`\n height: calc(3rem - 2px); // exclude top and bottom borders\n cursor: inherit;\n`;\n"],"names":["styled","div","InputSelectorElement","BasicInput"],"mappings":"uGAMuBA,EAAOC,GAAG;;QAIpBC,EAAuBF,EAAOG,EAEzC;;;"}
|