From dcae5f80f2fcdba1ef86f32eedb96e7778520051 Mon Sep 17 00:00:00 2001 From: Jeremy Walton Date: Fri, 31 Jan 2025 12:51:51 -0500 Subject: [PATCH 01/13] Fix source code elinks --- build_token_json.js | 7 +------ src/stories/Components/Sidebar/Sidebar.mdx | 2 +- src/stories/Overview/Tokens.mdx | 5 ++--- src/stories/Recipes/AlignedHeader/AlignedHeader.mdx | 2 +- src/stories/Recipes/CustomSidebar/CustomSidebar.mdx | 4 ++-- src/stories/Recipes/Layout/Layout.mdx | 2 +- src/stories/Tokens/Animation/Animation.mdx | 2 +- src/stories/Tokens/Border/BorderRadius.mdx | 2 +- src/stories/Tokens/Border/BorderStroke.mdx | 2 +- src/stories/Tokens/Border/BorderWidth.mdx | 2 +- src/stories/Tokens/Breakpoint.mdx | 2 +- src/stories/Tokens/Color/BasicColor.mdx | 2 +- src/stories/Tokens/Color/BorderColor.mdx | 2 +- src/stories/Tokens/Color/ColorScale.mdx | 2 +- src/stories/Tokens/EncodedImage.mdx | 2 +- src/stories/Tokens/Opacity.mdx | 2 +- src/stories/Tokens/Shadow.mdx | 2 +- src/stories/Tokens/Sizing.mdx | 2 +- src/stories/Tokens/Spacing.mdx | 2 +- src/stories/Tokens/ZIndex.mdx | 2 +- src/stories/Utilities/Container/Container.mdx | 2 +- 21 files changed, 23 insertions(+), 29 deletions(-) diff --git a/build_token_json.js b/build_token_json.js index cbb12f13..189b1a9e 100644 --- a/build_token_json.js +++ b/build_token_json.js @@ -128,12 +128,7 @@ try { fs.readdir(source, { withFileTypes: true }, (_errors, files) => { let variables = {} files - .filter( - (directoryEntry) => - directoryEntry.isFile() && - directoryEntry.name !== 'dark_mode_tokens.scss' && - directoryEntry.name !== 'index.scss' - ) + .filter((directoryEntry) => directoryEntry.isFile() && directoryEntry.name !== 'index.scss') .forEach((directoryEntry) => { const fileContents = fs.readFileSync(`${source}/${directoryEntry.name}`) const matches = fileContents.toString().match(/^\s*--.*?(?=;)/gm) diff --git a/src/stories/Components/Sidebar/Sidebar.mdx b/src/stories/Components/Sidebar/Sidebar.mdx index 7afe2740..44bd0742 100644 --- a/src/stories/Components/Sidebar/Sidebar.mdx +++ b/src/stories/Components/Sidebar/Sidebar.mdx @@ -9,7 +9,7 @@ import { createAlert } from '../Alert/Alert.js'
diff --git a/src/stories/Overview/Tokens.mdx b/src/stories/Overview/Tokens.mdx index c0770de3..247b32c0 100644 --- a/src/stories/Overview/Tokens.mdx +++ b/src/stories/Overview/Tokens.mdx @@ -13,9 +13,8 @@ import { createSourceCodeLink } from '../helpers/sourceCodeLink.js' Tokens are defined in `src/core/tokens` -- All core tokens are defined in `src/core/tokens/base_tokens.scss` -- Color scale tokens are defined in `src/core/tokens/scale_color_tokens.scss` -- Dark mode tokens are defined in `src/core/tokens/dark_mode_tokens.scss` +- All core tokens are defined in `src/core/tokens/base_tokens.css` +- Color scale tokens are defined in `src/core/tokens/scale_color_tokens.css` There are also a few component specific tokens that are defined in their respective component file, but those are not intended to be global or used outside of that file. diff --git a/src/stories/Recipes/AlignedHeader/AlignedHeader.mdx b/src/stories/Recipes/AlignedHeader/AlignedHeader.mdx index ec1073ae..9f6dd057 100644 --- a/src/stories/Recipes/AlignedHeader/AlignedHeader.mdx +++ b/src/stories/Recipes/AlignedHeader/AlignedHeader.mdx @@ -8,7 +8,7 @@ import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
diff --git a/src/stories/Recipes/CustomSidebar/CustomSidebar.mdx b/src/stories/Recipes/CustomSidebar/CustomSidebar.mdx index 51225de8..08e48025 100644 --- a/src/stories/Recipes/CustomSidebar/CustomSidebar.mdx +++ b/src/stories/Recipes/CustomSidebar/CustomSidebar.mdx @@ -8,12 +8,12 @@ import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
diff --git a/src/stories/Recipes/Layout/Layout.mdx b/src/stories/Recipes/Layout/Layout.mdx index eb20178c..9e2a6a44 100644 --- a/src/stories/Recipes/Layout/Layout.mdx +++ b/src/stories/Recipes/Layout/Layout.mdx @@ -8,7 +8,7 @@ import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
diff --git a/src/stories/Tokens/Animation/Animation.mdx b/src/stories/Tokens/Animation/Animation.mdx index da173c0e..a86eef6f 100644 --- a/src/stories/Tokens/Animation/Animation.mdx +++ b/src/stories/Tokens/Animation/Animation.mdx @@ -9,7 +9,7 @@ import { DesignTokenDocBlock } from 'storybook-design-token'
diff --git a/src/stories/Tokens/Border/BorderRadius.mdx b/src/stories/Tokens/Border/BorderRadius.mdx index db8abdf9..aa6fdb02 100644 --- a/src/stories/Tokens/Border/BorderRadius.mdx +++ b/src/stories/Tokens/Border/BorderRadius.mdx @@ -8,7 +8,7 @@ import { DesignTokenDocBlock } from 'storybook-design-token'
diff --git a/src/stories/Tokens/Border/BorderStroke.mdx b/src/stories/Tokens/Border/BorderStroke.mdx index 984a83b8..00fbd395 100644 --- a/src/stories/Tokens/Border/BorderStroke.mdx +++ b/src/stories/Tokens/Border/BorderStroke.mdx @@ -8,7 +8,7 @@ import { DesignTokenDocBlock } from 'storybook-design-token'
diff --git a/src/stories/Tokens/Border/BorderWidth.mdx b/src/stories/Tokens/Border/BorderWidth.mdx index 4f2a71d6..bd056841 100644 --- a/src/stories/Tokens/Border/BorderWidth.mdx +++ b/src/stories/Tokens/Border/BorderWidth.mdx @@ -8,7 +8,7 @@ import { DesignTokenDocBlock } from 'storybook-design-token'
diff --git a/src/stories/Tokens/Breakpoint.mdx b/src/stories/Tokens/Breakpoint.mdx index f40eeb0a..3ef2788f 100644 --- a/src/stories/Tokens/Breakpoint.mdx +++ b/src/stories/Tokens/Breakpoint.mdx @@ -8,7 +8,7 @@ import { DesignTokenDocBlock } from 'storybook-design-token'
diff --git a/src/stories/Tokens/Color/BasicColor.mdx b/src/stories/Tokens/Color/BasicColor.mdx index 4629a3c7..38cd79d4 100644 --- a/src/stories/Tokens/Color/BasicColor.mdx +++ b/src/stories/Tokens/Color/BasicColor.mdx @@ -8,7 +8,7 @@ import { DesignTokenDocBlock } from 'storybook-design-token'
diff --git a/src/stories/Tokens/Color/BorderColor.mdx b/src/stories/Tokens/Color/BorderColor.mdx index 343f4baf..384c417f 100644 --- a/src/stories/Tokens/Color/BorderColor.mdx +++ b/src/stories/Tokens/Color/BorderColor.mdx @@ -8,7 +8,7 @@ import { DesignTokenDocBlock } from 'storybook-design-token'
diff --git a/src/stories/Tokens/Color/ColorScale.mdx b/src/stories/Tokens/Color/ColorScale.mdx index 77025ef7..044983aa 100644 --- a/src/stories/Tokens/Color/ColorScale.mdx +++ b/src/stories/Tokens/Color/ColorScale.mdx @@ -9,7 +9,7 @@ import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
diff --git a/src/stories/Tokens/EncodedImage.mdx b/src/stories/Tokens/EncodedImage.mdx index cf05542a..e340b3dd 100644 --- a/src/stories/Tokens/EncodedImage.mdx +++ b/src/stories/Tokens/EncodedImage.mdx @@ -9,7 +9,7 @@ import { createSourceCodeLink } from '../helpers/sourceCodeLink.js'
diff --git a/src/stories/Tokens/Opacity.mdx b/src/stories/Tokens/Opacity.mdx index a7d4b115..39896980 100644 --- a/src/stories/Tokens/Opacity.mdx +++ b/src/stories/Tokens/Opacity.mdx @@ -8,7 +8,7 @@ import { createSourceCodeLink } from '../helpers/sourceCodeLink.js'
diff --git a/src/stories/Tokens/Shadow.mdx b/src/stories/Tokens/Shadow.mdx index a3e3ac5d..9238ec13 100644 --- a/src/stories/Tokens/Shadow.mdx +++ b/src/stories/Tokens/Shadow.mdx @@ -8,7 +8,7 @@ import { createSourceCodeLink } from '../helpers/sourceCodeLink.js'
diff --git a/src/stories/Tokens/Sizing.mdx b/src/stories/Tokens/Sizing.mdx index 12e6cd8e..588cc39e 100644 --- a/src/stories/Tokens/Sizing.mdx +++ b/src/stories/Tokens/Sizing.mdx @@ -8,7 +8,7 @@ import { createSourceCodeLink } from '../helpers/sourceCodeLink.js'
diff --git a/src/stories/Tokens/Spacing.mdx b/src/stories/Tokens/Spacing.mdx index ea0b7526..bfa67fa2 100644 --- a/src/stories/Tokens/Spacing.mdx +++ b/src/stories/Tokens/Spacing.mdx @@ -8,7 +8,7 @@ import { createSourceCodeLink } from '../helpers/sourceCodeLink.js'
diff --git a/src/stories/Tokens/ZIndex.mdx b/src/stories/Tokens/ZIndex.mdx index 7ee45ec5..480b2f01 100644 --- a/src/stories/Tokens/ZIndex.mdx +++ b/src/stories/Tokens/ZIndex.mdx @@ -8,7 +8,7 @@ import { createSourceCodeLink } from '../helpers/sourceCodeLink.js'
diff --git a/src/stories/Utilities/Container/Container.mdx b/src/stories/Utilities/Container/Container.mdx index a6f68ed3..e2c72599 100644 --- a/src/stories/Utilities/Container/Container.mdx +++ b/src/stories/Utilities/Container/Container.mdx @@ -8,7 +8,7 @@ import { createSourceCodeLink } from '../../helpers/sourceCodeLink.js'
From c44461865985968c85a420caed91b19a1f456c65 Mon Sep 17 00:00:00 2001 From: Jeremy Walton Date: Fri, 31 Jan 2025 13:48:10 -0500 Subject: [PATCH 02/13] Completely remove sass --- .storybook/{preview.scss => preview.css} | 20 +-- .storybook/preview.js | 2 +- .stylelintrc.json | 20 +-- build_token_json.js | 2 +- package.json | 18 +-- src/components/{index.scss => index.css} | 0 src/core/tokens/{index.scss => index.css} | 0 src/{optics.scss => optics.css} | 8 +- yarn.lock | 147 +--------------------- 9 files changed, 37 insertions(+), 180 deletions(-) rename .storybook/{preview.scss => preview.css} (89%) rename src/components/{index.scss => index.css} (100%) rename src/core/tokens/{index.scss => index.css} (100%) rename src/{optics.scss => optics.css} (64%) diff --git a/.storybook/preview.scss b/.storybook/preview.css similarity index 89% rename from .storybook/preview.scss rename to .storybook/preview.css index a39bd535..10d976fe 100644 --- a/.storybook/preview.scss +++ b/.storybook/preview.css @@ -1,8 +1,8 @@ -@import './src/optics'; +@import '../src/optics'; -@import './src/recipes/domains-sidebar'; -@import './src/recipes/16six-sidebar'; -@import './src/recipes/aligned-header'; +@import '../src/recipes/domains-sidebar'; +@import '../src/recipes/16six-sidebar'; +@import '../src/recipes/aligned-header'; @import 'https://fonts.googleapis.com/css2?family=Tilt+Neon&display=swap'; @@ -59,12 +59,12 @@ height: 0; } -// Allow the "Show Code" button to appear above the footer in examples. +/* Allow the "Show Code" button to appear above the footer in examples. */ .docs-story div:last-child { z-index: 1; } -// Transition Demos +/* Transition Demos */ .transition-demo { display: inline-block; padding: var(--op-space-medium); @@ -165,7 +165,7 @@ } } -// Prevent our tag component from interfering with the docs +/* Prevent our tag component from interfering with the docs */ .language-html { .tag { display: initial; @@ -178,7 +178,7 @@ } } -// Company Card +/* Company Card */ .card.card--company { display: flex; align-items: center; @@ -192,7 +192,7 @@ gap: var(--op-space-x-large); .card__info-logo { - width: calc(var(--op-size-unit) * 24); // 96px + width: calc(var(--op-size-unit) * 24); /* 96px */ } p { @@ -200,7 +200,7 @@ } } - // --op-breakpoint-small + /* --op-breakpoint-small */ @media (width <= 768px) { flex-direction: column; diff --git a/.storybook/preview.js b/.storybook/preview.js index b2dcf090..075f726b 100644 --- a/.storybook/preview.js +++ b/.storybook/preview.js @@ -35,7 +35,7 @@ const preview = { }, } -import './preview.scss' +import './preview.css' export default preview diff --git a/.stylelintrc.json b/.stylelintrc.json index c41d37d9..b0d29a46 100644 --- a/.stylelintrc.json +++ b/.stylelintrc.json @@ -1,15 +1,19 @@ { - "extends": ["stylelint-config-standard-scss", "stylelint-config-idiomatic-order", "stylelint-config-prettier-scss"], - "plugins": ["stylelint-scss", "stylelint-prettier"], - "overrides": [ - { - "files": ["**/*.scss"], - "customSyntax": "postcss-scss" - } + "extends": [ + "stylelint-config-idiomatic-order" ], + "plugins": [ + "stylelint-prettier" + ], + "overrides": [], "rules": { "prettier/prettier": true, - "custom-property-pattern": ["(?<=op-)", { "message": "CSS variables should be prefixed with op-" }], + "custom-property-pattern": [ + "(?<=op-)", + { + "message": "CSS variables should be prefixed with op-" + } + ], "selector-class-pattern": null } } diff --git a/build_token_json.js b/build_token_json.js index 189b1a9e..6a09ff76 100644 --- a/build_token_json.js +++ b/build_token_json.js @@ -128,7 +128,7 @@ try { fs.readdir(source, { withFileTypes: true }, (_errors, files) => { let variables = {} files - .filter((directoryEntry) => directoryEntry.isFile() && directoryEntry.name !== 'index.scss') + .filter((directoryEntry) => directoryEntry.isFile() && directoryEntry.name !== 'index.css') .forEach((directoryEntry) => { const fileContents = fs.readFileSync(`${source}/${directoryEntry.name}`) const matches = fileContents.toString().match(/^\s*--.*?(?=;)/gm) diff --git a/package.json b/package.json index 52e1c255..91267347 100644 --- a/package.json +++ b/package.json @@ -2,20 +2,19 @@ "name": "@rolemodel/optics", "version": "1.12.0", "packageManager": "yarn@4.2.2", - "description": "Optics is an scss package that provides base styles and components that can be integrated and customized in a variety of projects.", - "main": "dist/scss/optics.scss", + "description": "Optics is a css package that provides base styles and components that can be integrated and customized in a variety of projects.", + "main": "dist/css/optics.css", "scripts": { "test": "exit 0", - "build": "yarn build:css && yarn build:scss && yarn build:tokens", - "build:css": "sass src/optics.scss dist/css/optics.css --load-path=node_modules/", - "build:scss": "rsync -a src/ dist/scss --exclude stories", + "build": "yarn build:css && yarn build:tokens", + "build:css": "rsync -a src/ dist/css --exclude stories", "build:tokens": "node build_token_json --source=src/core/tokens --output=dist/tokens/tokens.json", "storybook": "storybook dev -p 6006 --docs", "build-storybook": "storybook build --docs", "lint": "yarn lint:js && yarn lint:css", "lint-fix": "yarn lint:js --fix && yarn lint:css --fix", "lint:js": "eslint 'src/stories/**/*.js'", - "lint:css": "stylelint 'src/**/*.(scss|css)'", + "lint:css": "stylelint 'src/**/*.css'", "prettier": "prettier -w .", "prettier-check": "prettier -c .", "sanity-check": "yarn lint && yarn prettier && yarn build && yarn build-storybook && rm -rf ./dist && rm -rf ./storybook-static", @@ -30,7 +29,6 @@ "CSS", "System", "RoleModel", - "SCSS", "Optics" ], "author": "RoleModel Software", @@ -64,19 +62,13 @@ "eslint-plugin-storybook": "^0.6.13", "generate-template-files": "^3.2.1", "postcss": "^8.4.38", - "postcss-scss": "^4.0.9", "prettier": "^3.0.0", - "sass": "^1.77.2", - "sass-loader": "^14.1.0", "storybook": "^8.1.3", "storybook-design-token": "^3.1.0", "style-loader": "^3.3.3", "stylelint": "^16.2.1", "stylelint-config-idiomatic-order": "^10.0.0", - "stylelint-config-prettier-scss": "^1.0.0", - "stylelint-config-standard-scss": "^13.0.0", "stylelint-prettier": "^5.0.0", - "stylelint-scss": "^6.1.0", "vite": "^5.2.11" }, "peerDependencies": { diff --git a/src/components/index.scss b/src/components/index.css similarity index 100% rename from src/components/index.scss rename to src/components/index.css diff --git a/src/core/tokens/index.scss b/src/core/tokens/index.css similarity index 100% rename from src/core/tokens/index.scss rename to src/core/tokens/index.css diff --git a/src/optics.scss b/src/optics.css similarity index 64% rename from src/optics.scss rename to src/optics.css index 41df9a63..eaf4655b 100644 --- a/src/optics.scss +++ b/src/optics.css @@ -1,13 +1,13 @@ -// Third party Vendors +/* Third party Vendors */ @import 'modern-css-reset/dist/reset'; -// Tokens +/* Tokens */ @import 'core/tokens'; -// Base styles and utilities +/* Base styles and utilities */ @import 'core/base'; @import 'core/layout'; @import 'core/utilities'; -// Components +/* Components */ @import 'components'; diff --git a/yarn.lock b/yarn.lock index bede5ec7..bb905661 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2375,19 +2375,13 @@ __metadata: generate-template-files: "npm:^3.2.1" modern-css-reset: "npm:^1.4.0" postcss: "npm:^8.4.38" - postcss-scss: "npm:^4.0.9" prettier: "npm:^3.0.0" - sass: "npm:^1.77.2" - sass-loader: "npm:^14.1.0" storybook: "npm:^8.1.3" storybook-design-token: "npm:^3.1.0" style-loader: "npm:^3.3.3" stylelint: "npm:^16.2.1" stylelint-config-idiomatic-order: "npm:^10.0.0" - stylelint-config-prettier-scss: "npm:^1.0.0" - stylelint-config-standard-scss: "npm:^13.0.0" stylelint-prettier: "npm:^5.0.0" - stylelint-scss: "npm:^6.1.0" vite: "npm:^5.2.11" peerDependencies: tom-select: ^2.0.0 @@ -4583,7 +4577,7 @@ __metadata: languageName: node linkType: hard -"chokidar@npm:>=3.0.0 <4.0.0, chokidar@npm:^3.6.0": +"chokidar@npm:^3.6.0": version: 3.6.0 resolution: "chokidar@npm:3.6.0" dependencies: @@ -7064,13 +7058,6 @@ __metadata: languageName: node linkType: hard -"immutable@npm:^4.0.0": - version: 4.3.6 - resolution: "immutable@npm:4.3.6" - checksum: 10c0/7d0952a768b4fadcee47230ed86dc9505a4517095eceaf5a47e65288571c42400c6e4a2ae21eca4eda957cb7bc50720213135b62cf6a181639111f8acae128c3 - languageName: node - linkType: hard - "import-fresh@npm:^3.2.1, import-fresh@npm:^3.3.0": version: 3.3.0 resolution: "import-fresh@npm:3.3.0" @@ -8950,13 +8937,6 @@ __metadata: languageName: node linkType: hard -"postcss-media-query-parser@npm:^0.2.3": - version: 0.2.3 - resolution: "postcss-media-query-parser@npm:0.2.3" - checksum: 10c0/252c8cf24f0e9018516b0d70b7b3d6f5b52e81c4bab2164b49a4e4c1b87bb11f5dbe708c0076990665cb24c70d5fd2f3aee9c922b0f67c7c619e051801484688 - languageName: node - linkType: hard - "postcss-resolve-nested-selector@npm:^0.1.1": version: 0.1.1 resolution: "postcss-resolve-nested-selector@npm:0.1.1" @@ -8973,7 +8953,7 @@ __metadata: languageName: node linkType: hard -"postcss-scss@npm:^4.0.2, postcss-scss@npm:^4.0.9": +"postcss-scss@npm:^4.0.2": version: 4.0.9 resolution: "postcss-scss@npm:4.0.9" peerDependencies: @@ -8982,7 +8962,7 @@ __metadata: languageName: node linkType: hard -"postcss-selector-parser@npm:^6.0.15, postcss-selector-parser@npm:^6.0.16": +"postcss-selector-parser@npm:^6.0.16": version: 6.0.16 resolution: "postcss-selector-parser@npm:6.0.16" dependencies: @@ -9856,45 +9836,6 @@ __metadata: languageName: node linkType: hard -"sass-loader@npm:^14.1.0": - version: 14.2.1 - resolution: "sass-loader@npm:14.2.1" - dependencies: - neo-async: "npm:^2.6.2" - peerDependencies: - "@rspack/core": 0.x || 1.x - node-sass: ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 - sass: ^1.3.0 - sass-embedded: "*" - webpack: ^5.0.0 - peerDependenciesMeta: - "@rspack/core": - optional: true - node-sass: - optional: true - sass: - optional: true - sass-embedded: - optional: true - webpack: - optional: true - checksum: 10c0/9a48d454584d96d6c562eb323bb9e3c6808e930eeaaa916975b97d45831e0b87936a8655cdb3a4512a25abc9587dea65a9616e42396be0d7e7c507a4795a8146 - languageName: node - linkType: hard - -"sass@npm:^1.77.2": - version: 1.77.2 - resolution: "sass@npm:1.77.2" - dependencies: - chokidar: "npm:>=3.0.0 <4.0.0" - immutable: "npm:^4.0.0" - source-map-js: "npm:>=0.6.2 <2.0.0" - bin: - sass: sass.js - checksum: 10c0/0d292339064de3c902e209d41de9c4eb2038cff326476aeebbb5be3eee1d23400d975face2b8e124ae617b10af3e93bec01580f61912f34e4c517fe137a118b6 - languageName: node - linkType: hard - "saxes@npm:^6.0.0": version: 6.0.0 resolution: "saxes@npm:6.0.0" @@ -10135,7 +10076,7 @@ __metadata: languageName: node linkType: hard -"source-map-js@npm:>=0.6.2 <2.0.0, source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.1": +"source-map-js@npm:^1.0.1, source-map-js@npm:^1.2.1": version: 1.2.1 resolution: "source-map-js@npm:1.2.1" checksum: 10c0/7bda1fc4c197e3c6ff17de1b8b2c20e60af81b63a52cb32ec5a5d67a20a7d42651e2cb34ebe93833c5a2a084377e17455854fee3e21e7925c64a51b6a52b0faf @@ -10440,71 +10381,6 @@ __metadata: languageName: node linkType: hard -"stylelint-config-prettier-scss@npm:^1.0.0": - version: 1.0.0 - resolution: "stylelint-config-prettier-scss@npm:1.0.0" - peerDependencies: - stylelint: ">=15.0.0" - bin: - stylelint-config-prettier-scss: bin/check.js - stylelint-config-prettier-scss-check: bin/check.js - checksum: 10c0/4d5e1d1c200d4611b5b7bd2d2528cc9e301f26645802a2774aec192c4c2949cbf5a0147eba8b2e6e4ff14a071b03024f3034bb1b4fda37a8ed5a0081a9597d4d - languageName: node - linkType: hard - -"stylelint-config-recommended-scss@npm:^14.0.0": - version: 14.0.0 - resolution: "stylelint-config-recommended-scss@npm:14.0.0" - dependencies: - postcss-scss: "npm:^4.0.9" - stylelint-config-recommended: "npm:^14.0.0" - stylelint-scss: "npm:^6.0.0" - peerDependencies: - postcss: ^8.3.3 - stylelint: ^16.0.2 - peerDependenciesMeta: - postcss: - optional: true - checksum: 10c0/9ddc92e7a5fa131b41cee1ab1f69251934ca35c0e2803dc613329cdead7b8b27d8457048a63db29f61a1442e7cdef14207f88a3abce00ec53fdefe0d604f7de3 - languageName: node - linkType: hard - -"stylelint-config-recommended@npm:^14.0.0": - version: 14.0.0 - resolution: "stylelint-config-recommended@npm:14.0.0" - peerDependencies: - stylelint: ^16.0.0 - checksum: 10c0/4ad15c36e8c03291aa7bbe4b672ebfb0f46ab698e7580a0da8d29644046d102d7f31dbf00a2a6eab94b565c390c6fb0d5d528737b83ac3acf6dc2ef085a90b11 - languageName: node - linkType: hard - -"stylelint-config-standard-scss@npm:^13.0.0": - version: 13.1.0 - resolution: "stylelint-config-standard-scss@npm:13.1.0" - dependencies: - stylelint-config-recommended-scss: "npm:^14.0.0" - stylelint-config-standard: "npm:^36.0.0" - peerDependencies: - postcss: ^8.3.3 - stylelint: ^16.3.1 - peerDependenciesMeta: - postcss: - optional: true - checksum: 10c0/d07cae806ee8b3e77684f019a8b22cc32642373da8053e6ae7ed716f8ddbe6ea1f7323633a6a1bbc9aa08c6a3dceb1dcf053d83fdd10d076b5a01da6e86801ae - languageName: node - linkType: hard - -"stylelint-config-standard@npm:^36.0.0": - version: 36.0.0 - resolution: "stylelint-config-standard@npm:36.0.0" - dependencies: - stylelint-config-recommended: "npm:^14.0.0" - peerDependencies: - stylelint: ^16.1.0 - checksum: 10c0/1fc9adddfc5cf0a1d7a443182a0731712a3950ace72a24081b4ede2b0bb6fc1eebd003c009f1d8d06c3a64ba9b31b0ed12512db2f91c8fa549238d8341580e4b - languageName: node - linkType: hard - "stylelint-order@npm:^6.0.2": version: 6.0.4 resolution: "stylelint-order@npm:6.0.4" @@ -10529,21 +10405,6 @@ __metadata: languageName: node linkType: hard -"stylelint-scss@npm:^6.0.0, stylelint-scss@npm:^6.1.0": - version: 6.3.0 - resolution: "stylelint-scss@npm:6.3.0" - dependencies: - known-css-properties: "npm:^0.30.0" - postcss-media-query-parser: "npm:^0.2.3" - postcss-resolve-nested-selector: "npm:^0.1.1" - postcss-selector-parser: "npm:^6.0.15" - postcss-value-parser: "npm:^4.2.0" - peerDependencies: - stylelint: ^16.0.2 - checksum: 10c0/bd26fd0a1145930d0c27cbe436ff0cad473eb64ca6b69c8b1953d1164633ba4c3fdfd597764c9ceb3e6c9a153a26d7a635183aa4ed6cc8faf7652033ff7019e2 - languageName: node - linkType: hard - "stylelint@npm:^16.2.1": version: 16.5.0 resolution: "stylelint@npm:16.5.0" From 35532caceb97a6699804a8d1b91f1d8b2afc38d6 Mon Sep 17 00:00:00 2001 From: Jeremy Walton Date: Fri, 31 Jan 2025 14:09:25 -0500 Subject: [PATCH 03/13] Fix text alignment issue --- .storybook/preview.css | 4 ++++ src/stories/Utilities/TextAlignment/TextAlignment.js | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/.storybook/preview.css b/.storybook/preview.css index 10d976fe..118a9791 100644 --- a/.storybook/preview.css +++ b/.storybook/preview.css @@ -165,6 +165,10 @@ } } +.text-alignment-demo { + width: 400px; +} + /* Prevent our tag component from interfering with the docs */ .language-html { .tag { diff --git a/src/stories/Utilities/TextAlignment/TextAlignment.js b/src/stories/Utilities/TextAlignment/TextAlignment.js index 7045c1f7..eed61bcd 100644 --- a/src/stories/Utilities/TextAlignment/TextAlignment.js +++ b/src/stories/Utilities/TextAlignment/TextAlignment.js @@ -1,7 +1,7 @@ export const createTextAlignment = ({ alignment = 'left' }) => { const element = document.createElement('div') element.innerText = alignment - element.className = `text-${alignment}` + element.className = `text-${alignment} text-alignment-demo` return element } From 75485e6a4cd38041adabe0df7900c3e5e81d7210 Mon Sep 17 00:00:00 2001 From: Jeremy Walton Date: Fri, 31 Jan 2025 14:18:32 -0500 Subject: [PATCH 04/13] Fix button examples in documentation --- src/stories/Components/Alert/Alert.js | 2 +- .../ButtonGroup/ButtonGroup.stories.js | 20 +++++++++---------- src/stories/Components/Navbar/Navbar.js | 2 +- .../Components/Pagination/Pagination.js | 2 +- src/stories/Components/Sidebar/Sidebar.js | 4 ++-- src/stories/Components/Tag/Tag.js | 4 ++-- 6 files changed, 17 insertions(+), 17 deletions(-) diff --git a/src/stories/Components/Alert/Alert.js b/src/stories/Components/Alert/Alert.js index 536cbc24..04d82d42 100644 --- a/src/stories/Components/Alert/Alert.js +++ b/src/stories/Components/Alert/Alert.js @@ -38,7 +38,7 @@ export const createAlert = ({ element.innerHTML += ' \n' // Formatting Hack if (dismissible) { - const iconButton = createButton({ priority: 'default', icon: 'close', pill: true, noBorder: true }) + const iconButton = createButton({ variant: 'default', icon: 'close', pill: true, noBorder: true }) iconButton.classList.add('alert__icon') element.appendChild(iconButton) } diff --git a/src/stories/Components/ButtonGroup/ButtonGroup.stories.js b/src/stories/Components/ButtonGroup/ButtonGroup.stories.js index 8af564a2..8afbe924 100644 --- a/src/stories/Components/ButtonGroup/ButtonGroup.stories.js +++ b/src/stories/Components/ButtonGroup/ButtonGroup.stories.js @@ -10,7 +10,7 @@ export default { return createButtonGroup({ ...args }) }, argTypes: { - priority: { + variant: { control: { type: 'select' }, options: ['default', 'primary', 'destructive', 'warning'], }, @@ -31,59 +31,59 @@ export default { export const Default = { args: { - priority: 'default', + variant: 'default', }, } export const Primary = { args: { - priority: 'primary', + variant: 'primary', }, } export const Destructive = { args: { - priority: 'destructive', + variant: 'destructive', }, } export const Warning = { args: { - priority: 'warning', + variant: 'warning', }, } export const Active = { args: { - priority: 'destructive', + variant: 'destructive', active: true, }, } export const NoBorder = { args: { - priority: 'primary', + variant: 'primary', noBorder: true, }, } export const Disabled = { args: { - priority: 'primary', + variant: 'primary', disabled: true, }, } export const Pill = { args: { - priority: 'default', + variant: 'default', pill: true, }, } export const Size = { args: { - priority: 'primary', + variant: 'primary', size: 'small', }, } diff --git a/src/stories/Components/Navbar/Navbar.js b/src/stories/Components/Navbar/Navbar.js index 5343422b..1efe69f3 100644 --- a/src/stories/Components/Navbar/Navbar.js +++ b/src/stories/Components/Navbar/Navbar.js @@ -4,7 +4,7 @@ import { createAvatar } from '../Avatar/Avatar.js' const createNavbarLink = ({ icon, label }, activeLink) => { return createButton({ label, - priority: 'default', + variant: 'default', noBorder: true, active: activeLink === label, icon, diff --git a/src/stories/Components/Pagination/Pagination.js b/src/stories/Components/Pagination/Pagination.js index 0c46a3ad..ea15d788 100644 --- a/src/stories/Components/Pagination/Pagination.js +++ b/src/stories/Components/Pagination/Pagination.js @@ -20,7 +20,7 @@ export const createPagination = ({ activePage = '1', includeShowing = false }) = return createButton({ useAsLink: true, label: item, - priority: 'default', + variant: 'default', noBorder: true, active: activePage === item, size: 'small', diff --git a/src/stories/Components/Sidebar/Sidebar.js b/src/stories/Components/Sidebar/Sidebar.js index add4cc9c..7a5b6b2a 100644 --- a/src/stories/Components/Sidebar/Sidebar.js +++ b/src/stories/Components/Sidebar/Sidebar.js @@ -11,7 +11,7 @@ const createSidebarItem = ({ type, icon, label }, activeLink) => { return createButton({ label, - priority: 'default', + variant: 'default', noBorder: true, active: activeLink === label, icon, @@ -78,7 +78,7 @@ export const createSidebar = ({ ${ createButton({ label: 'Logout', - priority: 'default', + variant: 'default', noBorder: true, icon: 'logout', inlineIconWithLabel: true, diff --git a/src/stories/Components/Tag/Tag.js b/src/stories/Components/Tag/Tag.js index 76a97ca1..c38c18a0 100644 --- a/src/stories/Components/Tag/Tag.js +++ b/src/stories/Components/Tag/Tag.js @@ -9,11 +9,11 @@ export const createTag = ({ label, type = 'readonly', iconLeft = false, iconRigh tag.append(text) if (iconLeft) { - tag.prepend(createButton({ priority: 'default', noBorder: true, icon: 'close', pill: true })) + tag.prepend(createButton({ variant: 'default', noBorder: true, icon: 'close', pill: true })) } if (iconRight) { - tag.append(createButton({ priority: 'default', noBorder: true, icon: 'close', pill: true })) + tag.append(createButton({ variant: 'default', noBorder: true, icon: 'close', pill: true })) } tag.className = ['tag', `tag--${type}`].filter(Boolean).join(' ') From 0f8eb830108aac84528ea40b3912011f65052f88 Mon Sep 17 00:00:00 2001 From: Jeremy Walton Date: Fri, 31 Jan 2025 14:21:04 -0500 Subject: [PATCH 05/13] Fix padding on form group --- src/components/form.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form.css b/src/components/form.css index 22b6e54c..a5b12508 100644 --- a/src/components/form.css +++ b/src/components/form.css @@ -251,7 +251,7 @@ textarea.form-control:not([type='radio'], [type='checkbox']) { gap: var(--op-space-x-small); grid-auto-rows: auto; grid-template-columns: auto 1fr; - padding-block: var(--op-space-small) 0; + padding-block: var(--op-space-small); padding-inline: 0; /* Group Alignment */ From 738149509ac86cec39a97aae24dac98046811f99 Mon Sep 17 00:00:00 2001 From: Jeremy Walton Date: Fri, 31 Jan 2025 14:22:34 -0500 Subject: [PATCH 06/13] Fix sidebar primary --- src/components/sidebar.css | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/sidebar.css b/src/components/sidebar.css index bc77ffe9..9542160f 100644 --- a/src/components/sidebar.css +++ b/src/components/sidebar.css @@ -131,7 +131,7 @@ } /* Primary */ - .sidebar--primary { + &.sidebar--primary { --_op-sidebar-background-color: var(--op-color-primary-plus-six); --_op-sidebar-text-color: var(--op-color-primary-on-plus-six); --_op-sidebar-border-color: var(--op-color-primary-plus-four); From 681dbf64751b46e4c80dd18d3f07dcb030929ea2 Mon Sep 17 00:00:00 2001 From: Jeremy Walton Date: Fri, 31 Jan 2025 14:30:11 -0500 Subject: [PATCH 07/13] Ensure button variants in documents are correct --- src/stories/Components/Badge/Badge.js | 2 +- src/stories/Components/ConfirmDialog/ConfirmDialog.js | 2 +- src/stories/Components/Modal/Modal.js | 2 +- src/stories/Components/Modal/Modal.mdx | 2 +- src/stories/Recipes/Layout/Layout.js | 4 ++-- 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/stories/Components/Badge/Badge.js b/src/stories/Components/Badge/Badge.js index ccacb65a..42b1db4e 100644 --- a/src/stories/Components/Badge/Badge.js +++ b/src/stories/Components/Badge/Badge.js @@ -26,7 +26,7 @@ export const createBadge = ({ if (inButton !== 'no') { const button = document.createElement('button') button.innerText = 'Notifications' - button.className = 'btn-primary btn--with-badge' + button.className = 'btn btn--primary btn--with-badge' if (!pill) { badge.className += ' badge--pill' diff --git a/src/stories/Components/ConfirmDialog/ConfirmDialog.js b/src/stories/Components/ConfirmDialog/ConfirmDialog.js index 5845475a..d818d2cc 100644 --- a/src/stories/Components/ConfirmDialog/ConfirmDialog.js +++ b/src/stories/Components/ConfirmDialog/ConfirmDialog.js @@ -14,7 +14,7 @@ export const createConfirmDialog = ({ title, message, inlineDemo = false }) => {
- +
` diff --git a/src/stories/Components/Modal/Modal.js b/src/stories/Components/Modal/Modal.js index 7e44217d..925ad39a 100644 --- a/src/stories/Components/Modal/Modal.js +++ b/src/stories/Components/Modal/Modal.js @@ -8,7 +8,7 @@ export const createModal = ({ header, body, footer = '', inlineDemo = false }) = ? footer : ` - + ` element.innerHTML = ` diff --git a/src/stories/Components/Modal/Modal.mdx b/src/stories/Components/Modal/Modal.mdx index cc861b69..ea6beb7a 100644 --- a/src/stories/Components/Modal/Modal.mdx +++ b/src/stories/Components/Modal/Modal.mdx @@ -65,7 +65,7 @@ The modal styles will still work using the HTML dialog element. Simply add the `
- +
``` diff --git a/src/stories/Recipes/Layout/Layout.js b/src/stories/Recipes/Layout/Layout.js index 851691d0..d32b8802 100644 --- a/src/stories/Recipes/Layout/Layout.js +++ b/src/stories/Recipes/Layout/Layout.js @@ -180,8 +180,8 @@ const createLoginLayout = () => {
- Forgot Password? - From 6cd3700863253cc9ed78cf1fd4a3a26cc590131a Mon Sep 17 00:00:00 2001 From: Jeremy Walton Date: Fri, 31 Jan 2025 14:36:36 -0500 Subject: [PATCH 08/13] Update new component instructions md --- NEW_COMPONENT.md | 56 ++++++++++++++++++++---------------------------- README.md | 2 +- 2 files changed, 24 insertions(+), 34 deletions(-) diff --git a/NEW_COMPONENT.md b/NEW_COMPONENT.md index 5f70967e..2a650de3 100644 --- a/NEW_COMPONENT.md +++ b/NEW_COMPONENT.md @@ -2,54 +2,44 @@ To create a new CSS component, follow these steps: -1. Start by defining a Sass `%{component-name}-global` placeholder for the component. This placeholder will serve as the base style for the component and all its variants. -2. Extend the default class and all variants of the component with the global placeholder you defined in the previous step. This ensures that the base style is applied consistently across all variations. -3. When creating variants of the component, use the following syntax: `.{component-name}-{variant}`. Variants are top-level components that have distinct styles or functionalities. -4. For stylistic tweaks that apply to all variants, use modifiers following the BEM (Block, Element, Modifier) syntax. The modifier class should be in the format: `.{component-name}--{modifier}`. - - - -## Variant vs. Modifier - -A variant is a top-level component that has distinct styles or functionalities. For example, a button component can have a primary variant that has a different color and hover state than the default button. A modifier is a class that modifies the style of a component. For example, a button component can have a disabled modifier that changes the color and cursor of the button. Modifiers apply to all Variants. +1. Start by defining a css `.{component-name}` selector for the component. This will serve as the base style for the component and all its variants. +2. Create modifiers for any all variants of the component you defined in the previous step. This ensures that the base style is shared consistently across all variations. +3. When creating variants of the component, use the following syntax: `.{component-name}--{variant}`. It can be helpful to nest these under the main class with a `&.{component-name}--{variant}` to ensure they only work with that component. +4. For stylistic tweaks that apply to all variants, use modifiers following the BEM (Block, Element, Modifier) syntax. The modifier class should be in the format: `.{component-name}--{modifier}` just like the other variants. To illustrate these concepts, let's consider an example of a button. You can use the following template as a guide: -```scss -// Define the global placeholder for the button component -%button-global { - // Base styles for the button +```css +/* Define the main component */ +.btn { + /* Base styles for the button */ - // Hover state + /* Hover state */ &:hover { - // Styles for the hovered button modifier - // ... + /* + Styles for the hovered button modifier + ... + */ } - // Modifier: Large button + /* Modifier: Large button */ &.btn--large { - // Styles for the large button modifier + /* Styles for the large button modifier */ } - // Modifier: Disabled button + /* Modifier: Disabled button */ &.btn--disabled, &:disabled { - // Styles for the disabled button modifier + /* Styles for the disabled button modifier */ } } -// Default button class extending the global styles -.btn { - @extend %button-global; - // Specific styles for the default button variant - // ... -} - -// Variant: Primary button -.btn-primary { - @extend %button-global; - // Specific styles for the primary button variant - // ... +/* Variant: Primary button */ +.btn.btn--primary { + /* + Specific styles for the primary button variant + ... + */ } ``` diff --git a/README.md b/README.md index c42b62f5..640782fc 100644 --- a/README.md +++ b/README.md @@ -65,7 +65,7 @@ Add the following above a group to categorize the tokens. ### Component Documentation -For instructions on how to create a new component, see [Process for Creating New Components](./NEW_COMPONENT.MD) +For instructions on how to create a new component, see [Process for Creating New Components](./NEW_COMPONENT.md) Additional stories can be added using the following command, or copying an existing story. From 26da4bb588a6a818c21b26b74c8369ea7f08eda4 Mon Sep 17 00:00:00 2001 From: Jeremy Walton Date: Fri, 31 Jan 2025 14:54:54 -0500 Subject: [PATCH 09/13] Remove all references to scss --- .github/workflows/linting.yml | 2 -- .storybook/manager-head.html | 2 +- README.md | 16 ++++++---------- optics-design-system.code-workspace | 4 +++- src/stories/Components/Accordion/Accordion.mdx | 12 ++++++------ src/stories/Components/Alert/Alert.mdx | 12 ++++++------ src/stories/Components/Avatar/Avatar.mdx | 10 +++++----- src/stories/Components/Badge/Badge.mdx | 12 ++++++------ .../Components/Breadcrumbs/Breadcrumbs.mdx | 10 +++++----- src/stories/Components/Button/Button.mdx | 16 ++++++++-------- .../Components/ButtonGroup/ButtonGroup.mdx | 16 ++++++++-------- src/stories/Components/Card/Card.mdx | 10 +++++----- .../Components/ConfirmDialog/ConfirmDialog.mdx | 10 +++++----- src/stories/Components/Divider/Divider.mdx | 10 +++++----- src/stories/Components/Form/Form.mdx | 10 +++++----- src/stories/Components/Icon/Icon.mdx | 10 +++++----- src/stories/Components/Modal/Modal.mdx | 10 +++++----- src/stories/Components/Navbar/Navbar.mdx | 16 ++++++++-------- src/stories/Components/Pagination/Pagination.mdx | 16 ++++++++-------- src/stories/Components/SidePanel/SidePanel.mdx | 10 +++++----- src/stories/Components/Sidebar/Sidebar.mdx | 16 ++++++++-------- src/stories/Components/Spinner/Spinner.mdx | 10 +++++----- src/stories/Components/Switch/Switch.mdx | 10 +++++----- src/stories/Components/Tab/Tab.mdx | 10 +++++----- src/stories/Components/Table/Table.mdx | 14 +++++++------- src/stories/Components/Tag/Tag.mdx | 12 ++++++------ src/stories/Components/TextPair/TextPair.mdx | 10 +++++----- src/stories/Components/Tooltip/Tooltip.mdx | 10 +++++----- src/stories/Overview/Addons.mdx | 6 +++--- src/stories/Overview/FileOrganization.mdx | 2 +- src/stories/Overview/Introduction.mdx | 16 +++++----------- src/stories/Overview/SelectiveImports.mdx | 2 +- src/stories/Overview/Themes.mdx | 2 +- .../templates/component/??name??(pascalCase).mdx | 10 +++++----- 34 files changed, 167 insertions(+), 177 deletions(-) diff --git a/.github/workflows/linting.yml b/.github/workflows/linting.yml index 3c67fdce..6b530c76 100644 --- a/.github/workflows/linting.yml +++ b/.github/workflows/linting.yml @@ -30,8 +30,6 @@ jobs: run: yarn prettier-check - name: Build CSS run: yarn build:css - - name: Build SCSS - run: yarn build:scss - name: Build Tokens run: yarn build:tokens - name: Build Storybook diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html index 28117aef..66009cc9 100644 --- a/.storybook/manager-head.html +++ b/.storybook/manager-head.html @@ -1,4 +1,4 @@ -